@charset "UTF-8";
/* Body */



/*navここから*/


a,
a:active,
a:hover,
a:visited {
  text-decoration: none;
  color: inherit !important;
}

/*4.14非表示*/
/*#nav_menu{
text-align: center;
position: fixed;
  top: 30;
  z-index: 999;
  width: 100%;
background-color: #ffffff;
height:250px;
}*/

/*4.14追加*/
/*ヘッダー固定によるページ内リンク位置のずれを調整*/
.l-container section{
padding-top: 93px;
margin-top: -93px;
}

.l-container .sub_section{
padding-top: 93px;
margin-top: -93px;
}
/*/ヘッダー固定によるページ内リンク位置のずれを調整*/

.l-container .nav-wrapper_sp{
	position: fixed;
    top: 0;
    width: 100%;
	height:67px;
    background-color: rgb(255, 255, 255);
    z-index: 10;
    padding: 10px;
}

.l-container .l-wrapper_sp img{
    position: fixed;
    top: 7px;
    left: 5px;
    z-index: 8;
	width:100px;
    height: auto;
}

.l-container .nav_logo{
    position: fixed;
    top: 4px;
    right: 10px;
    z-index: 10;
	width:50px;
}


#adjust {
    margin-top: 93px;
}

@media (min-width: 445px) and (max-width: 700px){
#adjust {
   margin-top: 63px;
}
}



.l-container button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}


/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.btn {
	position: fixed;
	top:10px;
	right: 10px;
	/*left:300px;*/
	z-index:1000;
	width: 48px;
	height: 48px;
}

/***** 真ん中のバーガー線 *****/
.l-container .btn-line {
	display: block;
	position: relative;
	width: 100%;
	height: 4px;
	background-color: #404040;
	transition: .2s;
}

/***** 上下のバーガー線 *****/
.btn-line::before , .btn-line::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #404040;
	transition: .5s;
}

.btn-line::before {
	transform: translateY(-16px);
}

.btn-line::after {
	/* 下の線の位置 */
	transform: translateY(16px);
}

/***** メニューオープン時 *****/
.btn-line.open {
	background-color: transparent;
}

.btn-line.open::before , .btn-line.open::after {
	content: "";
	background-color: #333;
	transition: .2s;
}

.btn-line.open::before {
	transform: rotate(45deg);
}

.btn-line.open::after {
	transform: rotate(-45deg);
}

/**************** ここまで、ハンバーガーボタンのスタイリング ****************/

/**************** 以下、メニューのスタイリング ****************/
.l-container .nav_menu {
	/* メニューを縦に */
	display: none;
	position: absolute;
	flex-direction: column;
	/* メニューの位置マイナス指定で画面外に */
	right: -100%;
	width: 100%;
	height: 100vh;
	background-color: #fff;
    z-index: 9;
}
.l-container .nav_menuitem {
	/* メニューテキスト位置をリスト内中心に */
	display: block;
	align-items: center;
	justify-content: center;
	font-size: 3.2rem;
	border-bottom: solid 1px #dcdcdc;
	margin: 0 20px 20px;
}
.l-container .nav_menuitem:first-of-type{
	margin: 80px 20px 20px;
}

.l-container .nav_menuitem:hover {
	cursor: pointer;
	transition: .3s;
}
.l-container .nav_menutitle{
	pointer-events: all;
}
.l-container .nav_menutitle i{
	margin-left: 10px;
	transition: .3s;
}

/***** メニューオープン時位置0にして画面内に *****/
.l-container .nav_menu.open {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	overflow-y: scroll;
}

.l-container .nav_menu__child{
	display: none;
	font-size: 2.4rem;
}
.l-container .nav_menu__child li{
	margin-left: 40px;
}
/*/4.14追加*/


/*navここまで*/







.clear{
	clear:both;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
    font-size: 0;
}
 
 
.clearfix {
	display: block;
}

/*色指定ここから*/
.colorGreen{
color: #218c3a;
}
/*色指定ここまで*/
/*文字指定ここから*/


p{
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
/*font-size:2rem;*/
}

.gray{
color:#9e9d9d;
}

