/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 .container {
  margin-bottom: 30px; /*.containerの下に30pxのマージンを作る*/
  text-align: center; /*中央揃え*/
  }

.my-image {
display: block;/*マージンを適用させるため*/
margin: 30px auto; /*縦のマージンを30px、横のマージンを自動調整*/
width: 50%; /*親要素(.containerの横幅の50%に指定)*/
}

.play-sound {

background-color: #FF85CB;  /* 明るいピンク色 */
color: white;               /* 文字色は白 */
border-radius: 20px;        /* 角を丸くする */
padding: 10px 20px;         /* パディングを調整 */
font-size: 16px;            /* フォントサイズ */
font-family: 'Arial', sans-serif; /* フォントファミリー */
margin-top: 30px;
display: inline-block; /*inlineではmargin-topの調整ができないためinline-blockを指定*/
text-decoration: none; /*はなげ出てるよの下線を消す*/
}

.play-sound:hover {
  transform: scale(1.1);      /* ホバー時に少し大きくする */
}