@charset "UTF-8";

/*
------共通部分-----
*/
html { /*閲覧するデバイスで設定されている文字サイズになるように100%指定*/
    font-size: 100%;
}

body { /*Googleフォントで読み込んだフォントの指定*/
    font-family: "Inter", "Noto Sans JP";
}

a { /*<a>タグにデフォルトの下線を表示しない*/
    text-decoration: none;
}

img { /*<img>タグが親要素よりも大きくなるのを防ぐ*/
    max-width: 100%;
    max-height: 100%;
}

.pagetitle { /*Home以外の各ページのタイトル部分*/
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 120px; /*各ページ内容がヘッダーと被らないための上余白*/
}

span.horizontal_line { /*装飾用の横線*/
    margin: 5px 0;
    display: block;
    height: 2px;
    width: 85%;
    content: ""; 
    background-color: #000;
}

.bottom_line { /*下線を引く設定*/
    border-bottom: #000 solid 1px;
}

.display_mobile_inline {
    display: inline;
}

.display_mobile_block {
    display: block;
}

.display_mobile_inline-block {
    display: inline-block;
}

.display_pc_inline {
    display: none;
}

.display_pc_block {
    display: none;
}

.display_pc_inline-block {
    display: none;
}

/*
-----ヘッダー-----
*/
.page-header {
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: rgba(250,250,250,0.9);
    margin-bottom: 20px;
    max-height: 80px;
    width: 100%;
    z-index: 98;
}

.logo_img { /*ヘッダー中のロゴの表示設定*/
    max-height: 60px;
}

/*
-----ハンバーガーメニュー(モバイル端末用)-----
*/

.drawer_hidden {
    display: none;
}

.drawer_open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*↓常に手前に表示させる↓*/
    position: relative;
    z-index: 100;
}

/*擬似クラスで線を3本作る*/
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #333;
    transition: 0.3s;
    position: absolute;
}

/*線の位置を調整して｢三｣にする*/
.drawer_open span:before {
    bottom: 8px;
}

.drawer_open span:after {
    top: 8px;
}

/*アイコンがクリックされたら｢三｣が｢✕｣になるようにする*/
#drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
}

#drawer_input:checked ~ .drawer_open span:before {
    bottom: 0;
    transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span:after {
    top: 0;
    transform: rotate(-45deg);
}

/*メニューの内容(開いた時に見える部分)*/
.nav_content {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 100%; /*開いていない時は画面外に出しておく*/
    z-index: 99;
    background: #EEE;
    transition: 0.3s;
}

#drawer_input:checked ~ .nav_content {
    left: 0; /*開いたら画面内に戻ってくる*/
}

.nav_list {
    list-style: none; /*<ul>タグの黒丸を表示しない*/
    font-size: 1.3rem;
/*    padding-top: 1rem;*/
}

#menu_title {
    font-weight: bold;
	margin: 0.5rem 0;
    padding-left: 0.5rem;
	font-size: 1.3rem;
}

.nav_item {
    padding: 0.5rem 1rem;
    border: 1px;
    border-color: #777;
    border-style: solid none none none;
}

.nav_item a {
    color: #000;
}

.menu_external_link { /*メニューの外部リンクアイコン部分の設定*/
    height: 19px;
    margin: 0 5px;
}

.youtube_channel_name {/*メニューのYouTubeリンクの文字列(チャンネル名)部分の設定*/
    color: #000;
}

.here a {/*現在表示しているページを強調表示*/
    color: #C9252B;
    border-bottom: 2px solid #C9252B;
}

/*モバイル端末ではPC用メニューを非表示*/
@media (max-width: 979.9px) {
.nav_pc {
    display: none;
} }

/*
-----フッター-----
*/
.page_footer {
    margin-top: 5rem;
}

#footer_name { /*フッターの｢Essenz Philharmoniker｣の表示設定*/
    margin:0 10px;
}

.page_footer p { /*｢現在、当団への～｣の表示設定*/
    margin:0 10px;
}

.form_link { /*Googleフォームのリンクの設定*/ 
    color: #000;
}

.form_external_link_icon {
    width: 0.8rem; /*そのまま表示するとでかすぎるので調整*/
    margin: 0 2px;
    position: relative;
    top: 0.1rem;
}

.footer_logos { /*フッターのSNSのロゴ全体の表示設定*/
    display: flex;
    justify-content: center;
}

.SNS_logo { /*フッターのSNSのロゴ各々の表示設定*/
    height: 30px;
    margin: 20px 15px 0 15px;
}

.copyright { /*フッターの著作権表示の表示設定(ページの一番下なので少し暗くしています)*/
    background-color: #EEE;
    padding: 2rem 0;
    margin: 20px 0 0 0;
    text-align: center;
}

/*
-----Home-----
*/
.cover { /*共通のカバー設定*/
    background-size: cover; /*範囲を画面いっぱいに伸ばす*/
    background-position: center bottom;
    width: 100%;
}

