@charset "utf-8";
/* 使い道と実績のcss */
.tab-menu.col-4 > .col {
	width: calc(25% - 6px);
    margin-left: 8px;
}
.tab-menu.col-4 > .col:first-of-type { margin-left: 0; }

/*=========================================
		寄付金の使い道
=========================================*/
#pagettl_wrap {
    padding: 80px 0 0;
}
#use {
    counter-reset: number;
    list-style: none;
    margin: 5em 0 10em;
    padding: 0;
}
#use li {
    background: #EEFBFE;
    overflow: hidden;
}
#use li:nth-of-type(2n) {
    background: #D9F0FF;
}
#use li > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#use li > div .img_wrap {
    width: 20%;
    max-width: 200px;
}
#use li > div .text_block {
    width: 75%;
    margin-left: 5%;
}
#use li > div .text_block h2 {
    font-size: 22px;
}
#use li > div .text_block > div {
    border-top: 2px solid #000;
    margin: 2em 0 0;
    padding-top: 1em;
}
#use li > div .text_block > div dl {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
#use li > div .text_block > div dl dt {
    width: 11rem;
    position: relative;
    padding-right: 2%;
}
#use li > div .text_block > div dl dt::after {
    content: "";
    width: 1px;
    height: 60%;
    background: #000;
    position: absolute;
    right: 15%;
    top: 3px;
    bottom: 0;
    margin: auto;
}
#use li > div .text_block > div dl dd {
    width: 88%;
}



/*=========================================
		活用事業のご紹介
=========================================*/
#case > li {
    background: #fff;
    padding: 2rem;
    border-radius: 5px;
    /* border: 4px solid #CEE3EB; */
	margin-bottom: 1rem;	
}
.case-head { margin-bottom: 1rem; }
.case-head .data { 
	margin-right: 10px;
	color: #828278;
    font-size: 18px;
    font-size: 1.8rem;
	display: inline-block;
	float: left;
}
.case-head .cate {
    display: inline-block;
    float: left;
    text-align: center;
	padding: 0.2rem 2rem;
    color: #fff;
	border-radius: 30px;
	margin-top: 0.3rem;
}
.case-head .use-1 { background: #8BD0D9; }
.case-head .use-2 { background: #EBB9AB; }
.case-head .use-3 { background: #BDD694; }
.case-head .use-4 { background: #B5A6BF; }
.case-head .use-5 { background: #92D6B8; }
.case-head .use-6 { background: #8899B3; }
.case-head .use-7 { background: #ebcc9d; }
.case-head .use-8 { background: #BFB2A6; }
#case h2 { margin: 0.5rem 0 1.5rem;}
#case .img_wrap {        
    position: relative;    
    background-color: #EDEDE8;
	padding-bottom: 61.762%;
}
#case .img_wrap img {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}
#case li dl {
    border: 2px solid #CEE3EB;
    border-radius: 5px;
    margin-bottom: 1rem;
	/* max-width: 34em; */
}
#case li dl .td { vertical-align: middle; }
#case li dl dt {
    background: #CEE3EB;
    font-weight: bold;
    font-size: 18px;
    font-size: 1.8rem;
    padding: 1rem;    
    box-sizing: content-box; 
	line-height: 2.4rem;
}
#case li dl dd {
    padding: 1rem;
    text-align: right;
	word-wrap: break-word;
}
#case li .txt p { line-height: 1.9; }

/*=========================================
		寄付金の実績
=========================================*/
#result_wrap .box { margin-bottom: 6rem; }
#result_wrap .box h2 { 
	margin-bottom: 1.5rem;
	padding-left: 2em;
    text-indent: -1.5em;
}
#result_wrap .box h2:before {
	content: "";
	display: inline-block;
	background: url(../img/i-mark.png) no-repeat center;
	background-size: contain;
	width: 35px;
	height: 2.5rem;
	margin-right: 10px;
}
#result_wrap .box table { border-radius: 5px 5px 0 0; }
#result_wrap .box table td,
#result_wrap .box .result-table-footer .td { 
	padding: 1.5rem 1rem;
	word-wrap: break-word;
}
#result_wrap .box table td:nth-of-type(2),
#result_wrap .box table td:last-of-type,
#result_wrap .result-table-footer .td:nth-of-type(2),
#result_wrap .result-table-footer .td:last-of-type { text-align: right; }
#result_wrap .box table tfoot {
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
}
#result_wrap .box table tfoot tr { border-bottom: none; }
#result_wrap table.default th, #result_wrap table.default td {
	display: table-cell;
}
#result_wrap .box table td:first-of-type,
#result_wrap .result-table-footer .td:first-of-type {
	width: 55.239%;
}
#result_wrap .box table td:nth-of-type(2),
#result_wrap .result-table-footer .td:nth-of-type(2) {
	width: 19.182%;
}
#result_wrap .box table tbody tr:last-of-type { border-bottom: none; }
#result_wrap .result-table-footer { 
	border-radius: 0 0 5px 5px;
	background: #fff;
}
#result_wrap .result-table-footer .td { 
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	vertical-align: middle;
}

/*=========================================
		寄付者の公表
=========================================*/
#announce_wrap .btn-tabmenu { padding: 1rem 1rem 0.2rem 0; }
#announce_wrap .btn-tabmenu .tab-menu { margin-bottom: 0; }
#announce_wrap .btn-tabmenu .tab-menu li { 
	width: calc(10% - 8px);
	min-width: 6em;
	float: left;
	margin-left: 8px;
	margin-bottom: 0.8rem;
}
#announce_wrap .pager_wrap { margin-top: 4rem; }
#announce_wrap table.default tr:last-of-type { border-bottom: none; }


