/* ===== 全体のスタイル ===== */
* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
header {
  color: brown;
  padding: 30px;
}

/* =====  h2（サブタイトル） ===== */
h2 {
  /* 文字の大きさ */
  font-size: 30px;
  /* 文字のフォント */
  font-family: "Noto Sans JP";
  /* 文字の太さ */
  font-weight: 500;
  /* 文字の色 */
  color: orangered;
  /* 余白 */
  margin: 10px;
  /* 文字の整列 */
  text-align: center;
}

.experience {
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:space-around;
  align-items:flex-start;
  align-content:flex-start;
}

section {
  /* 背景の色 */
  background-color: ivory;  
  /* 内がわの余白 */
  padding: 25px;
  /* 文字の整列 */
  text-align: left;
}


/* ===== 経験談のスタイル ===== */
details {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 17px;
  width: 425px;
}

details > summary {
  padding: 10px;
  margin: 10px;
  width: 410px;
  border-radius: 10px;
  background-color: lightsalmon;
  border: none;
  box-shadow: 3px 3px 4px grey;
  /* 工夫した */
  cursor: pointer;
}

details > p {
  padding: 10px;
  margin: 10px;
  width: 410px;
  border-radius: 10px;
  background-color: moccasin;
  border: none;
  box-shadow: 3px 3px 4px grey;
}

details[open] > summary {
  background-color: peachpuff ; 
}


/* レイアウト用の箱 */
div {
  /* レイアウトのルール */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items:flex-start;
  align-content:flex-start;
}

/* リンク */
a {
  /* 文字の色 */
  color: white;
  /* 背景の色 */
  background-color: salmon;
  /* 内がわの余白 */
  padding: 10px;
   /* 外がわの余白 */
  margin: 5px;
  /* 文字の装飾 */
  text-decoration: none;
  /* 角を丸く */
  border-radius: 20px;
  /* 並べ方 （block = ページ横の長さ）*/
  display: inline-block;
  /* 文字の整列 */
  text-align: center;
  }

/* リンクにさわった時 */
a:hover {
  /* 文字の色 */
  color: white;
  /* 背景の色 */
  background-color: lightsalmon;
}

/* ===== フッターのスタイル ===== */
/* フッター */
footer {
  /* 文字の色 */
  color: grey;
  /* 背景の色 */
  background-color: moccasin;
  /* 文字の配置 */
  text-align: center;
  /* 内がわの余白 */
  padding: 10px;
}