/*共通設定*/
@charset "utf-8";
body {
	font-family: 'Kaisei Tokumin', serif;
	margin: 0;
	padding: 0;}
ul{	margin:0;	padding:0;	list-style:none;}
h1,h2,h3,h4,h5,p{	margin:0;	padding:0; color:#000;}
ul li a{	display:block	text-decoration:none;	color:black;}
dl, dt, dd {margin: 0;padding: 0;}
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin&display=swap');

.text{
	font-size:1.4vw;
	line-height:2.5vw;
	padding:0.5vw 2.5vw;
	text-align:left;}
header {
	background-color: rgba(0,0,0,0.5);
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;}
header nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;}
header nav a {
	color: #fff;
	text-decoration: none;
	padding: 1em;}
header .title a{
	color:#fff;
	text-decoration: none;
	font-size:2vw;}
.sns i{font-size: 20px;}
footer {
	color: #808080;
	background: #e5e5e5;
	text-align: center;
	padding: 30px;
	margin-top:150px}
footer a {
	color: #808080;
	text-decoration: none;}
footer a:hover {
	text-decoration: underline;}
footer .footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;}
footer .footer-menu li {
	margin: 0;
	padding: 0 20px;
	border-right: 1px #808080 solid;}
footer .footer-menu li:last-child {
	border: none;}
footer .footer-menu li a:hover{text-decoration:none;}
footer .copyright {
	margin: 0;
	padding: 20px 0 0 0;}
@media only screen and (max-width: 600px) {
header .title a{
	font-size:18px;}
footer{padding:10px;}
footer .footer-menu {
	justify-content: flex-start;}
footer .footer-menu li {
	width: 50%;
	box-sizing: border-box;
	border: none;
	font-size:14px;
	line-height:35px;}
footer .footer-menu li:nth-child(odd) {
	border-right: 1px #808080 solid;}}


/*トップ*/
.main-visual{
	position: relative;}
.bx-wrapper{
	border:none!important;}
.bxslider img{
	width:100%;
	height: 650px;
  	object-fit: cover;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: center!important;
    width: 100%!important;}
.rights_view{
    position:absolute;
    bottom: 1vw;
    left: 1vw;}
.rights_view img{
    width:30vw;}
@media only screen and (max-width: 600px) {
	.bxslider img{	height: 300px;}
	.rights_view{
		bottom: 3vw;
		left: 50%;
		transform: translateX(-50%);}
	.rights_view img {
		width: 50vw;}
}


/*パンくずリスト*/
.breadcrumb {
	margin: 30px 0 0;
    padding: 0 30px 0;
	list-style: none;}
.breadcrumb li {
	display: inline;/*横に並ぶように*/
	list-style: none;}
.breadcrumb li:after {/* >を表示*/
	content: '>';
	padding: 0 0.2em;
	color: #555;}
.breadcrumb li a {
	text-decoration: none;
	color: #000;/*色*/}
.breadcrumb li a:hover {
	text-decoration: underline;}
@media only screen and (max-width: 600px) {

}


/*見出し*/
h2{
	position: relative;
	padding: 20px 30px 30px;}
h2:after {
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(0, 0, 0), transparent);
	background: linear-gradient(to right, rgb(0, 0, 0), transparent);}
h2:first-letter {
	font-size: 2em;
	color: #000000;}

/*商標*/
#trademark {margin: 20px 0 50px; /* 外側の余白 */}
#trademark h2 {margin-bottom: 10px; /* 見出しの下の余白 */}
#trademark .toggle {
	display: none;}
#trademark .label {
	padding: 1.5vw;
	display: block;
	color: #fff;
	background:#000;}
#trademark .label::before{
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);}
#trademark .label,#trademark .content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	width: 85%;
    margin: auto;
    display: block;
	transition: all 0.3s;}
#trademark .content {
	height: 0;
	margin-bottom:1vw;
	padding:0 2vw;
	overflow: hidden;}
#trademark .toggle:checked + .label + .content {
	height: auto;
	padding:2vw ;
	transition: all .3s;}
#trademark .toggle:checked + .label::before {
	transform: rotate(-45deg) !important;}
@media only screen and (max-width: 600px) {
#trademark .label {
	padding-right:10vw;}
#trademark .label,#trademark .content {
	width:70%;}
}