@media screen and (min-width: 1000px) {
	/*=========================================
			活用事業のご紹介
	=========================================*/
	#case .case-content li.td:first-of-type {
		width: 50%;	
		padding-right: 20px;
		margin-bottom: 0.5rem;
	}
}

@media screen and (max-width: 999px) {
	/*=========================================
			活用事業のご紹介
	=========================================*/
	#case .case-content li.td {
		width: 100%;
		display: block;
	}
	#case .case-content li.td:first-of-type { margin-bottom: 2rem; }
	#case > li { padding: 1rem; }
	
	/*=========================================
			寄付金の実績
	=========================================*/
	#result_wrap .pager_wrap { margin-top: 4rem; }
	#result_wrap .box table td, #result_wrap .box .result-table-footer .td { padding: 1rem; }
}

@media screen and (min-width: 481px) {
	/*=========================================
			寄付金の使い道
	=========================================*/

	
	/*=========================================
			活用事業のご紹介
	=========================================*/
	#case li dl dt {
		width: 12em;
		text-align: center;
	}
	
	/*=========================================
			寄付金の実績
	=========================================*/
	#result_wrap .box table tbody { border-bottom: 4px solid #D8E9EF; }
	
	/*=========================================
			寄付者の公表
	=========================================*/
	#announce_wrap table td { text-align: center; }
	#announce_wrap table td:last-of-type { text-align: left; }
}

@media screen and (max-width: 480px) {
	.tab-menu { margin-bottom: 1rem; }
	.tab-menu.col-4 > .col { margin-bottom: 1.5rem; }
	.tab-menu.col-2_sp .col { width: calc(50% - 4px) !important; }
	.tab-menu.col-2_sp .col:nth-of-type(even) { margin-left: 8px !important; }
	
	/*=========================================
			寄付金の使い道
	=========================================*/
	#use li > div {
    display: block;
}
	#use li > div .img_wrap {
    width: 80%;
    margin: 20px auto;
}
	#use li > div .text_block {
    width: 100%;
    margin-left: 0;
}
	#use li > div .text_block h2 {
    font-size: 5vw;
    line-height: 2;
}
	#use li > div .text_block > div dl {
    font-size: 3.4vw;
}
	#use li > div .text_block > div dl dt {
    width: 15%;
    min-width: 7em;
}
	#use li > div .text_block > div dl dd {
    width: 85%;
}
	
	/*=========================================
			活用事業のご紹介
	=========================================*/
	#case .case-content li.td:first-of-type { margin-bottom: 1.5rem; }
	
	/*=========================================
			寄付金の実績
	=========================================*/
	#result_wrap .box { margin-bottom: 6rem; }
	#result_wrap .box table { table-layout: fixed; }
	#result_wrap .box .result-table-footer .td {
		display: block;
		width: 100%;
	}
	#result_wrap .box .result-table-footer .td:first-of-type {
		background: #D8E9EF;
		padding: 0.5rem 1rem;
	}
	#result_wrap .box .result-table-footer .td:nth-of-type(2) { border-bottom: 1px solid #E4E4D4; }
	
	/*=========================================
			寄付者の公表
	=========================================*/
	#announce_wrap .slide-parent {
		margin: 0rem auto 1rem;
	}
	#announce_wrap .slide-parent a { padding: 1.5rem 1.1rem; }
	#announce_wrap .slide-parent span { width: 10px; }
	#announce_wrap .slide-parent p {
		display: inline-block;
		color: #141414;
		font-size: 16px;
		font-size: 1.6rem;
	}	
	#have-announce { margin-top: 2rem; }
	#announce_wrap tr { 
		display: block;
		margin-bottom: 2rem;
		background: #fff;
		border-radius: 5px;
		border: none;
	}
	#announce_wrap table.default {
		background: none;
		border-radius: none;
	}
	#announce_wrap td {
		text-align: left;
		display: block;
		border-top: 1px solid #E4E4D4;
		padding: 1rem !important;
	}
	#announce_wrap td:first-of-type { border: none; }
	#announce_wrap td > span { 
		margin-right: 5px;
		font-weight: bold;
	}
	#announce_wrap p { display: inline; }
	#announce_wrap table.default td:last-of-type > span { vertical-align: top; }
	#announce_wrap table.default td:last-of-type p { display: inline-block; }
	#announce_wrap table.default td:last-of-type p span { font-weight: 500; }
}

/*=========================================
		cssハック
=========================================*/
/* IE9〜11 */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
	.case-head .cate { padding: 0.7rem 2rem 0.2rem; }
	.case-head .cate p { line-height: 1; }
	
	/* 活用事業のご紹介 */
	#case li dl dt { line-height: 1.8rem; }
	#case li dl dt, #case li dl dd { padding: 1rem 1rem 0; }
	
	/* 寄付金の実績 */
	#result_wrap table.default thead th:first-of-type { border-radius: 5px 0 0 0; }
	#result_wrap table.default thead th:last-of-type { border-radius: 0 5px 0 0; }
}
/* Edge12〜14 */
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
	.case-head .cate { padding: 0.7rem 2rem 0.2rem; }
	.case-head .cate p { line-height: 1; }
	
	/* 活用事業のご紹介 */
	#case li dl dt { line-height: 1.8rem; }
	#case li dl dt, #case li dl dd { padding: 1rem 1rem 0; }
	
	/* 寄付金の実績 */
	#result_wrap table.default thead th:first-of-type { border-radius: 5px 0 0 0; }
	#result_wrap table.default thead th:last-of-type { border-radius: 0 5px 0 0; }
}