.cover_home { /*ホーム画面のカバー設定*/
    background-image: url(../images/background1.jpg);
    background-position: center top;
    padding-top: 120px; /*ページ内容がヘッダーと被らないための上余白*/
    padding-bottom: 50px;
}

#next_concert {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 10px auto;
}

.next_concert_flyer {
    max-height: 420px;
    display: block;
    margin-bottom: 25px
}

.next_concert_info { /*ホーム画面の次回演奏会の情報の四角全体の設定*/
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 0;
    width: 297px;
    height: 420px;
    text-align: center;
}

.next_concert_info p {
    font-weight: 500;
}

#next_concert_date-time {
    font-weight: 700;
    font-size: 110%
}

.next_concert_info h2 {
    font-size: 200%;
}

#next_concert_program {
    border-top: solid #000 2px;
    border-bottom: solid #000 2px;
    display: inline-block;
    font-weight: 650;
    font-size: 85%;
}

#next_concert_fee {
    font-weight: 450;
    font-size: 95%;
}

.teket_link { /*teketリンクボタンの位置の設定*/
    text-align: center;
}

.teket_link a { /*teketリンクボタンの中身の設定*/
    display: inline-block;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    background-color: #fff;
    border: solid 2px #C9252B;
    padding: 0.2rem 0.5rem;
    transition: 0.2s; 
}

.teket_link img { /*外部リンクアイコンの表示設定*/
    width: 1.1rem; /*そのまま表示するとでかすぎるので調整*/
    position: relative;
    top: 0.2rem; /*文字より上に表示されるので微調整*/
    transition: 0.2s;
}

/*
-----About-----
*/
.about { /*Aboutページ全体の設定*/
    padding: 0 0.5rem;
}

#photo_orchestra { /*オケの写真(クレジット含む)の設定*/
    width: 85%;
    display: block;
    margin: 1rem auto 0 auto;
}

#photo_orchestra_copyright { /*オケの写真のクレジット部分の設定*/
    text-align: center;
    font-size: 0.9rem;
    margin: 0.3rem 0 0.9rem 0;
}

/*
-----History-----
*/
.history { /*Historyページ全体の設定*/
    padding: 0 0.5rem;
    font-size: 0.8rem;
}

#history_horizontal_line {
    width: 100%;
    margin: 0 auto;
}

#concert_external_link {
    height: 18px;
    position: relative;
    top: 0.2rem;
    margin-right: 0px;
}

#search_input { /*検索ボックスの設定*/
    border: solid thin;
    border-radius: 3px;
    height: 2rem;
}

#past_concerts_table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5px;
}

.each_concert { /*各演奏会の表示設定*/
    display: grid;
    grid-template-columns: 110px 80px 80px 80px;
    grid-template-rows: 25px 40px 40px 25px 1fr 25px;
    margin: 30px 0;
}

.each_concert ol{ /*各演奏会の<ol>タグ(曲目表示に使用)の数字を表示しない*/
    list-style-type: none;
}

.concert_name { /*各演奏会の名前部分(｢第◯回演奏会｣など)の表示設定*/
    grid-column: 1 / 2;
    grid-row: 1 / 2 ;
    font-weight: bold;
}

.concert_date { /*各演奏会の日付の表示設定*/
    grid-column: 2 / 4;
    grid-row: 1 / 2 ;
    padding-top: 3px;
}

.concert_place { /*各演奏会の開催場所の表示設定*/
    grid-column: 1 / 4;
    grid-row: 2 / 3 ;
}

.concert_flyer1 { /*各演奏会のフライヤー画像の表示設定*/
    grid-column: 4 / 5;
    grid-row: 1 / 5 ;
}

.concert_flyer2 { /*各演奏会のフライヤー画像の表示設定*/
    grid-column: 4 / 5;
    grid-row: 5 / 7 ;
}

.concert_conductor { /*各演奏会の指揮者の表示設定*/
    grid-column: 1 / 4;
    grid-row: 3 / 4 ;
}

.concert_program { /*各演奏会の曲目の設定*/
    grid-column: 1 / 4;
    grid-row: 4 / 6;
}

.concert_panphlet {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
}

.concert_program li { /*youtubeロゴの規約対策 ロゴの上下の空間を確保*/
    line-height: 32px;
}

.concert_youtube_link { /*youtubeに動画がある曲の文章部分の表示設定*/
    color: #000
}

.concert_youtube_link img { /*youtubeに動画がある曲のアイコン部分の表示設定*/
    height: 18px;
    position: relative;
    top: 0.3rem;
    margin-right: 12px; /*アイコンの右の空間を確保*/
}

/*
-----404 Not Found-----
*/
.not_found {
    padding-top: 200px;
    text-align: center;
}


