/* ===== 全体のスタイル ===== */
@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');

* {
  margin: 0;
  padding: 0;
}
 
/* ===== 色：ivory, saddlebrown, orange, coral, tomato, orangered===== */

/* ===== ヘッダーのスタイル ===== */
header {
  /* 内がわの余白 */
  padding: 30px;
  /* 背景のグラデーション */
  background: linear-gradient(to bottom right, orange 15%, coral 60%, tomato 100%);
}

/* =====  h1のスタイル（ヘッダーの文字） ===== */
h1 {
  /* 文字の大きさ */
  font-size: 50px;
  /* 文字の種類 */
  font-family: "Zen Old Mincho";
  /* 文字の色 */
  color: ivory;
  /* 文字の整列 */
  text-align: center;
  /* 文字の影 */
  filter: drop-shadow(0 0 10px black);
  /* 線の種類 */
  border-style: dashed;
  /* 線の色 */
  border-color: ivory;
  /* 線の太さ */
  border-width: 2px;
  /* 枠線の角丸 */
  border-radius: 50px;
  /* 内側の余白 */
  padding: 30px;
  /* 外側の余白 */
  margin: 10px;
}

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

/* =====  h3（テキスト） ===== */
h3 {
  /* 文字の大きさ */
  font-size: 20px;
  /* 文字のフォント */
  font-family: "Noto Sans JP";
  font-weight: 400;
  /* 文字の色 */
  color: saddlebrown;
  /* 下がわの余白 */
  margin-bottom: 25px;
  /* 文字の整列 */
  text-align:center;
}

/* 画像 */
img {
  /* 横幅 */
  width:32%;
  height:32%;
  /* 角丸 */
  border-radius: 30px;
}

.image {
display: flex;
justify-content: center;
text-align: center;
flex-wrap:wrap;
gap: 20px;

}

.experience {
  display: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: #faa781;
  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: inline-block;
  text-align: left;
}

/* 段落 */
p {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin-left: 20px;
}

.form{
    /* 文字の色 */
  color: white;
  /* 背景の色 */
  background-color: salmon;
  /* 内がわの余白 */
  padding: 15px;
   /* 余白 */
  margin: 8px;
  /* 文字の装飾 */
  text-decoration: none;
  /* 角を丸く */
  border-radius: 20px;
  /* 並べ方 （block = ページ横の長さ）*/
  display: block;
  /* 文字の整列 */
  text-align: center;
  font-size:20px;
}

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

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


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