@charset "utf-8";
/* CSS Document */

/* 国名タイトル */
.country_tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #09f;
  width: 100%;
}
.country_tit > span {
  color: #09f;
  font-size: 3.2rem;
}
.country_tit .tit_note {
  margin-top: 10px;
  color: #09f;
  font-size: 1.8rem;
  text-align: center;
}
@media screen and (max-width: 639px){
  .country_tit img {
    max-width: 60px;
  }
  .country_tit span {
    font-size: 2.4rem;
  }
}

/* 画像共通 */
.country_img {}
  .country_img img {
    width: 100%;
    height: auto;
  }
.country_img .cap {
  display: block;
  background-color: #eee;
  padding: 10px;
  color: #666;
  font-size: 1.4rem;
}

/* country_main_img */
.country_main_img {
  margin-top: 10px;
}

/* 基礎データ */
.country_data {
  background: #fff;
  padding: 2% 3%;
  border-radius: 20px;
  margin-top: 5%;
	margin-right: 5%;
  margin-bottom: 5%;
	margin-left: 5%;
  border: #b29380 solid 10px
}
.country_data .country_data_tit {
  border-bottom: #816561 solid 1px;
  padding-bottom: 1.5%;
  margin-bottom: 3.5%;
  color: #816561;
  font-size: 1.8rem;
  font-weight: bold;
}
.country_data .country_data_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.country_data .country_data_inner .country_data_map {
  border-radius: 3px;
  max-width: 282px;
}
.country_data .country_data_inner .country_data_map img {
  border-radius: 3px;
  border: 1px solid #816561;
  width: 100%;
  height: auto;
}
.country_data .country_data_inner .country_data_list {
  width: calc(100% - 300px);
}
.country_data .country_data_inner .country_data_list ul {}
.country_data .country_data_inner .country_data_list ul li {
  margin-bottom: 10px;
}
.country_data .country_data_inner .country_data_list ul li .item {
  display: inline-block;
  border-radius: 100vh;
  background-color: #b29380;
  margin-right: 10px;
  padding: 1px 10px;
  color: #fff;
}
.country_data .note {
  margin-top: 10px;
  font-size: 1.2rem;
}
.country_data .country_data_inner .country_data_list .data_subtit {
  margin-bottom: 8px;
}
.country_data .country_data_inner .country_data_list ul + .data_subtit {
  margin-top: 20px;
}

@media screen and (max-width: 639px){
  .country_data .country_data_inner .country_data_map {
    margin: 0 auto;
  }
  .country_data .country_data_inner .country_data_list {
    width: 100%;
    margin-top: 20px;
  }
  .country_data .country_data_inner .country_data_list ul li {
    font-size: 1.4rem;
  }
  .country_data .country_data_inner .country_data_list ul li .data {
    display: inline-block;
    width: 100%;
    margin-top: 4px;
  }
}

/* country_sec */
.country_sec {}
.country_sec_tit {
  border-bottom:1px solid #09f;
  color: #09F;
  font-size: 3.0rem;
  font-weight: normal;
  margin-top: 10%;
  margin-right: 5%;
  margin-bottom: 2.5%;
  margin-left: 5%;
  padding-bottom: 5px;
  text-align: center;
}
.country_sec_tit .country_sec_tit_cat {
  display: inline-block;
  border-radius: 4px;
  background-color: #09f;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px 20px;
  color: #fff;
  font-size: 2.0rem;
  text-align: center;
}
.country_sec_img {
  max-width: 640px;
  margin: 0 auto 5%;
}
.country_sec_img_tate {
  max-width: 420px !important;
}
.country_txt p {
  margin-top: 0%;
  margin-right: 5%;
  margin-bottom: 3%;
  margin-left: 5%;
}
@media screen and (max-width: 639px){
  .country_sec_tit {
    font-size: 2.4rem;
  }
  .country_sec_img {
    margin-right: 5%;
    margin-left: 5%;
  }
}

/* country_movie */
.country_movie {
  margin-top: 30px;
}
.country_movie_tit {
  color: #002060;
  margin-right: 5%;
  margin-left: 5%;
  font-size: 2.4rem;
  font-weight: normal;
  text-align: center;
}
.country_movie_inner {
  max-width: 560px;
  margin: 16px auto 0;
}
.country_movie_inner p {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.country_movie_inner p iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 639px){
  .country_movie {
    margin-top: 50px;
  }
  .country_movie_tit {
    font-size: 2.0rem;
  }
  .country_movie_inner {
    margin: 16px 5% 0;
  }
}