.title_mincho{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
font-size: 450%!important;
}

@media  screen and (max-width: 960px){
.title_mincho{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
font-size: 200%!important;
}
}

.title_gothic{
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
font-size: 250%!important;
}

@media  screen and (max-width: 960px){
.title_gothic{
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;

font-size: 140%!important;
}
}

.title_mincho2{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
font-size: 300%!important;
}

@media  screen and (max-width: 960px){
.title_mincho2{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
font-size: 160%!important;
}
}


/*文字指定ここまで*/


/*---------------------
utility
-----------------------*/
 .bnr_br_sp, .sp{
    display: block;
}
.bnr_br_pc, .pc{
    display: none;
}

/*4.14追加*/
.br_nav_sp{
 display: block;
}
.br_nav_pc{
 display: none;
}


















@media screen and (min-width: 640px){
	/*-----------------------
	utility
	-------------------------*/
     .bnr_br_sp, .sp{
        display: none;
}
    .bnr_br_pc, .pc{
        display: block;
    }

.absolute {
    position: absolute;
    width: 100%;
    top: -20px;
    padding: 0;
}
/*4.14追加*/
.l-container .l-wrapper_sp img {
    width: 150px;
}
.btn {
	top:20px;
    left: 300px;
}
.l-container .nav_logo {
    width: 65px;
}
.l-container .nav-wrapper_sp{
    height: 93px;
}
.l-container .background {
     padding-top: 93px; 
}
/*/4.14追加*/
}	
	
/*4.14追加*/
@media (min-width: 768px) and (max-width: 959px){
.l-outline {
    padding-top: 0 !important;
}
}

@media screen and (min-width: 960px){
/*-----------------------
utility
-------------------------*/
.br_nav_sp{
 display: none;
}
.br_nav_pc{
 display: block;
}
	
/*-----------------------
nav
-------------------------*/	
.l-container .nav-wrapper_pc{
	 /*display: flex;*/	
    justify-content: flex-start;
    padding: 0px;
	align-items: center;
}
	
.l-container .l-wrapper_pc{
	margin: 10px;
	/*padding: 10px 20px 10px 132px;*/
	/*padding: 16.5px 20px 16.5px 132px;/*04.19追加*/
}
	
.l-container ul.main-menu_pc {
    /*text-align: right;*/
    padding: 0 30px;
    display: flex;
    column-gap:20px;
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
}
	
.l-container .main-menu_pc li{
  display: inline-block;
  list-style: none;
  /*font-size: x-large;*/
  font-family: Arial, Helvetica, sans-serif;
  /*font-size:2rem;*/
  /*font-size:1.7rem;*/
	font-size:1.6rem;/*04.19追加*/
    }
	
.l-container #nav_menu_pc{
  position: fixed;
  z-index: 999;
  width: 100%;
  background-color: rgb(255, 255, 255);
}

	
.l-container .nav_logo{
	/*position:static;*/
    margin: auto 0;
	width: 150px;
}
/*.l-container .l-wrapper_pc img {
    width: 100px;
}	*/
.l-container .background {
    /*padding-top: 135px;*/
	padding-top:145px;/*04.19追加*/
}
	
}


@media screen and (min-width: 1024px){
.l-container .l-wrapper {
    max-width: 1200px;
}
}

/*メイン画像に対して*/



.slide {
  position: relative;
  width: 100%;
  height: 300px;
top: 93px;

}
 
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}
 
.slide img:nth-child(2){
  animation-delay: 8s;
}
 
.slide img:last-child{
  animation-delay: 16s;
}


/*メイン画像実験ここから（バナーインデックス）*/
#top_image{
position: relative;
}

#top_image img{
display: block;
margin:auto;
}


.com_logo{
position:absolute;
top:0;
z-index: 5;

}

