/*　全てのページに適用される設定　*/
html {
    font-size: 15px;
    font-family: sans-serif;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0 0 0 0;
}
p, li, td {
    line-height: 20px;
}
a:link {
    color: rgb(2, 2, 190);
    text-decoration: none;
}
a:visited {
    color: rgb(0, 0, 190);
    text-decoration: none;
}
a:hover {
    color: orangered;
    text-decoration: underline;
}
a:active {
    color: orangered;
    text-decoration: underline;
}
img {
    max-width: 100%;
}

/*　全てのページに適用　－　ヘッダー　*/
.header {
    padding-top: 15px
}
.logo {
    padding-top: 3px;
    text-align: center;
    font-size: 300%;
    font-weight: bold;
    height: 70px;
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    background-image: url(../images/shirabe_band_1.jpg);
}
.nav ul {
    margin: 20px 0 0 0;
    list-style-type: none;          /* 黒丸マーカーなし*/
    padding: 0;
    display: flex;                  /* ボックスの表示：フレックスボックス */
    justify-content: center;        /* フレックスボックスの配置：中央揃え */
    gap: 15px;                      /* フレックスボックスの隙間：15px */
}
.nav ul li a {                      /* ナビゲーションに枠を追加 */
    position: relative;             /* 通常配置から相対的な位置を指定 */
    color: white;                 /* テキスト色：白 */
    padding: 3px 10px 0px 10px;     /* 文字の上下余白0,左右余白10px */
    transition: 0s ease-in-out;     /* 0s以外だと発振してしまう／top:以外に方法ないか？*/
    background-color: #1e50a2;
    filter: drop-shadow(0px 2px 4px #7a7a7a);/* 影（右方向、下方向、ばかし量）*/
    border-radius: 6px;             /* 角丸(R=6px)枠 */
}
.header a:link {
    color: white;
}
.header a:visited {
    color: white;
}
.header a:hover {
    color: #a2badf;
    text-decoration: none;          /* テキスト装飾なし */
}
.header a:active {
    text-decoration: none;          /* テキスト装飾なし */
}
.nav a:hover {
    color: white;
    top: -2.5px;    /* 上からの位置（なぜ transform が使えないのか？不明）*/
    box-shadow: 0 3px 6px rgb(136, 136, 136); /* 影（右方向、下方向、ばかし量）*/
}

/*　全てのページに適用　－　ヒーロー　*/
.hero {
    padding: 137px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    color: #FFFFFF;
    text-align: center;
    text-shadow: 
    1px  1px 0px black,
   -1px  1px 0px black,
    1px -1px 0px black,
   -1px -1px 0px black,
    1px  0px 0px black,
    0px  1px 0px black,
   -1px  0px 0px black,
    0px -1px 0px black;
}
.hero.index {
    padding: 55px 0 519px 0;
    background-image: url(../images/230205_concert_1_small.jpg);
}
.hero.profile {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}
.hero.concert {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}
.hero.schedule {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}
.hero.recruitment {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}
.hero.contact {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}
.hero.exclusive {
    padding: 200px 0px 20px 0px;
    background-image: url(../images/230205_concert_2_small.jpg);
}

/*　全てのページに適用　－　メイン　*/
main {
    margin: 40px auto 40px auto;
    max-width: 1000px;
}
main h2 {                               /* 大見出し */
    margin: 50px 0 20px 0;
    color: #ffffff;
    font-size: 1.3rem;
    padding: 3px 0 0 10px;              /* 文字の上余白2px,下余白0px,左余白10px */
    border-radius: 6px;                 /* 角丸(R=6px)枠 */
    background-color: #1e50a2;
}
.warning {                              /* 警告のための部分的に赤文字指定 <span class="warning"><span> で指定 */
    color: #ff0000;
}
.blinking{                              /* 注意喚起のために文字を点滅 <span class="blinking"><span> で指定*/
    color: red;
    font-style: italic;
    font-weight: bold;
    animation: blink 1s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*　全てのページに適用　－　フッター　*/
.gotop a {                              /* 『TOPへ戻る』*/
    display: block;                     /*  リンク反応をボックス全体に拡張*/
    height: 35px;
    text-align: center;
    color: #ffffff;
    padding-top: 6px;
    text-decoration: none;
    background-color: #5e5e5e;
}
.gotop a:hover{                         /* ポインタがリンク上にある場合【疑似クラス】 */
    background-color: #777777;
}
.copyright {
    margin-top: 0px;
    margin-bottom: 0;
    padding-top: 25px;
    padding-bottom: 25px;
    background-repeat: repeat-x;
    background-position: center;
    background-size: contain;
    background-image: url(../images/shirabe_band_1.jpg);
    color: #FFFFFF;
    text-align: center;
}

/*　個別のスタイル　*/
/*　index.html　*/

/* 更新情報 */
.update-info {                          /* 更新情報のセル間表示：１本線 */
    border-collapse: collapse;
}
.update-info th, .update-info td {      /* 更新情報のヘッダーセル／データセル */
    border-bottom: 1px solid #b6b6b6; /* 枠線下：太さ1px／実線／色指定 */
    padding: 3px 0;                     /* 余白：上下3px／左右0 */
}
.update-info th {                       /* 更新情報のヘッダーセル */
    text-align: left;                   /* 水平位置：左寄せ*/
    vertical-align: center;             /* 垂直位置：中央寄せ */
}
.update-info-1 {                        /* 更新情報の1列目＜更新日＞ */
    width: 130px;                       /* 幅：110px */
}
.update-info-2 {                        /* 更新情報の2列目＜更新内容＞ */
    width: 870px;                       /* 幅：890px */
}

/* プロフィール */
.profile-position {                     /* プロフィールの役職名＜指揮者／ピアニスト＞ */
    color: #1215ce;
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 0;
}
.profile-info th {                      /* プロフィールのヘッダーセル */
    text-align: left;                   /* 水平位置：左寄せ */
}
.profile-info td {                      /* プロフィールのデータセル */
    vertical-align: top;                /* 垂直位置：一番上 */
}
.profile-info-1 {                       /* プロフィールの1列目＜写真＞ */
    width: 170px;                       /* 幅：170px */
}

/* 演奏会 */
.concert-info{                          /* 演奏会のセル間表示：１本線 */
    border-collapse: collapse;
}
.concert-info th, .concert-info td {    /* 演奏会のヘッダーセル、データセル */
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 8px 10px;                  /* ボックス内側上下左右余白：上下8px/左右6px */
}
.concert-info th {                      /* 演奏会のヘッダーセル */
    padding: 3px 10px;                  /* ボックス内側上下左右余白：上下3px/左右6px */
}
.concert-info th {                      /* 演奏会のヘッダーセル */
    background-color: #797979;        /* 背景色：グレー */
    color: #ffffff;                   /* 文字色：白色 */
}
.concert-info td:nth-of-type(1) {       /* 演奏会のデータセルの左から1番目＜日付＞ */
    text-align: center;                 /* 水平位置：中央寄せ */
}               
.concert-info-1 {                       /* 演奏会の1列目＜日付＞ */
    width: 150px;                       /* 幅：150px */
}
.concert-info-2 {                       /* 演奏会の2列目＜内容＞ */
    width: 850px;                       /* 幅：850px */
}
.concert-info td.concert-info-4::first-line {   /* 演奏会のデータセルの1行目 */
    font-weight: bold;                          /* 文字太さ：太字 */
    font-size: 16px;                            /* 文字サイズ：16px */
    color: #1215ce;                           /* 文字色：青色 */
}

/* 練習日程 */
.schedule-info{                         /* 練習日程のセル間表示：１本線 */
    border-collapse: collapse;
}
.schedule-info th, .schedule-info td {  /* 練習日程のヘッダーセル、データセル */
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 8px 10px;                  /* ボックス内側上下左右余白：上下8px/左右6px */
}
.schedule-info th {                     /* 練習日程のヘッダーセル */
    padding: 3px 0 3px 0;               /* ボックス内側上下左右余白：上下3px/左右0 */
    background-color: #797979;        /* 背景色：青色 */
    color: #ffffff;                   /* 文字色：白色 */
}
.schedule-info td:nth-of-type(1) {      /* 練習日程のデータセルの左から1番目（＝練習日） */
    text-align: center;                 /* 文字位置：中央寄せ */
}
.schedule-info td:nth-of-type(3) {      /* 練習日程のデータセルの左から3番目（＝時間） */
    text-align: center;                 /* 文字位置：中央寄せ */
}
.schedule-info-1 {                      /* 練習日程の練習日の列幅 */
    width: 170px;
}
.schedule-info-2 {                      /* 練習日程の会場の列幅 */
    width: 250px;
}
.schedule-info-3 {                      /* 練習日程の時間の列幅 */
    width: 170px;
}
.schedule-info-4 {                      /* 練習日程の備考の列幅 */
    width: 410px;
}

/* 練習会場 */
.access-info th, .access-info td {      /* 練習会場 */
    text-align: left;                   /* 左寄せ */
    vertical-align: top;                /* 上寄せ */
}
.access-info th {                       /* 練習会場のヘッダーセル */
    padding-bottom: 10px;
}
.access-info-1 {                        /* 練習会場の1列目＜地図＞ */
    width: 500px;
}
.access-info-2 {                        /* 練習会場の2列目＜情報＞ */
    width: 500px;
}

/* アクセス制限 */
.restriction {
    text-align: center;
}

/* 団員専用ページ */
.tab ul {                               /* メニュータブ */
    margin: -15px 0 0 0;
    list-style-type: none;              /* 黒丸マーカーなし*/
    padding: 0;
    display: flex;                      /* ボックスの表示：フレックスボックス */
    justify-content: center;            /* フレックスボックスの配置：中央揃え */
    gap: 15px;                          /* フレックスボックスの隙間：15px */
}
.tab ul li a {                          /* メニュータブに枠を追加 */
    position: relative;                 /* 通常配置から相対的な位置を指定 */
    color: white;                     /* テキスト色：白 */
    padding: 3px 10px 0px 10px;         /* 文字の上下余白0,左右余白10px */
    transition: 0s ease-in-out;         /* 0s以外だと発振してしまう／top:以外に方法ないか？*/
    background-color: #1e50a2;
    filter: drop-shadow(0px 2px 4px #7a7a7a);/* 影（右方向、下方向、ばかし量）*/
    border-radius: 6px;                 /* 角丸(R=6px)枠 */
}
.tab a:hover {                          /* メニュータブにカーソルが乗った時 */
    top: -2.5px;                        /* 上からの位置（なぜ transform が使えないのか？不明）*/
    box-shadow: 0 3px 6px rgb(136, 136, 136); /* 影（右方向、下方向、ばかし量）*/
    text-decoration: none;              /* テキスト装飾なし */
}
.major-item {                           /* 大項目『サマーコンサート』*/
    margin-bottom: -25px;
}
.news ul li {                           /* 中項目『タイムスケジュール／打ち上げ』 */
    padding: 15px 0 3px 0;
    margin-left: -10px;
}
.samakon-info {                          /* サマーコンサートのセル間表示：１本線 */
    border-collapse: collapse;
}
.samakon-info th, .samakon-info td {    /* サマーコンサートのヘッダーセル、データセル */
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 5px 10px 5px 10px;         /* ボックス内側上下左右余白：上下8px/左右6px */
}
.samakon-info-1 {                       /* サマーコンサートの列1の列幅 */
    width: 135px;
}
.samakon-info-2 {                       /* サマーコンサートの列2の列幅 */
    width: 865px;
}
.samakon-info {
    margin-left: -5px;
}
.record-info {                          /* ＜＜＜ 練習記録 ＞＞＞ */
    border-collapse: collapse;          /* 練習記録のセル間表示：１本線 */
    margin-left: 35px;
}
.record-info th, .record-info td {      /* 練習動画のヘッダーセル、データセル */
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 5px 10px 5px 10px;         /* ボックス内側上下左右余白：上下5px/左右10px */ 
}
.record-info th {                      /* 演奏会のヘッダーセル */
    background-color: #797979;        /* 背景色：グレー */
    color: #ffffff;                   /* 文字色：白色 */
}
.record-info td:nth-of-type(1) {        /* 演奏記録のデータセルの左から1番目＜日付＞ */
    text-align: center;                 /* 水平位置：中央寄せ */
}
.record-info-1 {
    width: 180px;
}
.record-info-2 {
    width: 780px;
}
.pushbutton ul {                        /* 押しボタン */
    margin: 10px 0 -10px 0;
    list-style-type: none;              /* 黒丸マーカーなし*/
    padding: 0;
    display: flex;                      /* ボックスの表示：フレックスボックス */
    justify-content: left;              /* フレックスボックスの配置：中央揃え */
    gap: 15px;                          /* フレックスボックスの隙間：15px */
}
.pushbutton ul li a {                          /* メニュータブに枠を追加 */
    position: relative;                 /* 通常配置から相対的な位置を指定 */
    color: white;                     /* テキスト色：白 */
    padding: 3px 10px 0px 10px;         /* 文字の上下余白0,左右余白10px */
    transition: 0s ease-in-out;         /* 0s以外だと発振してしまう／top:以外に方法ないか？*/
    background-color: #a21e60;
    filter: drop-shadow(0px 2px 4px #7a7a7a);/* 影（右方向、下方向、ばかし量）*/
    border-radius: 6px;                 /* 角丸(R=6px)枠 */
}
.pushbutton a:hover {                   /* メニュータブにカーソルが乗った時 */
    top: -2.5px;                        /* 上からの位置（なぜ transform が使えないのか？不明）*/
    box-shadow: 0 3px 6px rgb(136, 136, 136); /* 影（右方向、下方向、ばかし量）*/
    text-decoration: none;              /* テキスト装飾なし */
}
.translation ul li {                    /* ◆◆◆ 歌詞対訳 ◆◆◆ 中見出し（＝曲名）*/
    padding: 0 0 3px 0;
    margin-left: -20px;
}
.translation-info {
    border-collapse: collapse;          /* 音楽情報のセル間表示：１本線 */
    margin-bottom: 20px;
    margin-left: -5px;
}
.translation-info th, .translation-info td {
    border: 1px solid #ffffff;        /* ボックス上下左右：太さ/線種/色 */
}
.translation-info-1 {
    width: 500px;
}
.translation-info-2 {
    width: 500px;
}

.event ul li {                           /* ◆◆◆ 音楽情報 ◆◆◆ 中見出し（＝音楽情報名） */
    padding: 0 0 3px 0;
    margin-left: -20px;
}
.event p {
    border-collapse: collapse;
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 8px 10px 8px 10px;         /* ボックス内側上下左右余白：上下8px/左右6px */
    margin-top: 3px;
    margin-left: -5px;
}
.event-info {                           
    border-collapse: collapse;          /* 音楽情報のセル間表示：１本線 */
    margin-bottom: 20px;
}
.event-info th, .event-info td {        /* 音楽情報のヘッダーセル、データセル */
    border: 1px solid #b6b6b6;        /* ボックス上下左右：太さ/線種/色 */
    padding: 5px 0 5px 10px;            /* ボックス内側上下左右余白：上下8px/左右6px */
}
.event-info-1 {                         /* 音楽情報の列1の列幅 */
    width: 130px;
}
.event-info-2 {                         /* 音楽情報の列2の列幅 */
    width: 870px;
}
.event-info {
    margin-left: -5px;
}

  /*　menu.html　*/
.items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}
.items p {
    margin: 5px 0;
    line-height: 1.3;
}

/* 団員募集 */
.recruitment-info th, .recruitment-info td {    /* 募集要項のヘッダーセル、データセル */
    vertical-align: top;                /* 上寄せ */
}
.recruitment-info th {                  /* 募集要項のヘッダーセル */
    text-align: left;                  /* 右寄せ */
}
.recruitment-info td {                  /* 募集要項のデータセル */
    text-align: left;                   /* 左寄せ */
    padding-bottom: 10px;
}
.recruitment-info-1 {                   /* 募集要項の1列目＜項目＞ */
    width: 112px;   /* 全幅を縮小した場合も112pxを保持するようにモバイル対応を追加 */
}

/* お問い合わせ */
.contact-item {                         /* お問い合わせの項目 */
    color: #1215ce;
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 0;
}
.contact p {
    margin-top: 5px;
}

/* モバイル対応 */
@media(max-width: 1100px) {             /* 全幅が1100px以下になった場合 */
    main {
        padding: 0 2%;
    }
    .recruitment-info th:first-child {  /* 募集要項の1列目＜項目＞ */
        width: 112px;
    }
}

@media(max-width: 767px) {              /* 全幅が767px以下になった場合 */
    .nav ul {
        flex-wrap: wrap;
        gap: 15px;
    }
    main {
        padding: 0 2%;
    }

    /* index.html */
    .hero.index {
        padding-top: 50px;    
    }

    /* menu.html */
    .items {
        grid-template-columns: 1fr 1fr;
    }
    .recruitment-info th:first-child {  /* 募集要項の1列目＜項目＞ */
        width: 112px;
    }
}