.caption-back{
  background:rgba(16, 4, 88, 0.5);
}

.title-back{
  background:rgba(0, 0, 0, 0.7);
  height: 200px;
}

.item-back{
  background:rgba(109, 73, 110, 0.5);
  height: 80px;
  border-radius: 10px 10px 10px 10px;
}

.item-back-selected{
  background:rgba(105, 218, 238, 0.2);
  height: 80px;
  border-radius: 10px 10px 10px 10px;
}

.section-title{
  margin-top: -110px;
  color: #FFFFFF;
  text-decoration: underline;
}

.item-image{
  height: 80px;
  width: 300px; 
  border-radius: 10px 10px 10px 10px;
}

.item-title{
  margin-top: -63px;
  color: white;
}

h1 {
  padding: 0.5em;/*文字周りの余白*/
  color: #05182ce0;/*文字色*/
  background: rgba(160, 208, 216, 0.1);/*背景色*/
  border-bottom: solid 3px #2b2c2e;/*下線*/
  border-radius: 0px 10px 0px 0px; /*角*/
  font-size: xx-large;
}

h5 {
  color: #041e33f1;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 3px  #677481;/*上線*/
  border-bottom: solid 3px  #677481;/*下線*/
}

h7 {
  font-size: large;
}

.greeting{
  font-family: "HG正楷書体-PRO",serif;
}

.greeting-title{
  font-family: "Times New Roman",serif;
  font-style: italic;
  font-weight: bold;
  font-size: 28px;
}

.oval{
  background:rgba(92, 138, 146, 0.2);
  border-radius: 50%;
  height: 300px;
  width: 550px;
  text-align: center;
  color: rgba(4, 9, 250, 0.6);
}

h8 {
  position: relative;
  padding: 0.5em;
  text-align: center;
  text-decoration: underline;
  color: #041e33f1;
  font-size: x-large;
}

h9 {
  padding: 0.3em;/*文字周りの余白*/
  color: #05182ce0;/*文字色*/
  background: rgba(160, 208, 216, 0.1);/*背景色*/
  border-bottom: solid 3px #2b2c2e;/*下線*/
  border-radius: 0px 10px 0px 0px; /*角*/
  font-size: x-large;
}

/* 画像のアスペクト比を自動的に4:3に固定するクラス*/
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 */
  overflow: hidden;
}
.aspect-ratio-box img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}