/* 共通スタイル */
.tips {
  margin: 1.5em 1.5em;
  border-width: 2px;
  border-style: solid;
}

.tips h3:not(.video_caption):not(.video_date) {
  text-align: center;
  padding: 3px;
  font-size: 1.1rem;
  color: #fff;
}

.tips p {
  text-indent: 1rem;
  margin: 0.8rem 0.8rem 1rem 0.8rem;
  text-align: justify;
  font-feature-settings: "palt";
  line-height: 1.5rem;
  font-size: 0.9rem;
  color: #555555;
}

.tips p:last-child {
  margin: 0.8rem;
}

/* カラーバリエーション */
.tips.yellowgreen {
  border-color: yellowgreen;
}

.tips.yellowgreen h3:not(.video_caption):not(.video_date) {
  background-color: yellowgreen;
}

.tips.gold {
  border-color: #EED202;
}

.tips.gold h3:not(.video_caption):not(.video_date) {
  background-color: #EED202;
}

.information{
    margin: 1.5rem 1.5rem;
    border: 2px solid navy; 
}

.information h3{
    text-align: center;
    background-color: navy;
    color: #fff;
    padding: 3px;
    font-size: 1.1rem;
}

.information p{
    text-indent: 1rem;
    margin: 0.8rem 0.8rem 1rem 0.8rem;
    text-align: justify;
    font-feature-settings : "palt";
    line-height: 1.5rem;
    font-size: 0.9rem;
    color: #555555;
}

.information p:last-child{
    margin: 0.8rem 0.8rem 0.8rem 0.8rem;
}

.tips a, .information a {
  color: #002EE6;
}

.tips a:hover, .information a:hover {
  color: #26ccff;
}

@media screen and (max-width: 667px) {

.tips, .information{
    margin: 1.5em 0em;
}

.tips h3, .information h3{
    font-size: 1rem;
}

.tips p, .information p{
    margin: 0.5rem 0.5rem 1rem 0.5rem;
    font-size: 1rem;
    line-height: 1.6rem;
}

.tips p:last-child, .information p:last-child{
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.tips span, .information span{
    display: block;
}

}