@charset "UTF-8";  /* copilot師 IND5BLUE */

/* レイアウト基本 */
body {
font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
margin: 0;
background: #e9e9e9;
color: #333;
line-height: 1.7em;
}

/*h1の装飾 */
h1 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 25px;
color: #1d2088;
text-align: center;
padding-top: 5px;
margin-bottom: 5px;
letter-spacing: 0.05em;
font-weight: bold;
}

h1 a:link {
color: #1d2088;
text-decoration:none;
}
h1 a:visited {
color: #1d2088;
text-decoration:none;
}
h1 a:hover {
color: #4b4eb8;
text-decoration:none;
}
h1 a:active {
color: #4b4eb8;
text-decoration:none;
}

/* 更新情報 */
.update-wrapper {
text-align: center;
}
.update-info {
font-size: 16px;
color: #ff0000;
background-color: #fff3f3;
border: 1px solid #ffcccc;
padding: 6px 12px;
border-radius: 6px;
display: inline-block;
margin: 10px auto;
}

/* スライドメニュー */
.gnav {
width: 100%;
height: 40px;
background: #e9e9e9;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
margin-top: 5px;
}
.gnav ul {
padding-left: 0;/* スマホ左寄せ */
width: 500px;
height: 40px;
margin: 0 auto 2px auto;
list-style: none;
display: flex;
}
.gnav ul li {
text-align: center;
border-left: 1px solid #eee;
}
.gnav ul li:last-child {
border-right: 1px solid #eee;
}
.gnav ul li a,
.gnav ul li a:link,
.gnav ul li a:visited {
display: inline-block;
width: 96px;
height: 40px;
color: #fff;
text-decoration: none;
background-color: #339933;
}
.gnav ul li a:hover,
.gnav ul li a:active {
background-color: #00CC66;
}

/* 五十音ボタン */
.gojuon-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 20px auto;
padding: 20px;
padding-left:10;
padding-right:10;
background-color: #e9e9e9;
border-radius: 8px;
max-width: 880px;
}

.gojuon-group ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.gojuon-group button {
background-color: #6bc95f;
color: white;
border: none;
padding: 8px 14px;
border-radius: 5px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
.gojuon-group button:hover {
background-color: #34b823;
}

.gojuon-section {
background-color: #e4e4e4;
margin: 20px auto;
max-width: 880px;
padding: 2px 2px;
border-radius: 8px;
box-shadow: 0 0 6px rgba(0,0,0,0.05);
}
.gojuon-section a:link {
color: #1d2088;
text-decoration:none;
}
.gojuon-section a:visited {
color: #1d2088;
text-decoration:none;
}
.gojuon-section a:hover {
color: #4b4eb8;
text-decoration:none;
}
.gojuon-section a:active {
color: #4b4eb8;
text-decoration:none;
}
.gojuon-group button.active {
background-color: #34b823;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

h2 {
text-align: center;
font-size: 24px;
margin: 30px auto 16px auto;
color: #4a7647;
}

/* サムネイル画像 */
.bird-thumb {
display: flex;
align-items: center;
gap: 10px;
background-color: #fff;
border-radius: 6px;
padding: 8px;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
max-width: 300px;
margin: 10px auto;
}

.bird-thumb img {
width: 130px;
height: 98px;
object-fit: cover;
border-radius: 4px;
}

.bird-info {
display: flex;
flex-direction: column;
justify-content: center;
}

.bird-info h3 {
margin: 0;
font-size: 16px;
color: #333;
}

.sound-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #4a7647;
margin-top: 4px;
}
.sound-button:hover {
color: #2e5c2e;
}

.main-bird-img {
width: 100%;
max-width: 640px;
height: auto;
border-radius: 8px;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
}

.bird-thumbs {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
padding: 20px 0;
}

.bird-thumb {
display: flex;
align-items: center;
gap: 10px;
background-color: #fff;
border-radius: 6px;
padding: 8px;
box-shadow: 0 0 4px rgba(0,0,0,0.1);
max-width: 300px;
}

.bird-thumb img {
width: 130px;
height: 98px;
object-fit: cover;
border-radius: 4px;
}

.bird-info {
display: flex;
flex-direction: column;
justify-content: center;
}

.bird-info h3 {
margin: 0;
font-size: 16px;
color: #333;
}

.sound-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #4a7647;
margin-top: 4px;
}
.sound-button:hover {
color: #2e5c2e;
}

/* フッター */
footer {
clear: both;
width: 100%;
background-color: #e9e9e9;
padding: -50px 0;
text-align: center;
font-size: 14px;
position: relative;
}
.footer-inner {
max-width: 640px;
margin: 0 auto;
text-align: left;
padding: 0 16px;
}
.footer-text {
font-size: 16px;
margin-bottom: 10px;
color: #333;
}

/* クレジット表記 */
.footer-credit {
text-align: left;
color: rgba(91, 92, 95, 0.7); /* 文字色に透明度を直接設定 */
font-size: 14px;
margin-bottom: 4px;
}
.footer-credit a {
color: #4a7647;
text-decoration:none;
}

/* TOPへ戻るボタン */
div.tothetopfixed {
position: fixed;
right: 15px;
bottom: 20px;
z-index: 1500;
}    

div.tothetopfixed a {
display: block;
color: #333333;
padding: 10px;
margin: 0;
background-color: #6bc95f;
border-radius: 5px;
font-size: 0.8em;
text-align: center;
}
div.tothetopfixed a:hover {
background: #34b823;
color: #ffffff;
}