body {
     font-family: 'Arial', sans-serif;
     line-height: 1.6;
     color: #333;
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
     background-color: #f4f4f4;
 }

 header {
     background-color: #3498db;
     color: white;
     text-align: center;
     padding: 1em;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 h1 {
     margin: 0;
 }

 .profile-image {
     width: 200px;
     height: 200px;
     border-radius: 50%;
     margin: 20px auto;
     display: block;
     object-fit: cover;
     border: 5px solid #fff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 section {
     background-color: white;
     margin: 20px 0;
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 h2 {
     color: #2c3e50;
     border-bottom: 2px solid #3498db;
     padding-bottom: 10px;
 }

 /* ul {
     list-style-type: ;
     padding: 0;
 } */

 li {
     margin-bottom: 10px;
 }

 .skill {
     display: inline-block;
     background-color: #3498db;
     color: white;
     padding: 5px 10px;
     margin: 5px;
     border-radius: 3px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .fade-in {
     animation: fadeIn 2s ease-in;
 }

 /* 自動音声講座参加者用のおまけ実装用 */
 .audio-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 24px;
     height: 24px;
     border: none;
     background: none;
     cursor: pointer;
     padding: 0;
     margin-left: 10px;
     vertical-align: middle;
 }

 .audio-button:hover {
     opacity: 0.7;
 }

 .audio-button img {
     width: 100%;
     height: 100%;
 }

 .audio-button.playing img {
     /* クリックしたときに変化を生じさせるように青系の色で脚色 */
     filter: invert(24%) sepia(97%) saturate(1847%) hue-rotate(204deg) brightness(94%) contrast(101%);
 }