@charset "utf-8"; /* 文字コードを指定 */

/* ページ全般の設定 */
html, body {
	font-family : 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; /* フォントの種類を指定 */
    font-size : 0.95em; /* 文字のサイズを指定 */
    color : #585a60; /* 文字の色を指定 */
    line-height : 2.0em; /* 行間の幅を指定 */
    letter-spacing : 0.8pt; /* 文字間の幅を指定 */
}

/* ヘッダー全般の設定 */
header {
    background-color : #8fbc8f; /* ヘッダーの背景色 */
    color : #fff; /* ヘッダー内の文字色 */
    width : 100%; /* 横幅いっぱい */
	position : relative; /* 要素を相対位置で配置 */
	overflow : hidden; /* はみ出した部分を表示しない */
}

/* ヘッダーメニューの設定 */
header li {
    list-style : none; /* リストマークを表示しない */
    float : left; /* 横並び */
    padding : 0px 20px; /* 内側の余白 */
}

/* ヘッダータイトルのリンク設定 */
header a:link { /* 未訪問のリンク */
    color : #fff;
}
header a:visited { /* 訪問済みのリンク */
    color : #fff;
}
header a:hover { /* ポイント時のリンク */
    color : #fff;
}
header a:active { /* 選択中のリンク */
    color : #fff;
}

/* ヘッダーメニューのリンク設定 */
header li a:link { /* 未訪問のリンク */
    color : #2f4f4f;
}
header li a:visited { /* 訪問済みのリンク */
    color : #2f4f4f;
}
header li a:hover { /* ポイント時のリンク */
    color : #2f4f4f;
}
header li a:active { /* 選択中のリンク */
    color : #2f4f4f;
}

/* ヘッダー内のロゴ */
.header-logo {
    float : left; /* 横並び */
    font-size : 26px; /* フォントサイズ */
    padding : 20px 0px 20px 40px; /* 内側の余白 */
}

/* フッター全般の設定 */
footer {
    background-color : #8fbc8f; /* ヘッダーの背景色 */
    color : #fff; /* ヘッダー内の文字色 */
    width : 100%; /* 横幅いっぱい */
	position : relative; /* 要素を相対位置で配置 */
	overflow : hidden; /* はみ出した部分を表示しない */
    margin-top: 30px;
}

/* フッターメニューの設定 */
footer li {
    list-style : none; /* リストマークを表示しない */
    float : right; /* 横並び */
    padding-bottom : 10px; /* 内側の余白 */
    clear : both; /* 回り込み解除 */
}

/* フッターのリンク設定 */
footer a:link { /* 未訪問のリンク */
    color : #fff;
}
footer a:visited { /* 訪問済みのリンク */
    color : #fff;
}
footer a:hover { /* ポイント時のリンク */
    color : #fff;
}
footer a:active { /* 選択中のリンク */
    color : #fff;
}

/* フッター内のロゴ */
.footer-logo {
    font-size : 15px;
    float : left;
    padding : 20px 0px; /* 内側の余白 */
}

/* 固定された上に戻るボタン */
#page_top {
  width : 50px;
  height : 50px;
  position : fixed;
  right : 0;
  bottom : 0;
  background : #ffe4b5;
  opacity : 0.6;
  border-radius : 50%;
  }

#page_top a {
  position : relative;
  display : block;
  width : 50px;
  height : 50px;
  text-decoration : none;
}
#page_top a::before {
  font-family : FontAwesome;
  content : '\f062';
  font-size : 25px;
  color : #fff;
  position : absolute;
  width : 25px;
  height : 25px;
  top : 0;
  bottom : 0;
  right : 0;
  left : 0;
  margin : auto;
  text-align : center;
}

/* 「クラブ別に探す」メインコンテンツの設定 */
.club-main {
    float : left; /* 横並び */
    margin : 0px 0px 0px 5px;
}

/* 応援歌の歌詞カード */
.lyrics {
    background-color: aliceblue; /* 歌詞カードの背景色 */
    width : 600px; /* 歌詞カードの横幅 */
    padding : 20px 20px; /* 内側の余白 */
    text-align: center;
    word-break: keep-all;  /* 単語の途中で改行させない */
    white-space: pre-line; /* 文章をそのまま表示、ボックスからはみ出させない */
}

/* 応援歌のm4aファイル */
.chant {
    width : 90%; /* 再生プレイヤーの横幅 */
}

/* メインコンテンツのリンク設定 */
a:link { /* 未訪問のリンク */
    color : #ff7f50;
}
a:visited { /* 訪問済みのリンク */
    color : #ff7f50;
}
a:hover { /* ポイント時のリンク */
    color : #ff7f50;
}
a:active { /* 選択中のリンク */
    color : #ff7f50;
}

.phone-nav {
        display: none !important; /* パソコンで「クラブ別に探す」を非表示 */
        background-color: rgba(255,255,255,0.9); /* ナビの背景色*/
        z-index: 999; /* 最前面に表示 */
}

/* スマートフォンだけ表示 */
@media screen and (max-width: 1280px) {  /* 表示領域が1280px以下の場合に適用するスタイル */
    .lyrics {
        background-color: aliceblue; /* 歌詞カードの背景色 */
        width : 250px; /* 歌詞カードの横幅 */
        padding : 20px 20px; /* 内側の余白 */
        word-break: keep-all;  /* 単語の途中で改行させない */
        word-wrap : break-word;  /* 文章をボックスからはみ出させない */
    }
    .phone-title {
         font-size: 20px; /* スマホ用のタイトルフォントサイズ */
    }
    .phone-nav {
        display: block !important; /* スマホで「クラブ別に探す」を表示 */
        margin-bottom: 10px; /* 「クラブ別に探す」の下側にマージン */
    }
    .phone-side {
        display: none !important; /* スマホでサイドバーを非表示 */
    }
}