@charset "UTF-8";
/*スマホ向けの設定(幅600以下)*/
ul{
  list-style-type: none;
  padding: 0;
  font-size: 12px;
  display: flex;
  justify-content: center;
}
li{display: inline;}
li:not(:last-child){margin-right: 15px;}
/*リンクの編集*/
a{
  color: inherit;
  text-decoration: none;
}
a:hover{opacity: 0.5}
/* ヘッダーの編集 */
header{
  padding: 15px 15px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}
/*記事の編集*/
div{
  padding: 15px 15px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;}
  article{
  padding-left: 15px;
  padding-right: 15px;}
   h1{
   display: block;
   text-align: center;
   font-size: 12px;
   line-height: 1.0;}
    span.name{
    font-size: 8px;}
    p{font-size: 8px;}
    section.info{
    display: grid;
    line-height: 1.5;}
     span.italic{
     font-size: 8px;
     font-style: italic;}
    section.sound{
     align-items: center;
     color: green;}
    section.sphere{color: blue;}
    section.thermo{color: red;}
/*画像の大きさ自動調整*/
img{width: 75%;height: auto;
}
/*画像周辺のマージン*/
figure{
  margin: 0;
  text-align: center;
}
/*===幅600以上の場合の設定===*/
@media (min-width: 600px) {
/*ナビゲーションメニューの編集*/
ul{
  list-style-type: none;
  padding: 0;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
li{display: inline;}
li:not(:last-child){margin-right: 18px;}
/*リンクの編集*/
a{
  color: inherit;
  text-decoration: none;
}
a:hover{opacity: 0.5}
/* ヘッダーの編集 */
header{
  padding: 25px 15px;
  text-align: center;
  font-weight: bold;
  font-size: 36px;
}
/*記事の編集*/
div{
  padding: 40px 15px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;}
  article{
   padding-left: 60px;
   padding-right: 60px;}
    h1{
    display: block;
    text-align: center;
    font-size: 20px;
    line-height: 1.0;}
     span.name{
     font-size: 12px;}
    p{font-size: 12px;}
    section.info{
     display: grid;
     line-height: 1.5;}
     span.italic{
      font-size: 12px;
      font-style: italic;}
    section.sound{
      align-items: center;
      color: green;}
    section.sphere{color: blue;}
    section.thermo{color: red;}
/*画像の大きさ自動調整*/
img.4x5{width: 100%;height: auto;}
img.6x9{width: 55%;height: auto;}
/*画像周辺のマージン*/
figure{margin: 0;}
}
/*===幅600以上の場合の設定終了===*/