/*ニュース*/
#news {margin: 20px 0 50px; /* 外側の余白 */}
#news h2 {margin-bottom: 10px; /* 見出しの下の余白 */}
#news ul {
  list-style: none;
  padding: 0;
  width: 80%;
  margin: 0 auto;}
#news li {
  display: flex; /* フレックスコンテナにする */
  align-items: center; /* 子要素を中央揃えにする */
  background-color: #fff; /* リスト項目の背景色 */
  border: 1px solid #ddd; /* リスト項目の境界線 */
  margin-bottom: 10px; /* リスト項目の下の余白 */
  padding: 10px; /* リスト項目の内側の余白 */
  gap:10px;}
#news time {
  font-size: 0.8em; /* 日付のフォントサイズ */}
#news a {
  color: #0066cc; /* リンクの文字色 */
  text-decoration: none; /* リンクの下線をなしにする */
  flex-grow: 1; /* <a>要素が利用可能なスペースを埋めるようにする */
  width: 60%;
  font-size: 15px;}
#news a:hover {
  text-decoration: underline; /* ホバー時にリンクに下線をつける */}


/*事業内容*/
.service-list{
	display:flex;
	justify-content:space-between;
	width:80%;
	margin:0 auto 100px;}
.service-list li{
	box-sizing:border-box;
	width:30%;
	margin:5px;
	border:solid 1px #ddd;
	list-style:none;}
.service-list li img{width:100%;}
.service-list a{	text-decoration:none;}
.service-list p{
	font-size:1.3vw;
	margin:1.2vw 0.8vw;
	line-height:2.4vw;}
.service-list a:hover{
	box-shadow:0 0 10px #dddddd}
.heading{
	font-size:1.8vw!important;
	font-weight:bold;
	text-align:center;}
.more{
	display:block;
	width:150px;
	padding:5px 15px;
	margin:15px auto;
	text-align:center;
	background-color:#3077be;
	color:#ffffff;}
@media only screen and (max-width: 600px) {
	.service-list{
		flex-direction:column;}
	.service-list li{
		width:100%;
		margin-bottom:20px;}
	.service-list p{
		font-size:15px;
		margin:12px;
		line-height:25px;}
	.heading {font-size: 24px!important;}
}


/*会社概要*/
.company-overview {
	border-top: 1px solid #ddd;
    width: 80%;
    margin: 0 auto 50px;}
.company-overview .item {
	padding: 24px 0;
	border-bottom: 1px solid #ddd;}
@media screen and (min-width: 600px) {
  .company-overview .item {
    display: grid;
    /*項目名：名称の横幅比率*/
    grid-template-columns: 1fr 5fr;
    /*項目名：名称の間の余白*/
    column-gap: 32px;
    -webkit-column-gap: 32px;
    -moz-column-gap: 32px;
  }
}


/*タイムライン（沿革）*/
.timeline {
	list-style: none;
    width: 80%;
    margin: 0 auto 50px;}
.timeline > li {
  margin-bottom: 40px;}
@media only screen and (min-width: 601px) {
.timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;}
.timeline-date {
    width: 110px;
    float: left;
    margin-top: 10px;
	text-align: center;}
.timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
	padding: 10px 0 10px 30px;}
.timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #000;
    position: absolute;
    left: 106px;
    top: 16px;
    border-radius: 100%;}	
}


/*製品画像*/
.product_image{
	width:45%;
	margin-left:auto;	margin-right:auto;
	padding:30px;}
@media only screen and (max-width: 600px) {
	.product_image{
		width:75%;
		text-align:center;
	}
}


/*使用実績*/
ul.record-list{
	list-style-type:disc;
	color: #000;
	padding: 0.5em 0 0.5em 1.5em;
	width:80%;
	margin:0 auto;}
ul.record-list li{
	line-height: 1.5;
	padding: 0.5em 0;}



/*SDGs*/
.corp-message{
	display:flex;
	justify-content:space-between;
	width:80%;
	margin:10px auto 50px;
	padding:10px;
	background-color:#eee;
	flex-direction:row-reverse;}
.corp-message:after{
	clear:both;
	content:"";
	display:block;}
.corp-message_image{
	width:320px;
	padding:10px;
	box-sizing:border-box;}