.main-top{
grid-row: main;
height: 500px;
width: 100%;
}
.swiper-container{
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-wrapper,
.swiper-slide>div{
height: 100%;
width: 100%;
}

@media screen and (max-width: 800px) {
    .main-top{
       grid-row: main;
height: 300px;
width: 100%;
     }
 }
 
 @media screen and (max-width: 480px) {
    .main-top{
       grid-row: main;
height: 200px;
width: 100%;
     }
 }
@media screen and (max-width: 800px) {
    .com_logo{
       grid-row: main;
height: 400px;
width: 100%;
     }
 }
 
 @media screen and (max-width: 480px) {
    .com_logo{
       grid-row: main;
height: 500px;
width: 100%;
     }
 }
.swiper-slide.sw-1>div{
background: url("/special/innovation_lab/images/main01.jpg") center center / cover no-repeat;
}
.swiper-slide.sw-2>div{
background: url("/special/innovation_lab/images/main02.jpg") center center / cover no-repeat;
}
.swiper-slide.sw-3>div{
background: url("/special/innovation_lab/images/main03.jpg") center center / cover no-repeat;
}

@keyframes zoomUp { /* ズームアップで1.15倍させる指定 */
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active>div, .swiper-slide-duplicate-active>div, .swiper-slide-prev>div{
animation: zoomUp 10s linear 0s 1 normal both;
}



/*メイン画像実験ここまで*/


/*メイン画像に対して*/

/*バナー画像に対して*/
.banner_parent{
position :relative
}
.banner{
display: block;
position: absolute;
}
.banner img{
width:100% ;
}

/*バナー画像に対して*/

/*NEWSに対してここから*/
.newsbox{
display: block;
width:50% ;
}
div .newsbox{
margin:auto;
padding: 0 10px 10px 10px;
background-color: #f0f0f0;
}
.parent {
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin: 40px;
  display: flex;
  justify-content: space-between;
}
.child1 {
  margin: 8px;
  padding: 8px;
  line-height: 50px;
  text-align: center;
}
.child2 {
  margin: 8px;
  padding: 8px;
  line-height: 50px;
  text-align: center;
}

/*newspositionここから*/
.newsposition{
position: relative;
  display: block;
  justify-content: space-between;
}
.newsposition2{
position:absolute;
z-index: 5;
bottom:0;
left: 50%;
 transform: translate(-50%, 0);
}

@media screen and (max-width: 950px){
  .newsposition2{
display: contents;
   }
 .newsbox section{
background-color: #f0f0f0;
margin: 10px;
padding: 5px 10px;
    }

}

/*newspositionここまで*/


/*NEWSに対してここまで*/


/*企業ロゴ　ここから*/

.company-banner{
	display: flex;
	flex-wrap:wrap;

}

.company-banner li {
padding:0 10px;/*←画像の左右に5pxの余白を入れる場合*/
}
.company-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 1px #ccc; /*←画像を1pxのグレーの枠線で囲む指定の場合*/
}
.center{
margin:auto;
}





/*企業ロゴ　ここまで*/

/*indexカラム　ここから*/


/* 2カラム */
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
background-color: #005693; /* 背景の色 */
color: #FFF; /* 文字の色 */
text-align: center; /* 内容は中央配置 */
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 640px) {
	.col_2 > div{
		width: 100%;
	}
}






/*indexカラム　ここまで*/

th{
	padding: 3px;
	width: 130px;
}
td{
	padding: 3px;
}

.middle_bar p {
  margin:0 0 30px;

  height:80px;
  box-sizing:border-box;
  position:relative;
  padding-left:10px;
  &:before{
    content:"";
    display:block;
    position:absolute;
    left:0;
    width:2px;
    height:70px;
    background-color:#C7C1C1;
}}

/*ENTRYボタン*/
a.cp_btn {
	display: block;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #C7C1C1;
	border: 1px solid #C7C1C1;
	transition: .4s;
}
a.cp_btn:hover {
	background: #C7C1C1;
	color: #fff;
}
p.entry_btn{
margin-left: 130px;
}


.title_bar {
  display: inline-block;
  position: relative;
 left: 20px;
}
.title_bar::before {
  position: absolute;
  content: "";
  background-image: url(/special/innovation_lab/images/title_bar.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 10px;
  height:70px;
  left: -20px;
  top: 0;
  bottom: 0;

  margin:auto;

}


.article{
margin:0 30px;
}


/*ヘッダー固定によるページ内リンク位置のずれを調整*/
#experiment{
padding-top: 80px;
margin-top: -80px;
}

