.row-height {
    display: flex;
    flex-wrap: wrap;
}

.flex_center{
     -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
     align-items: center; /* 縦方向中央揃え */
     -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
     justify-content: center; /* 横方向中央揃え */
}

.flex_column{
    display: flex;
    flex-direction: column;
	justify-content: space-between;
    margin-bottom: 32px;
}

.index_link{
    display: flex;
    flex-wrap: wrap;
}

.index_link li{
    margin-left: 2px;
}

.index_link li a{
    display: block;
    padding: 2px 6px;
    transition: 0.3s;
}

.index_link li a:before{
    content: "▼ ";
}

.index_link li a:hover{
    color: #fff;
    background: #50d2ff;
    text-decoration: none;
}

.con_list .year_ttl{
    font-size: 1.2em;
}

.con_list .ttl {
    color: #fff;
    /*font-weight: bold;*/
    text-align: center;
    margin-bottom: 0.5em;
}

.con_list a:hover{
    text-decoration: none;
}

.con_list img{
    transition: 0.3s;
}

.con_list img:hover{
    opacity: 0.7;
}

.con_list .btn{
    color: #fff;
}

.con_01 .ttl:before{
    content: "社会貢献活動";
}

.con_01 .ttl {
    background: #66ba47;
}

.con_02 .ttl:before{
    content: "芸術活動";
}

.con_02 .ttl {
    background: #ff6633;
}

.con_03 .ttl:before{
    content: "スポーツ振興活動";
}

.con_03 .ttl {
    background: #00709c;
}

.con_list .date{
    margin-bottom: 0;
    font-weight: bold;
    color: #373a3c;
}

.con_list .date,.con_list .date+p{
    padding-left: 0.5em;
}

.con_list .btn{
    background: #50d2ff;
    transition: 0.3s;
}

.con_list .btn:hover{
    background: #ffd14d;
}

/* CSS Document */

ul, li{
    list-style:none;
}

/* font family */
.font_f{
		font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", "sans-serif";
	}

/* パンくずリスト */
.pankuzu {
	float: left;
	width: 100%;
	position: relative;
	height: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 14px;
}

/* TOPに戻る */
.top_button {
	text-align: right;
	padding-top: 5px;
	padding-bottom: 20px;
}

/* スマホ用の改行 */
　　.br-pc { display:block; }
    .br-sp { display:none; }

/* 
======================
ＰＣ・スマホ表示の設定
======================
*/
	.pc-none{
		display: none;
	}
	.ms-none{
		display: block;
	}

/* 
-----------------------
banner関係
-----------------------
*/    
    
/* ブルーのバナー */    
    
.banner-blue a {
    width: 100%;
    max-width: 320px;
    display: block;
    text-align: center;
    color: #06C;/*文字色*/
    border: solid 1px #06C;/*線色*/
    padding: 0.5em;/*文字周りの余白*/
    font-weight: bold;
    transition: 0.5s ;
    text-decoration: none;
    margin: 0 auto;
        }  
    
.banner-blue a:hover {
    background-color: #06C;
    border: solid 1px #06C;/*線色*/
    color: #FFFFFF;
        }

/* pタグ使用*/
.csr-p-indent {
    line-height: 2em;
    text-indent: 1em;
}
.csr-p-height {
    line-height: 2em;
}

/* 文字のサイズ */
.font_12{
	font-size: 12px;
}
.font_14{
	font-size: 14px;
}
.font_18{
	font-size: 18px;
}
.font_20{
	font-size: 20px;
}

.font_24{
	font-size: 24px;
}

/* 太文字にする */

.font-bold {
	font-weight: bold;
}

/* 表示の％幅 */
.width90{
    width: 90%;
    margin: 0px auto;
	}
.width80{
    width: 80%;
    margin: 0px auto;
	}
@media (max-width: 767px) {
.width90{
    width: 100%;
	}
.width80{
    width: 100%;
	}
}

/* 要素を中央に */

.margin-cen {
    margin: 0 auto;
}

/* margin-bottom */
.bottom100 {
	margin-bottom: 100px;
	}
.bottom50 {
	margin-bottom: 50px;
	}
.bottom30 {
	margin-bottom: 30px;
	}
.bottom20 {
	margin-bottom: 20px;
	}
.bottom10 {
	margin-bottom: 10px;
	}
.style1 {
	color: #993300;
}

.style2 {
	color: #FF3300;
}

.style3 {
	font-size: 10px;
}

.style4 {
	color: #000000;
}

.style5 {
	color: #996600;
}
.font-o6c{
     color: #06C;
}
.back-fff {
    background-color: #BFF7F4;
}
.back-ddd {
    background-color: #ddd;
}

