@charset "utf-8";


/***

ボタン

***/
.csr_btn01{
	clear: both;
	width: 80%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	padding: 0;
}
.csr_btn01 a {
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
.csr_btn01 a img{
	width: 100%;
	height: auto;
	
}




/* タブ */
.content {
    display: none;
}
.content.active {
    display: block;
}



.tab-container {
    display: flex;
	flex-wrap: nowrap;
	justify-content: space-between
}
@media print, screen and (min-width: 801px) {
.tab-container {
    display: flex;
    justify-content: center;
    align-items: center; 
}
}
.tab {
    width: 48%;
    height: 70px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    background-color: #3E3A39;
    color: #fff;
    border: none;
    transition: all 0.5s ease;
	font-weight: 400;

   font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

/* 右側のボタン（下線のみ表示） */
.tab-outline {
    width: 48%;
    height: 70px;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid #3E3A39; 
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: center;
    line-height: 40px;
    background-color: transparent;
    color: #3E3A39;
    transition: all 0.5s ease;
	font-weight: 400;
	line-height: 1.5;
	
	font-family: "Noto Sans JP", sans-serif;
}
.tab-outline.maru{
	font-family: "Noto Sans JP", sans-serif;
}

/* 左側のボタン（デフォルトアクティブ） */
@media print, screen and (min-width: 801px) {
.tab {
    width: 35%;
    height: 40px;
    max-width: 350px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    background-color: #3E3A39;
    color: #fff;
    border: none;
    transition: all 0.5s ease;
	font-weight: 400;
	margin-right: 80px;
}

/* 右側のボタン（下線のみ表示） */
.tab-outline {
    width: 35%;
    height: 40px;
    max-width: 350px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #3E3A39; 
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: center;
    line-height: 40px;
    background-color: transparent;
    color: #3E3A39;
    transition: all 0.5s ease;
	font-weight: 400;
}
}

/* ホバー時のスタイル（黒背景に変更） */
.tab-outline:hover, 
.tab:hover {
    background-color: #3E3A39;  
    color: #FFF;
    border-bottom: none; 
}

/* アクティブ時のスタイル（黒背景に変更） */
.tab.active {
    background-color: #3E3A39;  
    color: #fff;
    border: none;
}

/* 右側がアクティブの時、左ボタンを下線のみにする */
.tab-outline.active {
    background-color: #3E3A39;
    color: #fff;
    border-bottom: none;
}










/***

レイアウト

***/
.top_main_ph1{
	width: 100%;
	height: auto;
	/* position: relative; */
	
/*	background: rgba(123,186,231,1.00);*/
}

.csr_flex2 {
	clear: both;
	margin: 0;
}
@media print, screen and (min-width: 801px) {
.csr_flex2 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-items: center;
	justify-content: space-between;
	clear: both;
	margin: 0;
}
}


.csr_boeder{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: none;
	border-bottom: solid 1px #919191;
}






.csr_ph1{
	display: block;
	
	clear: both;
	width: 80%;
	height: auto;
	margin: 0 auto 30px;
	padding: 0;
	position: relative;
}
.csr_textbox{
	clear: both;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
}
@media print, screen and (min-width: 801px) {
.csr_ph1 {
	width: 200px;
	margin: 0 20px 0 0;
	padding: 0;
}
.csr_textbox{
	width: calc( 100% - 220px );
}
}

.clear_both100-csr{
	clear: both;
	width: 100%;
	margin: 0;
/*	padding: ;*/
}





.slider01-csr .slick-slide {
  margin: 0 10px;  
	/*スライド間のスペース */
}
/*
.slider01-csr  {
  margin: 0 -10px; 
	/* これによりコンテナ全体が左右にずれる *//*
}
.slider01-csr  .slick-list {
  margin: 0 10px; 
	/* スライドリストを中央に揃える *//*
}
.slider01-csr  .slick-slide {
  padding: 0 10px; 
	/* 各スライドに左右のパディングを追加 *//*
}
*/
.slider01-csr .slick-prev,
.slider01-csr .slick-next {
  display: block; /* 矢印を表示 */
}



.slider01-csr .slick-prev,
.slider01-csr .slick-next {
	content: "";
  display: flex;
  justify-content: center;
  align-items: center;
	 width: 7.4px;/* 矢印ボタンの幅 */
  height: 13.7px;/* 矢印ボタンの高さ */
  
  background: none; /* 矢印ボタンの背景色 */
  color: #ccc; /* 矢印の色 */
  font-size: 18px; /* 矢印のサイズ */
	font-size: 0; /* 矢印のサイズ */
}



.slider01-csr .slick-next::before,
.slider01-csr .slick-next::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 10px;
  height: 1px;
  border-radius: 9999px;
  background-color: #999;
  transform-origin: calc(100% - 0.5px) 50%;
}
.slider01-csr .slick-next::before {
  transform: rotate(45deg);
}
.slider01-csr .slick-next::after {
  transform: rotate(-45deg);
}


.slider01-csr .slick-prev{
	transform: rotate(180deg);
	/* 中心を基準点に時計回りに回転する */
}
.slider01-csr .slick-prev::before,
.slider01-csr .slick-prev::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 10px;
  height: 1px;
  border-radius: 9999px;
  background-color: #999;
  transform-origin: calc(100% - 0.5px) 50%;
}
.slider01-csr .slick-prev::before {
  transform: rotate(45deg);
}
.slider01-csr .slick-prev::after {
  transform: rotate(-45deg);
}


.slick-prev::before,
.slick-next::before {
  content: '' !important;
}








/***

CSRカテゴリー

***/
/*環境への配慮*/
div.csrcat01{
	background: #e7d4e0;
}
/*地域社会への貢献*/
div.csrcat02{
	background: #ADD8E6;
	background: rgba(138, 173, 184, 1.00);
	background: #d2dec6;
}
/*働き方改革の推進*/
div.csrcat03{
	background: #FFFFE0;
	background: rgba(176,151,129,1.00);
	background: #c4d5db;
}
/*コーポレートガバナンスの徹底*/
div.csrcat04{
	background:  #98FB98;
	background: rgba(145,190,145,1.00) ;
	background: #ede6c5;
}