@charset "utf-8";

/* === .fBox (flexBox) === */
@media screen and (min-width: 768px){
  .fBox {
    display: -webkit-box;
    display: flex;
  } 
}

/* === .innerBox === */
.innerBox {
  border: 2px solid #d1d1d1;
  background-color: #fff;
}
.innerBox > div {
  padding: 2px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 50%, rgba(255, 254, 254, 1) 75%, rgba(251, 249, 246, 1));
}
@media screen and (min-width: 768px) {
  .innerBox > div > * {
    padding: 20px;
  }
}
@media not all and (min-width: 768px) {
  .innerBox > div > * {
    padding: 8px;
    font-size: calc(15 / 16 * 1rem);
  }
}

/* === #sdgs === */
#sdgs .fBox {
  -webkit-box-align: center;
  align-items: center;
}
#sdgs .fBox div {
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #sdgs .fBox figure {
    width: 150px;
  }
  #sdgs .fBox div {
    flex: 1;
  }
  #sdgs .fBox div h2 {
    font-size: calc(18 / 16 * 1rem);
    margin-bottom: 8px;
  }
}
@media not all and (min-width: 768px) {
  #sdgs .fBox figure {
    text-align: center;
  }
  #sdgs .fBox div h2 {
    font-size: calc(16 / 16 * 1rem);
    margin-bottom: 4px;
  }
}

/* === #declaration === */
#declaration dd {
  margin-bottom: 10px;
}
#declaration dd ul li {
  line-height: 1.5;
}

/* === #focused === */
#focused dt {
  font-weight: bold;
  margin-bottom: 4px;
}
#focused figure {
  display: inline-block;
  margin-right: 4px;
}
#focused figure img {
  display: block;
}
@media screen and (min-width: 768px) {
  #focused dt {
    font-size: calc(18 / 16 * 1rem);
  }
}
@media not all and (min-width: 768px) {
  #focused dt {
    font-size: calc(16 / 16 * 1rem);
  }
}

/* --- #focused table style --- */
#focused table td {
  font-weight: normal;
  border: 2px solid #d1d1d1;
  text-align: left;
  vertical-align: top;
}
@media screen and (min-width: 768px){
  #focused table td {
    padding: 16px;
    width: 70%;
  }
  #focused table td > td {
    width: 30%
  }
}
@media not all and (min-width: 768px){
  #focused table td {
    display: block;
    padding: 8px;
    width: 100%;
    border-bottom: 2px dotted #d1d1d1;
  }
  #focused table td:last-child {
    border-top: none;
    border-bottom: 2px solid #d1d1d1;
    margin-bottom: 8px;
    text-align: center;
  }
}