@charset "UTF-8";

body{
    background-color: #0e1b1a;
    color: #cfdcd9;
    font-size: 16px;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 400;
    font-style: normal;
    margin: 30px;
    line-height: 1.8;
}

img{
    max-width: 100%;
    height: auto;
}

header{
    background-color: #223532;
}

header h1{
    background-color:#382f72;
    color: #e6f0ef;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    padding: 20px 0 16px;
    width: 500px;
    margin: 0  auto;
}

header nav ul{
    display: flex;
    font-size: 18px;
    justify-content: right;
    border-top: 2px solid #0e1b1a;
    border-bottom: 2px solid #0e1b1a;
}

header nav ul li{
    margin: 0 20px;
}

header nav ul li a:hover{
    text-decoration: underline double #e6f0ef 2px;
    font-weight: bold;
    font-size: 18px;
}

/* header  img{ 
    width: 100%;
} */

main{
background-color: #223532;
text-align: center;
margin: 0 auto;
}

main .story{
margin-bottom: 10px;
}

main h2{
    background-color: #e6f0ef;
    color: #382f72;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}

/* 公演情報の表を整えるスタイル */
.info table {
  width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 10px;
}

.info th, .info td {
  border: 1px solid #cfdcd9;
  padding: 10px;
  text-align: center;
}

/* モバイルでも見やすく
@media screen and (max-width: 600px) {
  .info table {
    font-size: 0.9rem;
  }
}*/

.info p{
    margin-bottom: 10px;
}

.ticket{
    margin-bottom: 10px;
}

.cast_list {
margin-top: 20px;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 2rem 1.5rem;
text-align: center;
}


.cast img{
    border: 2px solid #0e1b1a;
    width: 400px;
}

.staff{
    margin-bottom: 10px;
}

.contact{
    padding-bottom: 60px;
}
form{
    width: 600px;
    margin: 0 auto;
}
input[type="text"],
input[type="email"],
textarea{border: 2px solid #cfdcd9;
    background-color: #e6f0ef;
width: 100%;
margin-top: 5px;
padding: 4px 8px;
}
textarea{
    height: 148px;
    margin-bottom: 30px;
    resize: none;
}
form p{
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: left;
}
.btn{
    text-align: center;
    border: 5px solid #382f72;
    width: 100px;
    margin: 0 auto;
}


footer{
    background-color: #382f72;
    text-align: center;
}


/*

| 用途      | 色コード      | カラー名風の説明       | 使用イメージ                   |
| ------- | --------- | -------------- | ------------------------ |
| 背景（全体）  | #0e1b1a| 闇に沈んだ深緑        | 全体背景、セクションのベースカラーに       |
| 見出し     | #e6f0ef| 曇り空の白          | h1〜h3などの大見出し、タイトル        |
| 本文      | #cfdcd9| 霧のようなやわらかい白    | 本文テキスト                   |
| アクセント   |#7c6be5| 青紫の花のような色      | リンク、ボタン、強調したい言葉、アイコンなど   |
| サブアクセント | #8ec7b7| 雨上がりの葉や水のニュアンス | 装飾要素、小ボタン、ホバー時の色変化など     |
| 境界線・飾り線 | #223532| 森の影のようなダークグリーン | 区切り線、ボーダー、枠線、強調ボックスの背景など |
#382f72

*/