/*=======================
csr-contents.php
========================*/

.contents-top-margin h3 {
    padding: 0.5em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    border-left: solid 10px #06C;/*左線（実線 太さ 色）*/
}

.hidden-md-up ,
.hidden-sm-down {
    list-style-type:none;
}

.type1{
  background-image : url(../../csr/images/h2_bg.gif);
  width : 900px;
  height : 52px;
  line-height:2;

}
.Class01{
  color : rgb(32, 32, 32);
  font-size : 10px;
}
.title01{
  color : black;
  background-image : url(../../csr/images/h2_bg.gif);
  text-align : left;
  text-indent : 20px;
  width : 900px;
  height : 52px;
  line-height:2;
  margin: 20px 0px 20px 0px;
}
.Class02{
  padding-bottom : 20px;
  margin-top : 20px;
  margin-right: auto;
  margin-left: auto;
}
.Class03{
  width : 850px;
  margin-right: auto;
  margin-left: auto;
}

.title02{
  background-image : url(../../csr/images/h2_bg.gif);
  width : 900px;
  height : 52px;
  text-indent : 20px;
  line-height:2.5;
}

/* 文字に下線をつける */
.csr-40-h3 {
    width: 70%;
    color: #06C;
    padding-bottom: 10px;
    font-weight: 700;
    border-bottom: solid 1px #06C;
    text-align: center;
    margin: 0 auto 30px auto;
    } 

.flex-caption{
   text-indent : 50px;
}
.flex-caption02{
   text-indent : 240px;
}
.title03{
  width : 100%;
  top : 20px;
  bottom : 20px;
}
.csr_h2 {
	float: left;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	padding-bottom: 20px;
	padding-top: 20px;
}
.img_h2 {
	display: block;
	height: auto;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.csr20_text {
	float: left;
	width: 100%;
	position: relative;
	height: auto;
	padding-top: 10px;
	padding-bottom: 40px;
}
.csr_photo {
	float: left;
	width: 50%;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	min-height:1px;
}

.csr_photo_02 {
	float: left;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	position: relative;
	min-height:1px;
}

.csr_title {
	background-color: #CFF;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 10px;
	border-radius: 10px;
	font-weight: bolder;
	font-size: 24px;
	text-align: center;
}

/* csr-contents-result-40 */

.csr40_title span{
    border-bottom: solid 2px #06C;
    color: #06C;
    padding: 5px 20px;
    margin: 10px 10px 0 0;
    box-sizing: border-box;
	font-weight: 600;
	font-size: 22px;
	text-align: center;
    line-height: 2em;
}

.csr40_shop {
	background-color: #06C;
    color: #ffffff;
    display: block;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 10px;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
}

/* csr-contents-result-41 */
.csr41_catch {
    color: #06C;
    line-height: 1.5em;
    font-weight: 700;
    font-size: 26px;
    text-align: center;
}
.csr41_title {
    background-color: #06C;
    color: #ffffff;
    border-radius: 5px;
    padding: 5px 0;
	font-weight: 600;
	font-size: 22px;
	text-align: center;
    line-height: 2em;
}
.csr41_div_line {
    border: 1px solid #FF0000;
    line-height: 2em;
    font-weight: 700;
    display: block;
    padding: 10px;
}

/* csr-contents-result-46 */

.csr49-tab {
    width: 90%;
    border-spacing: 0;
    margin: 0 auto;
}
.csr49-tab, .csr49-th {
    border-bottom: solid 2px #42C6C2;
    padding: 10px 0;
    text-align: center;
}

.csr49-tab, .csr49-td {
    border-bottom: solid 2px #ddd;
    text-align: center;
    padding: 10px 0;
}

.csr_top_img {
	padding-bottom: 20px;
}
.csr_contents_01 {
	float: left;
}
.csr_top_text {
	line-height: 1.5em;
	padding-top: 20px;
	padding-bottom: 20px;
}
.csr_contents_img {
	text-align: left;
	padding-bottom: 10px;
}
.csr25_layout {
	padding-top: 20px;
	padding-bottom: 20px;
}

.csr_p_style {
	font-weight: bold;
	color: #0CF;
}

.csr_p_style02 {
	font-weight: bold;
	color: #06C;
}



.csr_table_style {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}
.csr_text_center {
	text-align: center;
}


.f_grn {
	color: #66BA47;
}

.f_org {
	color:#F63;
}

.f_blue{
	color:#00709c;
}

ul.custommarker01 {
	list-style-type: none;
	margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/
}

ul.custommarker01 li a{
	padding-left: 14px;
}
ul.custommarker01 li:before {
	content: '■'; /* ←ここにリストマーカーにしたい文字列を設定 */
	margin-left:-14px; /* 1文字分、左に寄せる */
}

.img-border{
	padding: 5px;
	border: 1px solid #999;
}

	.mainx, .mainx li {
	margin:0;
	padding:0;
	list-style:none;
}
.mainx {
	margin-bottom:5px;
	padding: 5px;
	border: 1px solid #999;
}
.mainx li {
	width:100%;
	overflow:hidden;
}
.mainx li.item2, .mainx li.item3, .mainx li.item4, .mainx li.item5, .mainx li.item6 {
	display:none;
}
	.mainx li.item7, .mainx li.item8, .mainx li.item9, .mainx li.item10, .mainx li.item11 {
	display:none;
}
		.mainx li.item12, .mainx li.item13, .mainx li.item14, .mainx li.item15, .mainx li.item16 {
	display:none;
}
.mainx li:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}
.thumb, .thumb li {
	margin:0;
	padding:0;
	list-style:none;
}
.thumb li {
	display:inline-block;
	width:111px;
	height:80;
	overflow:hidden;
	cursor:pointer;
	vertical-align:top;
	margin-bottom:4px;
	padding: 5px;
	border: 1px solid #999;
}
.thumb li img {
	width:100%;
	height:auto;
}
.thumb li:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}


    @media (max-width: 767px) {
/* 文字のサイズ */
.font_12{
	font-size: 12px;
}
	.br-pc { 
		display:none; 
	}
    .br-sp { 
		display:block; 
	}
		
	}
	