/*
-----PC,タブレット横置き用-----
*/
@media (min-width: 980px) {

.page-header {
    max-height: 100px;
}
    
.logo_img { /*ヘッダー中のロゴの表示設定*/
    max-height: 70px;
    max-width: 320px;
    padding-left: 0.5rem;
}

/*横線*/
span.horizontal_line {
    margin: 5px 0;
    display: block;
    height: 2px;
    width: 400px;
    content: ""; 
    background-color: #000;
}

.display_mobile_inline {
    display: none;
}

.display_mobile_block {
    display: none;
}

.display_mobile_inline-block {
    display: none;
}

.display_pc_inline {
    display: inline;
}

.display_pc_block {
    display: block;
}

.display_pc_inline-block {
    display: inline-block;
}

/*
-----メニュー部分-----
*/
.nav {
    display: none; /*PCではハンバーガーメニューを非表示*/
}

.nav_pc {
    flex-grow: 1; /*ヘッダー内でメニューがエセンツロゴ以外の部分めいっぱいに広がるよう設定*/
    padding-left: 10px;
}

.nav_list_pc {
    list-style: none; /*<ul>タグの黒丸を表示しない*/
    display: flex;
    justify-content: flex-end;
    gap: 1.7rem;
    font-size: 1.3rem;
    padding-right: 2rem;
}

.nav_item_pc a {
    color: #000;
    transition: 0.2s;
}

.youtube_logo_pc { /*PC版メニューのYouTubeリンクのアイコン部分の設定*/
    height: 23px;
    position: relative;
    margin: 0 5px 0 5px;
}

.youtube_channel_name_pc { /*PC版メニューのYouTubeリンクの文字列(チャンネル名)部分の設定*/
    vertical-align: 4px;
    font-size: 22px;
}

.here a { /*現在表示しているページを強調表示*/
    color: #C9252B;
}

/*
-----Home-----
*/

/*※次回演奏会のフライヤーや開催情報のレイアウト(表示位置)は、横幅980～1499pxと1500px以上で更に
2通りに分けて設定している。直下の記述は、それら2通りで共通(=980px以上で共通)のもの。*/

#next_concert {
    display: flex;
    justify-content: center;
    margin: 10px auto;
}

.next_concert_flyer {
    margin-bottom: 0;
}

.next_concert_info {
    text-align: left;
}

#next_concert_title { /*演奏会の名前とteketリンクボタンを横並べにするために設定*/
    display: flex;
}

.teket_link { /*teketリンクボタンの位置の設定*/
    margin:auto 0 0 45px;
}

/*
-----About-----
*/
.cover_about {
    max-width: 1200px;
    margin: auto;
}

.about { /*Aboutページ全体の設定*/
    padding: 0 0;
}

#photo_orchestra {
    max-width: 784px;
    display: block;
    margin: 1rem auto 0 auto;
}

/*
-----History-----
*/
.history {
    font-size: 1rem;
}

.cover_history {
    max-width: 1200px;
    margin: auto;
}

.each_concert { /*各演奏会の表示設定*/
    display: grid;
    grid-template-columns: 150px 80px 150px 130px;
    grid-template-rows: 30px 50px 55px 80px 1fr 30px;
    margin: 50px 0;
}

/*
-----Contact-----
*/

.cover_contact {
    max-width: 1200px;
    margin: auto;
}

}

/*
-----Home----- 次回演奏会情報の細かい設定
*/

/*タブレット横置き、小さいノートPC*/
@media (min-width: 980px) and (max-width: 1199.9px) {

.next_concert_info {
	/*次回のフライヤー画像がない時期は↓のmargin-leftをコメントアウト*/
    /* margin-left: 5%; */
    padding: 1rem 1.5rem 0 1.5rem;
    width: 600px;
    height: 380px;
}

.next_concert_flyer {
    max-height: 370px;
}

.next_concert_info p {
    font-size: 115%;
}

#next_concert_date-time {
    font-weight: 700;
    font-size: 130%;
}

.next_concert_info h2 {
    font-size: 260%;
}

#next_concert_program {
    font-size: 105%;
}

#next_concert_fee {
    font-weight: 450;
    font-size: 110%;
}

}

/*標準のノートPC、デスクトップPC*/
@media (min-width: 1200px) {

.next_concert_info {
	/*次回のフライヤー画像がない時期は↓のmargin-leftをコメントアウト*/
    /* margin-left: 6%; */
    padding: 1rem 2rem 1rem 2rem;
    width: 780px;
    height: 430px;
}

.next_concert_flyer {
    max-height: 430px;
}

.next_concert_info p {
    font-size: 140%;
}

#next_concert_date-time {
    font-weight: 700;
    font-size: 155%;
}

.next_concert_info h2 {
    font-size: 280%;
}

#next_concert_program {
    font-size: 130%;
}

#next_concert_fee {
    font-weight: 450;
    font-size: 130%;
}

}

/*
-----ホバー可能端末用(マウス、トラックパッド)-----
*/
@media (hover: hover) {

.nav_item_pc a:hover {
    color: #C9252B;
    transition: 0.2s;
}

.teket_link a:hover {
    background-color: #C9252B;
    color: #FFF;
    font-weight: bold;
    border: solid 2px #C9252B;
    padding: 0.2rem 0.5rem;
    transition: 0.2s;
}

.teket_link a:hover #external_link_icon{
    filter: invert(100%);
    transition: 0.2s;
}
}