/* country_case */
.country_case {
  border-radius: 20px;
  background-color: #DCEEFC;
  max-width: 640px;
  margin: 30px auto 0;
  padding-bottom: 30px;
}
.country_case_tit {
  border-radius: 20px 20px 0 0;
  background-color: #09f;
  padding: 10px 20px;
  color: #fff;
  font-size: 2.0rem;
  font-weight: bold;
  text-align: center;
}

@media screen and (min-width: 640px){
  .country_case_inner {
    margin: 30px 20px;
  }
  .country_case_inner .inner_txt {
    margin-top: 0%;
    margin-right: 5%;
    margin-bottom: 3%;
    margin-left: 5%;
  }
  .country_case_inner .country_case_img {
    border-radius: 10px;
  }
  .country_case_inner .country_case_img img {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
  .country_case_inner .country_case_img.country_case_img-youth {
    background-color: #fff;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
  }
}
@media screen and (max-width: 639px){
  .country_case_inner {
    margin: 30px 20px;
  }
  .country_case_tit {
    padding: 10px 10px;
    font-size: 1.6rem;
  }
  .country_case {
    margin: 30px 5% 0;
    padding-bottom: 20px;
  }
  .country_case_inner .country_case_img {
    border-radius: 10px;
    margin: 20px 20px 0;
  }
  .country_case_inner .country_case_img img {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
  .country_case_inner .country_case_img.country_case_img-youth {
    background-color: #fff;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
  }
}

/* country_reportcard */
.country_reportcard {
  border-radius: 20px;
  background-color: #DCEEFC;
  margin: 0 5%;
  padding: 20px;
}
.country_reportcard_tit {
  border-bottom: 1px solid #002060;
  color: #002060;
  font-size: 1.8rem;
  font-weight: normal;
}
.reportcard_issue {
  margin-top: 4px;
  color: #002060;
  text-align: right;
}
.country_reportcard_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.reportcard_img {
  width: 30%;
}
  .reportcard_img img {
    width: 100%;
    height: auto;
  }
.reportcard_content {
  width: 65%;
}
.reportcard_content dt {
  display: inline-block;
  border-radius: 100vh;
  background-color: #002060;
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 1px 10px;
  color: #fff;
}
.reportcard_content li {
  margin-bottom: 12px;
}
.reportcard_content a {
  display: inline-block;
  margin-left: 20px;
}
.reportcard_content a:before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  content: "\f152";
  font-weight: 900;
  color: #002060;
  text-indent: -20px;
}
.reportcard_content a .fa-file-pdf {
  color: #ff2116;
  background-color: #fff;
}

@media screen and (max-width: 639px){
  .reportcard_img {
    width: 60%;
    margin: 0 auto;
  }
  .reportcard_content {
    width: 100%;
    margin-top: 20px;
  }
  .reportcard_content li {
    font-size: 1.4rem;
  }
}

/* btn_info */
@media screen and (max-width: 639px){
  .btn_info {
    margin-right: 5%;
    margin-left: 5%;
  }
}

/* ranking.html タブ切り替え */
.ranking_table {
  margin-top: 50px;
  padding-bottom: 40px;
}
.balloon {
  margin-bottom: 10px;
  position: relative;
}
.balloon:before,.balloon:after {
  clear: both;
  content: "";
  display: block;
}
.balloon figure {
  width: 140px;
  height: 140px;
}
.balloon-image-left {
  float: left;
  margin-right: 20px;
}
.balloon-image-right {
  float: right;
  margin-left: 20px;
}
.balloon figure img {
  width: 100%;
  height: 100%;
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin: 0;
  /*box-shadow: 2px 3px 5px rgba(0,0,0,0.3);*/
}
.balloon-image-description {
  padding: 5px 0 0;
  font-size: 14px;
  text-align: center;
}
.balloon-text-right,.balloon-text-left {
  position: relative;
  padding: 15px;
  border: 5px solid;
  border-radius: 10px;
  max-width: -webkit-calc(100% - 160px);
  max-width: calc(100% - 160px);
  display: inline-block;
	margin-top:10px;
}
.balloon-text-right {
  border-color: #00a1e7;
	background:#EFF8FF ;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.balloon-text-left {
  border-color: #00a1e7;
	background:#EFF8FF ;
  /*border-color: #ffaaaa;
  background: #FDF8F8;*/
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.balloon-text-right {
  float: left;
}
.balloon-text-left {
  float: right;
}
.balloon p {
  margin: 0 0 20px;
}
.balloon p:last-child {
  margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #00a1e7;
  top: 15px;
  left: -25px;
}
.balloon-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #EFF8FF;
  top: 15px;
  left: -19px;
}
.balloon-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #00a1e7;
  /*border-left: 10px solid #ffaaaa;*/
  top: 15px;
  right: -25px;
}
.balloon-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #EFF8FF;
  /*border-left: 10px solid #FDF8F8;*/
  top: 15px;
  right: -19px;
}