/* スマホ （オーバーライド）*/
@media (max-width: 768px) {
/* スマホ用の改行 */
	
	.ms-none{
		display: none;
	}
	
	.pc-none{
		display: block;
	}
    .csr49-tab {
        width: 100%;

    }    
    
}

	
/* 0～500ピクセル（スマホ用）*/
@media screen and (max-width:500px) {
	.br-pc { 
		display:none; 
	}
    .br-sp { 
		display:block; 
	}
		
	.pankuzu {
	float: left;
	width: 100%;
	position: relative;
	height: auto;
	padding-top: 10px;
	padding-bottom: 30px;
	}

	.csr_title {
	background-color: #CFF;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: 10px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 20px;
	text-align: center;
}

/* 文字のサイズ */
.font_12{
	font-size: 10px;
}

/* スマホ用の改行 */		
	.br-pc { 
		display:none; 
	}
    .br-sp { 
		display:block; 
	}
	
/* 表示の％幅 */
	.width90{
		width: 100%;
		margin: 0px auto;
	} 
/* 
======================
ＰＣ・スマホ表示の設定
======================
*/    
    .ms-none{
		display: none;
	}
	
	.pc-none{
		display: block;
	}
    
	.titlecall{
		font-size:2vw;
		position: relative;
		top:10px;
		margin-right: 50px;
        margin-bottom: 20px;
	}
    

/*
=================
グローバルナビ用
=================
*/     
  nav.globalMenuSp {
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    /*background: #fff;*/
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
  }
  
  nav.globalMenuSp ul {
    background-color:rgba(0,101,177,0.9);
    /*margin: 84px auto 0 auto;*/
    padding: 0;
    width: 100%;
    border-top: 1px solid #ffffff;    
  }
  
  nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #ffffff;
  }
  nav.globalMenuSp li a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
  }    
  
  /* 最後はラインを描かない */
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  
  nav.globalMenuSp ul li a {
    display: block;
    color: #ffffff;
    padding: 0.9em 0;
  }
  
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
    transform: translateY(0%);
  }  
    
/*
================
 ハンバーガー用
================
*/    
  .navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 12px;
    width: 42px;
    height: 50px;
    cursor: pointer;
    z-index: 5;
    background: #ffffff;
    text-align: center;
  }
  
  .navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #004f96;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
  }
  
  .navToggle span:nth-child(1) {
    top: 9px;
  }
  
  .navToggle span:nth-child(2) {
    top: 18px;
  }
  
  .navToggle span:nth-child(3) {
    top: 27px;
  }
  
  .navToggle span:nth-child(4) {
    border: none;
    color: #004f96;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
  } 
  /*
  タップした後
  --------------------------------------
  */
      
  /* 最初のspanをマイナス45度に */
  .navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  /* 2番目と3番目のspanを45度に */
  .navToggle.active span:nth-child(2),
  .navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }

    
}


/*///////////////////////////////////////////////

	20200904 改修

///////////////////////////////////////////////*/

