@charset "utf-8";




/**************************************
■リストブロック（list_wp）
**************************************/
/*--共通-----------------------------*/
ul.list_wp{display: flex; flex-wrap: wrap; width: 104%; margin-left: -4%;margin-bottom: 25vh;}
ul.list_wp li a{display: block;background-color: #fff;padding: 0 0 6%; overflow: hidden;border-radius: 3px; -webkit-border-radius: 3px;-moz-border-radius: 3px;box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 0px 0px 0px 0px rgba(10,10,10,0.02);}
ul h4,
ul p{width: 90%;margin: 0 auto;font-size: 0.8rem;}

/*--ぶち抜き-------------------------*/
ul.list_wp li.list1,
ul.list_wp li.list1_sp,
ul.list_wp li.list2.list1_sp,
ul.list_wp li.list3.list1_sp,
ul.list_wp li.list4.list1_sp{width: 96%; margin-left: 4%; padding-bottom: 6vh;}

/*--２個並び-------------------------*/
ul.list_wp li.list2,
ul.list_wp li.list3,
ul.list_wp li.list2_sp,
ul.list_wp li.list1.list2_sp,
ul.list_wp li.list3.list2_sp,
ul.list_wp li.list4.list2_sp{width: 46%; margin-left: 4%; padding: 0 0% 4% 0;display: flex;align-content: flex-start;}
@media screen and (min-width: 35.000em) {
  ul.list_wp li.list2.list1_sp{width: 46%; margin-left: 4%; padding: 0 0% 4% 0;}
}

/*--３個並び（スマホは何もしない）-------*/
@media screen and (min-width: 35.000em) {
  ul.list_wp li.list3,
  ul.list_wp li.list3.list1_sp,
  ul.list_wp li.list3.list2_sp{width: 29.333%; margin-left: 4%; padding: 0 0 3% 0;}
}

/*--４個並び（スマホは何もしない）-------*/
@media screen and (min-width: 35.000em) {
  ul.list_wp li.list4,
  ul.list_wp li.list4.list1_sp,
  ul.list_wp li.list4.list2_sp{width: 21%; margin-left: 4%; padding: 0 0 2% 0;}
}




/**************************************
■バナーブロック（banner）
**************************************/
ul.banner{text-align: center;}
ul.banner h3,ul.banner h4{font-weight: normal;}
ul.banner h3{color: #bd0000;}
@media screen and (min-width: 35.000em) {
  ul.banner h3{font-size: 1.8rem;}
  ul.banner li.list4 h3{font-size: 1.4rem;}
}

/**************************************
■カード記事風ブロック（tpc_card）
**************************************/
ul.tpc_card li{position: relative;}
ul.tpc_card h3{position: absolute; padding: 4px; background-color: #999999; font-weight: normal; font-size: 1.2rem; color: #fff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; line-height: 1;}
ul.tpc_card h4{font-size: 1.0rem; line-height: 1.2; margin: 1vh auto 1.8vh;}
ul.tpc_card h4 span{display: block;margin-top: 1%; font-size: 0.8em;font-weight: normal;color: #888;}
ul.tpc_card li a p span{display: block;margin-top: 5%; padding: 5% 0; background-color: #bd0000;color: #fff;text-align: center;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;font-size: 1rem;}
@media screen and (min-width: 35.000em) {
  ul.tpc_card h3{padding: 6px; font-size: 1.2rem;}
  ul.tpc_card h4{font-size: 0.9rem;}
}
/*--ぶち抜き-------------------------*/
ul.tpc_card h3{top: 6px; left: 6px;}
/*--２個｜３個｜４個並び---------------*/
ul.tpc_card li.list2 h3,
ul.tpc_card li.list3 h3,
ul.tpc_card li.list4 h3{top: 3px; left:3px;}
@media screen and (min-width: 35.000em) {
  ul.tpc_card li.list2 h3,
  ul.tpc_card li.list3 h3,
  ul.tpc_card li.list4 h3{top: 4px; left:4px;}
}
/*--価格フォント設定---------------*/
ul.tpc_card li.list2 a p strong.price{display: block;font-size: 2.3em;text-align: center;color: #bd0000;width: 100%;margin-top: 5%;}
ul.tpc_card li.list2 a p strong.price::before{content: '寄付\A金額';white-space: pre;display: inline-block;padding: 5px;background-color: #00917d;color: #fff;font-size: 0.4em;margin-right: 3%;vertical-align: text-bottom;}
ul.tpc_card li.list2 a p strong.price span,ul.tpc_card li.list1_sp.list3 a p strong.price span{display: inline;font-family: komu-a,sans-serif;line-height: 1; font-weight: 400;font-style: normal;position: unset;background-color: unset;font-size: 2.8em;color: #bd0000;}
ul.tpc_card li.list3 a p strong.price{display: block;font-size: 2.3em;text-align: center;color: #bd0000;width: 100%;margin-top: 5%;}
ul.tpc_card li.list3 a p strong.price::before{content: '寄付\A金額';white-space: pre;display: inline-block;padding: 5px;background-color: #00917d;color: #fff;font-size: 0.4em;margin-right: 3%;vertical-align: text-bottom;}
ul.tpc_card li.list3.list1_sp a p strong.price span{display: inline;font-family: komu-a,sans-serif;line-height: 1; font-weight: 400;font-style: normal;position: unset;background-color: unset;font-size: 2em;color: #bd0000;}
@media screen and (min-width: 35.000em) {
  ul.tpc_card li.list3 a p strong.price{position: absolute;bottom: 10%;left: 0%;}
}


/**************************************
■テキスト記事風ブロック（tpc_txt）
**************************************/
ul.tpc_txt li a{display: flex; justify-content: space-between; border-bottom: solid 1px #eee; padding-bottom: 2%;}
@media screen and (min-width: 35.000em) {
  ul.tpc_txt li a{border: none; padding-bottom: 0;}
}
ul.tpc_txt img{align-self:center; width: 40%;}
ul.tpc_txt div{width: 58%;}
ul.tpc_txt h3{display: inline-block; margin-bottom: 4px; padding: 6px 6px 4px; background-color: #607D8B; font-weight: normal; font-size: 1.2rem; color: #fff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; line-height: 1;}





/**************************************
■テキストリスト（横並び）ListTxt_side
**************************************/
/*--共通-----------------------------*/
ul.ListTxt_side{display: flex;width: 100%;margin: 0 auto;}
ul.ListTxt_side li{width: 100%;}
ul.ListTxt_side li a{display: block;padding: 10px 4px;text-align: center; font-size: 12px; line-height: 1.3;}
ul.ListTxt_side li a:hover{text-decoration: none; background-color: #eef7f7;}
ul.ListTxt_side li a img{width: 46px; margin: 0 auto; margin-bottom: 6px;}
@media screen and (min-width: 35.000em) {
  ul.ListTxt_side li a{font-size: unset;}
  ul.ListTxt_side li a img{display: inline-block; width: 34px; margin: 0; margin-right: 4px; vertical-align: middle;}
}
ul.ListTxt_side li a span{display: block; font-size: 0.7em; margin-top: 4px;}
/*--横並び縦線区切り（Max 5個）list_txt1-----------------------------*/
ul.list_txt1 li{border-left: solid 1px #ccc;}
ul.list_txt1 li:first-child{border-left:none;}
/*--横並び上下線（Max 5個）list_txt2-----------------------------*/
ul.list_txt2 li{margin-left: 1%; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;}
ul.list_txt2 li:first-child{margin-left: 0;}





/**************************************
■テキストリスト（縦並び）ListTxt_vert
**************************************/
/*--共通-----------------------------*/
ul.ListTxt_vert{width: 100%;}
ul.ListTxt_vert h3{padding: 10px;line-height: 1;color: #333;}
ul.ListTxt_vert p.more a{border: none; margin-top: 10px;text-align: center;border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px;}
ul.ListTxt_vert p.more a:hover{border: none;}
ul.ListTxt_vert a{position: relative; display: block; width: 100%; padding: 10px 10px;}
ul.ListTxt_vert a::after{display: block; content: ""; position: absolute; top: 50%; right: 3%; width: 6px; height: 6px; margin-top: -4px; border-top: solid 1px #333; border-right: solid 1px #333; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
ul.ListTxt_vert p.more a::after{right: 6%;}
@media screen and (min-width: 35.000em) {
  ul.ListTxt_vert p.more a::after{right: 3%;}
}
ul.ListTxt_vert a:hover{text-decoration: none;}
/*--タイトルサイドバー-----------------------------*/
ul.ListTxt_vert.pt1 h3{background-color: #eee;border-left: solid 10px #333;}
ul.ListTxt_vert.pt1 p.more a{background-color: #eee;border: solid 1px #eee;}
ul.ListTxt_vert.pt1 p.more a:hover{background-color: #eef7f7; }
ul.ListTxt_vert.pt1 a{border-bottom: solid 1px #eee;}
ul.ListTxt_vert.pt1 a:hover{background-color: #eef7f7;}
/*--タイトルスクウェア-----------------------------*/
ul.ListTxt_vert.pt2 h3{margin-top: 24px; background-color: #eee;border: solid 1px #bfbfbf;}
ul.ListTxt_vert.pt2 h3:first-child{margin-top: 0;}
ul.ListTxt_vert.pt2 p.more a{background-color: #eee;border: solid 1px #eee;}
ul.ListTxt_vert.pt2 p.more a:hover{background-color: #eef7f7;}
ul.ListTxt_vert.pt2 a{border-left: solid 1px #bfbfbf;border-right: solid 1px #bfbfbf;border-bottom: solid 1px #bfbfbf;}
ul.ListTxt_vert.pt2 a:hover{background-color: #eef7f7;}
/*--付箋風-----------------------------*/
ul.ListTxt_vert.pt3 h3{margin-top: 24px; padding-left: 10px;background-color: #034750; color: #fff;}
ul.ListTxt_vert.pt3 h3:first-child{margin-top: 0;}
ul.ListTxt_vert.pt3 p.more a{background-color: #eee; color: #034750;border: solid 1px #eee;}
ul.ListTxt_vert.pt3 p.more a:hover{background-color: #eef7f7;border: solid 1px #64c1ce;}
ul.ListTxt_vert.pt3 a{margin: 4px 0; color: #034750; border-left: solid 10px #034750; background-color: #d3e6e8;}
ul.ListTxt_vert.pt3 a::after{border-top: solid 1px #034750; border-right: solid 1px #034750;}
ul.ListTxt_vert.pt3 li:first-child a{margin-top: 0;}
ul.ListTxt_vert.pt3 a:hover{border-left: solid 10px #64c1ce;background-color: #eef7f7;}


/**************************************
■タイトル
**************************************/
.title_cnt_bdr {position: relative;display: inline-block;padding: 0 55px;}
.title_cnt_bdr:before, .title_cnt_bdr:after {content: '';position: absolute;top: 50%;display: inline-block;width: 45px;height: 1px;background-color: black;}
.title_cnt_bdr:before {left:0;}
.title_cnt_bdr:after {right: 0;}
.title_cnt_und {position: relative;display: inline-block;margin-bottom: 1em;}
.title_cnt_und:before {content: '';position: absolute;bottom: -15px;display: inline-block;width: 60px;height: 5px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: black;border-radius: 2px;}
.title_cnt_und strong{color: #fbff00;}
.title_kadokuru {position: relative;display: inline-block; padding: 0.25em 1em;border: solid 2px black;border-radius: 3px 0 3px 0;}
.title_kadokuru:before, .title_kadokuru:after {content: '';position: absolute;width:10px;height: 10px;border: solid 2px black;border-radius: 50%;}
.title_kadokuru:after {top:-12px;left:-12px;}
.title_kadokuru:before {bottom:-12px;right:-12px;}



/**************************************
■売り切れ
**************************************/
.list3.list1_sp.soldout a{position: relative;}
.list3.list1_sp.soldout a::before{display: block;position: absolute;top: 0;left: 0;z-index: 100;padding-top: 50%; width: 100%;height: 100%; content: '売り切れました';background-color: rgb(0, 0, 0,0.5);color: #fff;text-align: center;font-weight: bold;font-size: 1.5em;}



/**************************************
■背景画像パターン
*************************************/
.bg_grid{background:#f8f8ef url(../sdgs/img/bg_grid.png?1519) top right / 20px 20px repeat;}




/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■タブレット（560px以上）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width: 35.000em) {
}


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■パソコン（960px以上）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (min-width: 60.000em) {
}