@media screen and (max-width: 639px) {
  .balloon {
    margin-bottom: 10px;
  }
  .balloon-image-left {
    margin-right: 10px;
  }
  .balloon-image-right {
    margin-left: 10px;
  }
  .balloon figure {
    max-width: 140px;
    width: 30%;
    height: auto;
  }
  .balloon-text-right, .balloon-text-left {
    max-width: -webkit-calc(100% - (30% + 10px));
    max-width: calc(100% - (30% + 10px));
  }
}

/*タブ切り替え全体のスタイル*/
.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 600px;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  display: inline-block;
  border-bottom: 1px solid #000;
  background-color: #fff;
  padding: 12px;
  color: #000;
  font-size: 1.6rem;
  text-align: center;
  transition: all 0.2s ease;
}
.tabs input + .tab_item {
  cursor: pointer;
}
  .tab_item > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
.tab_item:hover {
  opacity: 0.75;
}
.tabs .w-11 {width: 11%;}
.tabs .w-21 {width: 21%;}
.tabs .w-17 {width: 17%;}
@media screen and (min-width: 639px){
.tabs .tab_item.w-21 {width: calc(21% - 5px);}
.tabs .tab_item.w-17 {width: calc(17% - 3px);}
}
@media screen and (max-width: 639px){
  .tab_item {
    font-size: 1.4rem;
  }
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: none;
  border-left: 1px solid #000;
  padding: 10px;
  font-weight: bold;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  width: 100%;
  height: 380px;
  display: none;
  padding: 0;
  clear: both;
  overflow-y: scroll;
  /* スクロール非表示　IE, Edge 対応
  -ms-overflow-style: none; */
  /* スクロール非表示　Firefox 対応
  scrollbar-width: none; */
}
/* スクロール非表示　Chrome, Safari 対応
.tab_content::-webkit-scrollbar {
 display:none;
} */

/*選択されているタブのコンテンツのみを表示*/
#climate:checked ~ #climate_content,
#co2:checked ~ #co2_content,
#ratio:checked ~ #ratio_content,
#ton:checked ~ #ton_content{
  display: block;
}

/* tab_content 中身 */
.ranking_inner_table {
  width: 100%;
}
.ranking_inner_table th {
  border-bottom: 1px solid #ccc;
  width: 30%;
  padding: 5px;
  font-weight: normal;
  text-align: center;
}
.ranking_inner_table td {
  border-bottom: 1px solid #ccc;
  width: calc(70% / 4);
  padding: 5px;
  text-align: center;
}
@media screen and (max-width: 639px){
  .table_wrapper {
    overflow: auto;
  }
  .ranking_inner_table {
    min-width: 600px;
  }
}

.tabs input#climate:checked + .tab_item,
#climate:checked ~ #climate_content td:nth-child(3) {
  color: #7831bf;
}
.tabs input#co2:checked + .tab_item,
#co2:checked ~ #co2_content td:nth-child(4) {
  color: #f98e46;
}
.tabs input#ratio:checked + .tab_item,
#ratio:checked ~ #ratio_content td:nth-child(5) {
  color: #47a7f9;
}
.tabs input#ton:checked + .tab_item,
#ton:checked ~ #ton_content td:nth-child(6) {
  color: #f2b805;
}