#csr-index .head,
#csr-contents .head{
	padding: 1rem;
	background-image: url(/inc/img/csr/csr_bg.jpg);
	background-position: center center;
	background-size: cover;
	border-radius: 8px;
}

#csr-index .head .box,
#csr-contents .head .box{
	width: 50%;
	color: white;
	margin: 3rem 0;
}

#csr-index .head .box .h2,
#csr-contents .head .box .h2{
	letter-spacing: 0.1em;
	font-weight: bold;
	display: none;
}

#csr-index .head .box .csr-index,
#csr-contents .head .box .csr-contents{
	display: block;
}

.head .box p{
	line-height: 1.7rem;
}

.head .box .h2,
.head .box p{
	text-shadow: 0 0 2px rgb(0,0,0,1);
}

.nav .nav-item{
	margin: 0 1rem;
}

.top.nav{
	margin: 1rem 0 2rem;
}

.top.nav .nav-item:before{
	content: "\f0da";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	margin-right: 0.3em;
	
}

.area{
	padding: 1rem 1rem 1.8rem;
	margin-bottom: 2.8rem;
	box-shadow: 0 0 10px rgb(0,0,0,0.1);
	height: 90%;
}

.area .h3{	
    color: #06C;
    padding-left: 0.3em;
    padding-bottom: 0.4em;
    border-bottom: 5px solid #ccc;
    margin-bottom: 1.8rem;
    position: relative;
    font-weight: bold;
}

 .area .h3:after {
    content: "";
    display: block;
    padding-bottom: 0.4em;
    border-bottom: 5px solid #06C;
    width: 40%;
    position: absolute;
    left: 0;
}

.link-btn{
	background-image: url(/inc/img/csr/csr_link-btn_bg.jpg);
	background-position: center center;
	background-size: cover;
	border-radius: 4px;
	margin: 0 3rem;	
	margin-bottom: 5rem;
}

.link-btn .link{
	display: block;
	color: white;
	padding: 5rem 1rem;
	text-align: center;
	font-weight: bold;
	font-size: 1.6rem;
	background-color: rgba(0,0,0,0.40);
	transition: 0.3s;
}

.link-btn .link:after{
	content: "\f101";
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	margin-left: 0.3em;
}

.link-btn .link:hover{
	color: #252525;
	opacity: 1;
	background-color: rgba(255,255,255,0.50);
}

/*//////////////////////////////

		  CSRコンテンツ

////////////////////////////////*/


.nav.color {
	/*justify-content: center;*/
	margin-bottom: 2rem;
}

.nav.color .nav-item{
	color: white;
	padding: 0 1rem;
	margin: 0.2em 0.4rem;
}

.nav.color .nav-item.green,
.csr-list .box .ttl.green{background-color: #66BA47;}
.nav.color .nav-item.orenge,
.csr-list .box .ttl.orenge{background-color: #F63;}
.nav.color .nav-item.indigo,
.csr-list .box .ttl.indigo,
#csr-page .genre.indigo{background-color: #00709c;}

.csr-list > div[class="col-12 col-md-4"]{
	padding-bottom: 2rem;
}
.csr-list .box{
	position: relative;
	transition: 0.2s;
	height: 100%;
	padding-bottom: 1rem;	
	border-bottom: 1px #ccc solid;
}

.csr-list .box:hover{
	opacity: 0.7;
}

.csr-list .box .link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.csr-list .box .ttl{
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.8em;
	padding: 0.28em 1rem;
	color: white;
}

.csr-list .box .img{
	width: 100%;
	height: auto;
}

.csr-list .box .date{
	text-align: center;
	color: #BBBBBB;
}
.csr-list .box .h5{
	font-size: 1.1em;
	padding: 0 0.5rem;
	border-left: 5px solid #ccc;
}

/*///////////////////////////////////
			csr-page
/////////////////////////////////////*/
#csr-page{
	padding-bottom: 5rem;
}

#csr-page .head{
	margin: 2rem 0 3rem;
}

#csr-page .head .ttl{
	padding: 0.1em 0.3em 0.2em;
	border-left: 5px solid #ccc;
	margin-bottom: 1.7rem;
}

#csr-page .box{
	padding: 1.6rem;
	margin: 2rem 0 3rem;
}

#csr-page .box .row{
	margin-bottom: 1.3rem;
}

#csr-page .box .row > div{
	margin-bottom: 1rem;
}

#csr-page .box .photo .img-fluid{
	border: 12px solid white;
	box-shadow: 3px 3px 12px rgb(0,0,0,0.2);
}