.corp-message_text{
	width:calc(100% - 160px);
	padding: 2vw;
    padding-top: 4vw;
	box-sizing:border-box;
    font-weight: bold;
    color: #666;}
.sdgs-section{
	display:flex;
	justify-content:space-between;
	width:80%;
	margin:20px auto;}
.sdgs-section:after{
	clear:both;
	content:"";
	display:block;}
.sdgs-target{
	width:36%;
	padding:10px;
	box-sizing:border-box;}
.sdgs-target img{
	border:1px solid #aaa;}
.sdgs-message{
	width:62%;
	padding:10px;
	box-sizing:border-box;}
.sdgs-message_text{
	margin:15px 0;
	color:#999;
	font-size:15px;
	font-weight:bold;
	line-height:25px;}
.sdgs-message_icon img{
	display:inline-block;
	margin-right:10px;
	width:100px;}
.sdgs-message a{
	color:#000;
	text-decoration:none;
	font-size:20px;
	font-weight:bold;}
.sdgs-message a:hover{
	text-decoration:underline;}
@media only screen and (max-width: 600px) {
	.corp-message{
		flex-direction:column;
		justify-content:baseline;}
	.corp-message_image{width:100%;}
	.corp-message_text{
		width:100%;
		line-height:25px;
		padding:10px;}
	.sdgs-section{
		flex-direction:column;
		justify-content:baseline;}
	.sdgs-target{width:100%;}
	.sdgs-message{width:100%;}
}


/*お問い合わせ*/
.contact-section{
	width:90%;
	margin:0 auto;}
.contact-section .headline{
	position: relative;
	line-height: 1.4;
	margin:30px 0 20px;
	padding:0.25em 1em;
	display: inline-block;
	top:0;}  
.contact-section .headline:before, .contact-section .headline:after { 
	position: absolute;
	top: 0;
	content:'';
	width: 8px;
	height: 100%;
	display: inline-block;}
.contact-section .headline:before {
	border-left: solid 1px black;
	border-top: solid 1px black;
	border-bottom: solid 1px black;
	left: 0;}
.contact-section .headline:after {
	content: '';
	border-top: solid 1px black;
	border-right: solid 1px black;
	border-bottom: solid 1px black;
	right: 0;}
.contact-section .contact_detail{
	padding-left:30px;
	margin-bottom:50px;}
@media only screen and (max-width: 600px) {

}




/*スマホでの表示*/
@media only screen and (max-width: 600px) {
	.pc{display:none;}
	header{display:block}
	#menubtn{
		padding:6px 12px;
		border:1px solid #aaaaaa;
		border-radius:5px;
		background-color:white;
		position:absolute;
		top:10px;
		right:10px;}
		#menubtn i{
			color:#888888;
			font-size:18px;}
		#menubtn span{
			display:inline-block;
			text-indent:-9999px;}
	#menu{
		display:none;
		/*transition:all 1.0s;*/}
	#menu.open{
		/*transform:translateZ(0);*/}
	#menu li{
		padding-top:20px;
		border-bottom:1px dotted #fff;}
		.sns{
			border-bottom:0!important;
			text-align:center;}
		.sns i{font-size:28px!important;}
	#menu li i{
		color:#fff;
		font-size:18px;
		margin-right:7px;
		display:inline;}
	#menu li a{
		padding:5px;
		color:#fff;
		text-decoration:none;}
}

/*PCでの表示*/
@media(min-width:601px){
	#menubtn,#title,nav li i{display:none;}
	.smp,.close_btn{display:none;}
	body{width:100%;}
}

/* jQueryで追加、削除 */
.fadeUp {
	-webkit-animation-name: fadeUpAnime;
			animation-name: fadeUpAnime; /*アニメーションの名前*/
	-webkit-animation-duration: 1s;
			animation-duration: 1s; /*アニメーションの実行時間*/
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards; /*アニメーション後、要素が表示されたままにする*/}
  @-webkit-keyframes fadeUpAnime {
	0% {
	  opacity: 0; /*非表示*/
	  -webkit-transform: translateY(100px);
			  transform: translateY(100px); /*縦方向に100pxずらす*/
	}
	100% {
	  opacity: 1; /*表示*/
	  -webkit-transform: translateY(0);
			  transform: translateY(0); /*元の位置*/
	}
  }
  @keyframes fadeUpAnime {
	0% {
	  opacity: 0; /*非表示*/
	  -webkit-transform: translateY(100px);
			  transform: translateY(100px); /*縦方向に100pxずらす*/
	}
	100% {
	  opacity: 1; /*表示*/
	  -webkit-transform: translateY(0);
			  transform: translateY(0); /*元の位置*/
	}
  }
  .fadeUpTrigger {opacity: 0; /*非表示*/}