#untroduction{
padding-top: 80px;
margin-top: -80px;
}

.l-container .sub_section{
padding-top: 93px;
margin-top: -93px;
}
/*/ヘッダー固定によるページ内リンク位置のずれを調整*/

/*/NEWSページここから*/
.news-list{
  list-style: none outside;
  margin: 0;
  padding: 0;
}
.news-list .item a{
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #C7C1C1;
  padding: 30px 20px;
}
.news-list .item:first-child a{
  border-top: 1px solid #C7C1C1;
}
.news-list .item .date{
  margin: 0;
  min-width: 120px;
  font-size: 16px;
  color: #999;
  padding: 0 20px 0 0;
}
.news-list .item .title{
  margin: 0;
  width: 100%;
}
.news-list .item a:hover .title{
  color: #00F;
}

@media screen and (max-width: 767px){
.news-list .item a{
  flex-wrap: wrap;
}
.news-list .item .date{
  min-width: 100px;
}
.news-list .item .title{
  margin-top: 20px;
}
}

/* 装飾 */
 
*{
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
body{
  margin: 0px;
}

/*/NEWSページここまで*/
/*
.c-mb20 div{
	border-color: #f0f0f0!important;
	border: 0.5px solid!important;
    
} */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*index2*/

/*開くボタン20250703*/

.text-container {
  position: relative;
  max-height: 4.5em; /* 既存指定 */
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* グラデーションで下端をぼかす */
.text-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5em; /* グラデーションの高さは調整可 */
  background: linear-gradient(to bottom, rgba(184,208,174,0) 0%, rgba(184,208,174,1) 100%);
  pointer-events: none;
  z-index: 1;
}

/* 全文表示時はグラデーション非表示 */
.text-container.expanded::after {
  display: none;
}

.text-container.expanded {
  max-height: 1000px; /* 全文表示時 */
}



.readmore-box {
  text-align: center; /* ボタンを中央揃えに */
  margin-top: 1em;
}

.read-more-btn {
  display: block;
  margin: -10px auto;
  background-color: #438023 !important;
  color: #fff !important;
  border: none;
  border-radius: 999px!important;
  padding: 5px 10px!important;
  font-size: 1.1rem !important;
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; /* ←追加 */
  cursor: pointer;
  transition: background 0.2s;
  letter-spacing: 0.1em;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
min-width: 100px;
position: relative;   /* 追加 */
  z-index: 2;           /* 追加：グラデーションより上に */
}

/* 展開時はボタンの上マージンを大きくして下に下げる */
.text-container.expanded + .read-more-btn {
  margin-top: 20px !important;
}

.read-more-btn:hover,
.read-more-btn:focus {
  background-color: #438023 !important; /* ←追加 */
  outline: none;
}

/* SPでは画像を表示しない*/
@media screen and (max-width: 750px) {
  .BGDARKGREEN .c-col1 {
    display: none !important;
  }
}
/* BGDARKGREEN内SP対応*/
@media screen and (max-width: 750px) {
  .BGDARKGREEN .c-columnsetB {
    display: block;
    margin-bottom: 24px;
  }
  .BGDARKGREEN .c-col1 {
    display: none !important; /* 画像を非表示 */
  }
  .BGDARKGREEN .c-col2 {
    width: 100% !important;
    display: block;
    padding: 0 8px;
    box-sizing: border-box;
  }
  .BGDARKGREEN .readmore-box {
    margin-top: 12px;
  }
  .BGDARKGREEN .read-more-btn {
    font-size: 0.95rem;
    padding: 8px 24px;
  }
  @media  screen and (max-width: 960px){
.BGDARKGREEN .title_mincho2{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
font-size: 160%!important;
}
}
@media screen and (max-width: 750px) {
  .BGDARKGREEN .read-more-btn {
    margin: -10px auto 0 auto; /* 通常時の位置 */
  }
  .BGDARKGREEN .text-container.expanded + .read-more-btn {
    margin-top: 32px !important; /* 展開時だけ下にずらす */
  }
}
/*開くボタン20250703*/