@charset "UTF-8";

/************************************
** 自作select(ギタースケール用)
**
** 【超初心者向け解説】
** @media screen and (...) { ... } という書き方は、
** 「画面の横幅がこの範囲のときだけ、このCSSを使う」という意味です。
** これにより、PC(横幅が広い画面)とスマホ(横幅が狭い画面)で
** 見た目を自動的に切り替えています。
************************************/

/* ★PC用★ (画面の横幅が600px以上のとき) */
@media screen and (min-width: 600px) {
/* <div id="form"> フォーム全体を囲む箱のデザイン */
#form {
	text-align: center;
	background-color: #ffe4b5;
	background-image: url(https://masatomy.com/wp/wp-content/uploads/ki02.png);
	border: 5px #800000 outset;
	border-radius: 10px;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 0px;
}

/* <select class="key"> 音名(Key)のプルダウン */
.key {
	text-align: center;
	color: #640125;
	font-size: 24px;
	padding: 5px 2px 5px 5px;
	height: 50px;
	vertical-align: top;
}

/* <select class="scale"> スケール名のプルダウン */
.scale {
	color: #640125;
	font-size: 24px;
	padding: 5px 1px 5px 5px;
	height: 50px;
	vertical-align: top;
	width: 40%;
}

/* <input class="submit"> 「移動!」ボタン */
.submit {
	color: #a22041 !important;
	font-size: 24px !important;
	font-weight: normal !important;
	border: 2px solid #f5deb3 !important;
	border-radius: 5px !important;
	padding: 5px !important;
	margin: 0px !important;
	height: 50px!important;
	vertical-align: top !important;
}
/*☆ ※とりあえず↓がinput[type="submit"]に設定されているので、解除したいものは、!importantで上書きする。
  (!important を付けると「他のCSSより優先して、この指定を使う」という意味になります) ☆ 
  display: inline-block;
  margin-bottom: 20px;　☆上書き済
  padding: 6px 12px;　☆上書き済
  border: 1px solid #777;　☆上書き済
  border-radius: 3px;　☆上書き済
  background: #fff;
  color: #333;　☆上書き済
  text-decoration: none;
  font-weight: bold;　☆上書き済
  line-height: normal;
  cursor: pointer;
*/
}

/* ★スマホ用★ (画面の横幅が0px〜599pxのとき) */
@media screen and (min-width: 0px) and (max-width:599px) {
/* <div id="form"> フォーム全体を囲む箱のデザイン */
#form {
	background-color: #ffe4b5;
	background-image: url(https://masatomy.com/wp/wp-content/uploads/ki02.png);
	border: 5px #800000 outset;
	border-radius: 10px;
	padding: 5px 2% 5px 2%;
	margin-top: 5px;
	margin-bottom: 0px;
}

/* <select class="key"> 音名(Key)のプルダウン */
.key {
	color: #640125;
	font-size: 1em;
	padding: 5px 2px 5px 5px;
	margin: 3px 3px;
	height: 45px;
	vertical-align: top;
	width:32%;
}

/* <select class="scale"> スケール名のプルダウン */
.scale {
	color: #640125;
	font-size: 1em;
	padding: 5px 1px 5px 5px;
	margin: 3px 3px;
	height: 45px;
	vertical-align: top;
	width:60%;
}

/* <input class="submit"> 「移動!」ボタン */
.submit {
	text-align: center;
	color: #a22041 !important;
	font-size: 1.2em !important;
	font-weight: bold !important;
	border: 2px solid #f5deb3 !important;
	border-radius: 5px !important;
	padding: 5px !important;
	margin: 10px 10px !important;
	margin-left: 20% !important;
	margin-right: 20% !important;
	height: 50px!important;
	vertical-align: top !important;
	width:60% !important;
}
}