/*PC用
******************************/
html{
        margin:0;
        padding:0;
        height: 100%;
        width:100%;
        background:url(image/background_score_A_light.gif) repeat fixed;
        /*font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;*/
}


body{
		overflow-x: hidden;
        font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
		width:100%;
		height: auto;
		margin: 0 auto;
		text-align:center;
		background-color:;
		scrollbar-arrow-color:#603467;
		scrollbar-face-color:#e0c0fa;
		scrollbar-hightlight-color:#fdd9f8;
		scrollbar-shadow-color:#603467;
		scrollbar-3dlight-color:#f97de7;
		scrollbar-darkshadow-color:#48264d;
		scrollbar-track-color:;
}


a,a:link{color:#0044cc;} /* 未訪問 青 */
a:visited{color:#384D98;} /* 訪問済 濃い青 */
a:hover{color:cadetblue;} /* マウスオーバー 青緑 */
a:active{color:gray;} /* クリック グレー */



#topbar{
        background-color: plum;
        height: 22px;
        margin-top: ;
        text-align: right;
        font-size: 70%;
        color: #ffffff;
}
#topbar a{
        color: #ffffff;
        text-decoration: none;
}



header{/*合唱団名称ほか headerタグ採用に伴いIDのbox_topやめる*/
		text-align: left;
		vertical-align: middle;
        margin: 0;
        width: 100%;
        padding: 0;
        background-color: #ffffff;
        position: relative;
        height: 162px;/*topbar分プラス22*/
}
/*#box_top td{
        margin: 0;
        padding: 0;
        display: inline;
}***/
#konsei_logo_square{/*正方形の合唱団ロゴ*/
        margin: 0 auto;
        width: 125px;
        /*float: left;*/
        position:absolute;
        top: 24px;/*topbar分プラス22*/
        left: 10px;
        border: none;
}
header HR{/*合唱団名称の下のHR*/
        background:url(image/line_music.png);
        height: 15px;
        border: none;
        width: 100%;
        margin: 0;
        position: absolute;
        bottom:5px;
        right: 10px;
}
header h1{/*旧#name_A*/
        font-size: 300%;
        font-weight: bold;
        color: #384D98;
        display: block;
        padding:10px 0 0 0 ;
        font-family: monospace;
        margin: 0 0 0 0;
        line-height: 1.5;
        position: absolute;
        top: 32px;/*topbar分プラス22*/
        left: 150px;
}
header h2{/*旧#name_B*/
	font-size: 125%;
	font-weight: bold;
	color: #384D98;
	display: block;
	padding:0 0;
	margin: 0;
	line-height: 1.0;
	position: absolute;
	top: 102px;/*topbar分プラス22*/
	left: 150px;
}

#drawer_menu{/*ハンバーガーメニュー追加*/
	position:absolute;
	bottom: 75px;
	right: 20px;
}
#drawer_menu span{
	text-align: center;
}





.dropmenu{
        zoom: 1;
        list-style-type: none;
        width: 96%;
        margin: 5px auto 5px;/*5px auto 30pxからボトムを変更*/
        padding: 0;
}
.dropmenu:before, .dropmenu:after{
        content: "";
        display:table;
}
.dropmenu:after{
        clear: both;
}
.dropmenu li{
        position: relative;
        width: 16%;
        float: left;
        margin: 0;
        padding: 0;
        text-align: center;
        list-style-type: none;
}
.dropmenu li a{
        display: block;
        margin: 0;
        padding: 15px 0 11px;
	background-image:url(image/background_renga_A_light.jpg);
/*        color: #16160e;*/
        font-size: 96%;
        letter-spacing: 0.1em;
        font-weight: bold;
        color: #674131;
        line-height: 1;
        text-decoration: none;
}
.dropmenu li ul{
        list-style-type: none;
        position: absolute;
        z-index: 9999;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
}
.dropmenu li ul li{
        width: 100%;
}
.dropmenu li ul li a{
        padding: 13px 15px;
        border-top: 1px solid #ffffff;
        text-align: left;
        font-weight: normal;
        font-size: 85%;
        color: #ffffff;
        letter-spacing: 0.2em;
}
.dropmenu li:hover a{
	background-image: url(image/background_renga_A_dark.jpg);
        color: #ffffff;
}
.dropmenu li a:hover{
	background-image: url(image/background_renga_A_dark.jpg);
        color: #ffffff;
}
.dropmenu li li:hover a {
	background: #d9333f;
        color: #ffffff;
}


#normal li ul{
        display: none;
}
#normal li:hover ul{
        display: block;
}










#box_photo_1{/*音楽会写真 トップページ用*/
	margin: 15px auto 10px;
        width: 90%;
}
#box_photo_2{/*音楽会写真 その他のページ用*/
	margin: 15px auto 10px;
        width: 100%;
}


#all_menu{
        display: none;
}



/*以下ハンバーガーメニューとナビゲーションドロワーを試みる20190726はにわまんどっとこむコピペ*/

#drawer-checkbox {
	display: none;
}
#drawer-icon {
	cursor: pointer;
	display: inline-block;
	height: 50px;
	position: relative;
	width: 50px;
}
#drawer-icon span{
	background: #384D98;/**#333から変更*****/
	border-radius: 4px;
	display: block;
	height: 16%;
	left: 50%;
	margin: -8% 0 0 -42%;
	position: absolute;
	top: 50%;
	transition: all 0.3s ease-in-out;
	width: 84%;
}
#drawer-icon span::before,
#drawer-icon span::after{
	-webkit-transform: rotate(0);
	background: #384D98;/**#333から変更*****/
	border-radius: 4px;
	content: "";
	display: block;
	height: 100%;
	left: 50%;
	margin: -8% 0 0 -50%;
	position: absolute;
	top: 50%;
	transform: rotate(0);
	transition: all 0.3s ease-in-out;
	width: 100%;
}
#drawer-icon span::before {
  margin-top: -38%;/*38から数字をかえてみた-＞38に戻した*/
}
#drawer-icon span::after {
  margin-top: 19%;
}
#drawer-checkbox:checked ~ #drawer-icon span {
  background: rgba(51, 51, 51, 0);/*透明度を0にする事で真ん中の線を消して×を実現してる*/
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after{
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#drawer-content{
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40; /*あとで他の数字にしてみること*/
	width: 250px; /*あとで他の数字にしてみること250pxから変えてみた*/
	height: 100%;
	background: #fff;
	opacity: 0.95;/*要チェック*/
	background-image: url(image/background_gclef.png);/*#fffから変更*/
	background-position: 0 0;/*追加*/
	background-repeat: no-repeat;/*これは自分で追加*/
	transition: all 0.3s ease-in-out 0s;
	transform: translateX(-100%); /*動きの確認のために他の数字を試してみること*/
}


#menu{/*これは自分で追加menuの文字画像*/
	width: 150px;
	padding-left:50px;
}
#drawer-content ul{/*これは自分で追加*/
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
#drawer-content li{/*これは自分で追加*/
	text-align: left;
	margin-left: 10px;
	padding-left: 10px;
}
#drawer-content li::after{/*これは自分で追加*/
	content: "";
	border:1px #384D98 solid;
	display: block;
	margin: 0 10 0 0;
}
#drawer-content li a{/*これは自分で追加*/
	text-decoration: none;
	color: #384D98;
	font-size: 90%;
}
#drawer-content li span{/*これは自分で追加*/
	color: #7a8199;
	font-size: 75%;
}
#box_menu_2 LI a:hover{/*これは自分で追加*/
	background-color: cadetblue;
	color: white;
}
#counter{/*これは自分で追加*/
	text-align:left;
	padding: 10px 0 0 20px ;
	font-size: 70%;
	color: gray;
}
#box_logo{
	position: relative;	
}
#konsei_logo_rectangle_1{/*これは自分で追加*/
	position: absolute;
	left: 10px;
	width: 100px;
}
#fb_logo{/*これは自分で追加*/
	position: absolute;
	left: 130px;
	top: 15px;
	width: 40px;
}


#drawer-checkbox:checked ~ #drawer-content {
	transform: translateX(0);
	box-shadow: 6px 0 25px rbga(0,0,0,0.16); /*α透明度は0~1／0.16から変えてみた*/
}

#drawer-close{/*分からない-checkboxを隠してるだけか？*/
	display: none;
	position: fixed;
	z-index: 39;
	top: 0;
	left: 0;
	width: 100%;/*ためしに100から数字を小さくしてみた-＞100％に戻した*/
	height: 100%;
	background:  #000;
	opacity: 0;
	transition: all 0.3s ease-in-out 0s;	
}
#drawer-checkbox:checked ~ #drawer-close {/*分からない*/
	display: block;
	opacity: 0.3;/*ためしに0.3から大きな数字にしてみた結果メニューが表示された時の本文の透明度だとわかる*/
}

/****ハンバーガーメニューここまで*****/



main{/*各ページコンテンツ用 旧#box_contents*/
        margin:0 5px;/*旧デザインmargin-left 25%から変更*/
        width: auto;
}


main h1{/*トップページ以外の各ページタイトル文字 旧#box_title*/
        /*margin-left: 25%;
        margin-top: 25px;*/
        margin: 0px auto 0 35px;/*margin-topを10から0へ*/
        width: 95%;
        padding: 0;
        color: #384D98;
        font-size: 120%;
        font-weight: bold;
        text-align: left;
        border-bottom: 5px solid #384D98;
}
main h1 div{/*ピアニスト紹介用*/
		display:inline;
}


/**new新着記事用～ここから～
**/
.new{
	position:;/*relativeをはずしてみた*/
	background-color:;
	width:;
}
.new::before{
	display:;
	position:absolute;/*absoluteをはずしてみた*/
	content: "NEW";
	color:red;
	background-color:;
	width:;
}





/*トップページ用～ここから～
*****/


#box_home_frame{
        width: 100%;
        position: relative;/*新デザインで採用*/
}

#box_home_top{
        width: 65%;/*旧デザイン60％から変更*/
        text-align: left;
        padding: 0em 0em 0em 1em;
        margin:;
        /*float:left;　旧デザインのfloat廃止*/
        font-size: 110%;
}

#box_home_top img{
        width: 42%;
        float: left;/*旧デザインrightからleftに変更*/
        margin: 10px 10px 0 0;
}

#box_home_right{
        width: 30%;/*旧デザイン35％から変更*/
        /*float: right;　旧デザインのfloat廃止*/
        margin: 500px 5px 0 0;/*20270716レイアウトが崩れるのでとりあえずトップに500ｐｘ*/
        position: absolute;/*新デザインで採用*/
        left: 68%;/*新デザインで採用*/
        top: 0;/*新デザインで採用*/   
}


.box_new{
        margin: 5px;
        font-size: 70%;
        color: #333333;
        background-color: white;
        width: auto;
        height: auto;
        text-align: left;
		border: 3px solid gainsboro;
		border-radius: 10px;
        box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        -webkit-box-shadow: 0 10px 6px -6px #777;
        behavior: url("CSS/PIE.htc");
}
.box_new p{
        padding: 0px;
        margin: 10px 10px;
        font-size: x-small;
        color:aqua;
}
.box_new UL LI{
        margin-left: -12px;
}
.box_new HR{
        margin: 10px;
}

.box_music_1{
        margin: 0 3px 0 0;
        color: white;
        font-size: 80%;
        text-align: center;
        background-image: url("image/background_blue_water.jpg");
        -moz-background-size:cover;
        background-size:cover;
		border: 2px solid #384D98;
		border-radius: 10px;
        box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        -webkit-box-shadow: 0 10px 6px -6px #777;
        behavior: url("CSS/PIE.htc");
}
.box_music_1 object{
        width: 90%;
        margin: 10px auto;
        padding: 5px auto;
        overflow: hidden;                
}
.box_music_1 p{
        width: 90%;
        margin: 10px auto;
        padding: 5px auto;
}


#box_home_bottom{
		width: 65%;/*旧デザイン100％から変更*/
        text-align: left;
        padding: ;
        margin:0 5px 0 5px;
        /*float:left;　旧デザインのfloat廃止*/
        font-size: 110%;   
}

.box_welcome{
        color: #333333;
        background-color: white;
        width: auto;
        height: auto;
        text-align: left;
        margin: 10px 10px 10px 10px;
		border: 2px solid #708ae0;
		border-radius: 10px;
        box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        -webkit-box-shadow: 0 10px 6px -6px #777;
        behavior: url("CSS/PIE.htc");
}
.box_welcome p{
        padding: 10px;
        margin: 10px;
}
.box_welcome HR{
        margin: 10px;
}


/*練習日・場所ページ用～ここから～
*****/


.venue_link_m{/*スマホ用練習場所地図へのリンク*/
        display: none;
}

.box_schedule_1{/*練習日・場所ページの案内文*/
	/*width: 93%;*/
        color: white;
        font-size: 85%;
        font-weight: bold;
        text-align: left;
        background-image: url("image/background_blue_gradation.png");
        background-size: cover;
        padding: 2px 1px;
        margin: 10px 10px 10px 10px;
	border-radius: 0px;
        -webkit-box-shadow: 0 10px 6px -6px #777;
        -moz-box-shadow: 0 10px 6px -6px #777;
        box-shadow: 0 10px 6px -6px #777;
        behavior: url("CSS/PIE.htc");
}

.box_schedule_2{/*練習日・場所ページの表*/
		width: 95%;
        /*text-align:center;*/
        margin: 10px auto;
}
.box_schedule_2 table{
        width: 100%;
}


.box_venue{/*練習日・場所ページの練習場所*/
	width: 95%;
        margin: 10px auto;
        padding: 10px 5px 0px 5px;
	border: 2px solid #708ae0;
	border-radius: 10px;
        border-shadow: 5px 5px #708ae0;
        -webkit-box-shadow: 5px 5px #708ae0;
        -moz-box-shadow: 5px 5px #708ae0;
        behavior: url("CSS/PIE.htc");
}


.box_venue p{
        display:block;
        margin-left: auto;
        margin-right: auto;
}

/**多分不要　次の段階で削除
.box_venue_m{練習日・場所ページの練習場所スマホ用
	display: none;
}**/



/*******指揮者紹介ページ用～ここから～
***********************/

.box_conductor{
        width: 90%;
        text-align: center;
        margin: 0 25px 0 auto;
}
.conductor_1{
        font-size: 150%;
        color: #395E5F;
        font-weight: bold;
        padding:0;
}
.conductor_2{
        font-size: 175%;
        color: #384D98;
        font-weight: bold;
        padding:0;
}
.conductor_3{
        font-size: 225%;
        color: #384D98;
        font-weight: bold;
        padding:0;
}
.conductor_4{
        font-size: 150%;
        color: #A83CA8;
        font-weight: bold;
        padding:0;
}


.box_conductor_profile{
        width:100%;
        padding: 0 10px;
        margin: 10px auto 0 20px;
        overflow: auto; /*プロフィール文要素に高さを出すため必須*/
}
.box_conductor_profile img{
        float: right;
        width: 38%;
        margin-right: 50px;
        margin-left: 25px;
        
}
.box_conductor_profile p{
        overflow: auto;
        padding: 0em;
        margin: 0em 0em 1em 0em;
        text-align: left;
}


/******ピアニスト紹介ページ用～ここから～
*************/

.box_pianist{
        width: 90%;
        padding: 0 5px;
        margin: 5px 0 0 5px;
        text-align: center;
}
.pianist_1{
        font-size: 150%;
        color: #395E5F;
        font-weight: bold;
        padding:0;
}
.pianist_2{
        font-size: 175%;
        color: #384D98;
        font-weight: bold;
        padding:0;
}
.pianist_3{
        font-size: 225%;
        color: #384D98;
        font-weight: bold;
        padding:0;
}
.pianist_4{
        font-size: 150%;
        color: #A83CA8;
        font-weight: bold;
        padding:0;
}
.box_pianist_profile{
        width:;
        padding: 0em;
        margin: 1%;
        overflow: auto; /*プロフィール文要素に高さを出すため必須*/
}
.image_pianist_right{
        float: right;
        width: 35%;
        margin: 0em 1% 1em 1%;    
}
.image_pianist_left{
        float: left;
        width: 35%;
        margin: 0em 1% 1em 1%;
}
.box_pianist_profile p{
        overflow: auto;
        padding: 0em;
        margin: 0em 0em 1em 0em;
        text-align: left;
}


/*******団員募集ページ用～ここから～
***********/

.box_joinus{
        text-align: left;
        padding-left: 2em;
        padding-right: 2em;
}
.box_joinus img{
        float: right;
        width: 30%;
        max-height: 600px;
        margin: 0em 1% 1em 1%;
}
.box_joinus p{
        overflow: auto;
        text-align: left;
}
.box_joinus li{
        text-align: left;
}




/*******練習風景ページ用～ここから～
***********/

.container_practicescenes{
	display:flex;
	overflow:hidden;
	}
.wrapper_practicescenes{
	display:flex;
	flex-direction:row;
	animation-name:slideshow_practicescenes;
	animation-duration:30s;
	animation-delay:1s;
	animation-iteration-count:infinite;
	animation-fill-mode:backwards;
}
.photo_practicescenes{
}

@keyframes slideshow_practicescenes{
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-100%);
	｝
}
}





/*******これからの音楽会ページ用～ここから～
**************/
.box_nextconcert img{
        width: 45%;
        float: right;
        margin: 0em 1em 10em 1em;
}

/*.box_nextconcert H1{
        color: #44A077;
}*/

.box_nextconcert H2{/*日本語での紹介*/
}        
.box_nextconcert H2{/*日本語での紹介*/
        font-size: 100%;
        font-weight: normal;
        color: #442F20;
}

.box_nextconcert H3{/*英語での紹介見出し*/
        color: #44A077;
        font-size: 100%;
        font-weight: bold;
}
.box_nextconcert H4{/*英語での紹介*/
        color: #345948;
        font-size: 100%;
        font-weight: normal;
}






/******これまでの音楽会ページ用～ここから～
************/



/*floatをflexに変える（2024.4.30）、下にニューバージョン
.formerconcerts_A{
        background-color:gainsboro;
        /*width:100%;*
        padding: 0em;
        margin: 1%;
        height: auto;
        min-height: 600px;
}
.formerconcerts_B{
        background-color: #F8ECF8;
        /*width:100%;*
        padding: 0em;
        margin: 1%;
        height: auto;
        min-height: 600px;
}
.formerconcerts_A H2{
        font-size: 150%;
        color: white;
        float: left; /*2022.9.20削除*
        width: 100%;
        background-color: #384D98;
        padding: 0;
        margin:0;
}
.formerconcerts_B H2{
        font-size: 150%;
        color: white;
        float: left;
        width: 100%;
        background-color: plum;
        padding: 0;
        margin:0;
}
.formerconcerts_img img{
        float: left;
        width: 30%;
        margin: 1em 1em 10em 1em;
        /*padding: 0; 2022.9.20追加*
        border:0;
        /*display:table-cell;2022.9.20追加*
}
.formerconcerts_A p,.formerconcerts_B p{
        /*overflow: auto;/*2022.9.20いったん消す*
        padding: 1em;
        text-align: left;
        width: 60%;
        min-height: 500px;/*2022.9.20,300pxから変更*
        font-size: 90%;
        /*clear: both; 2022.9.20追加*
}
.formerconcerts_A H3{
		/*clear:left; 2022.9.20追加*
        overflow: auto;
        padding: 1em 0 1em 1em;
        text-align: left;
        color: #392C52;
        font-size: 90%;
        font-weight: bold;
        width: 60%;
        border-bottom: solid 3px #384D98;
}
.formerconcerts_B H3{
        overflow: auto;
        padding: 1em 0 1em 1em;
        /*margin: 0; 2022.9.20追加*
        text-align: left;
        color: #392C52;
        font-size: 90%;
        font-weight: bold;
        width: 60%;
        border-bottom: solid 3px plum;
}
.formerconcerts_A span,.formerconcerts_B span{
        padding: 0 0 0 5em;
        display: block;
}
*****/



/*ここから、これからの音楽会ニューバージョン（floatをやめてflexに2024.4.30）*/

.formerconcerts_A{
        /*display:flex;2024.4.30追加*/
        /*flex-direction: column; /*2024.4.30追加*/
        background-color:gainsboro;
        /*width:100%;*/
        padding: 0em;
        margin: 5% 1%;
        height: auto;
        min-height: 600px;
}

.formerconcerts_B{
        display:flex;/*2024.4.30追加*/
        flex-direction: column; /*2024.4.30追加*/
        background-color: #F8ECF8;
        /*width:100%;*/
        padding: 0em;
        margin: 1%;
        height: auto;
        min-height: 600px;
}
.formerconcerts_A H2{
		/*display:flex;/*2024.4.30追加*/
        /*flex-direction: row; /*2024.4.30追加*/
		/*flex-wrap:wrap;/*2024.4.30追加*/
        font-size: 150%;
        color: white;
        /*float: left; 2024.4.30削除*/
        width: 100%;
        background-color: #384D98;
        padding: 0;
        margin:0;
}
.formerconcerts_B H2{
		flex-wrap:wrap;/*2024.4.30追加*/
        font-size: 150%;
        color: white;
        /*float: left; 2024.4.30削除*/
        width: 100%;
        background-color: plum;
        padding: 0;
        margin:0;
}
.formerconcerts_outline{/*2024.4.30このクラスを追加*/
        display:flex;/*2024.4.30追加*/
        flex-direction: row;/*2024.4.30追加*/
		}

.formerconcerts_img{
	    flex:1;
}

.formerconcerts_img img{
        /*float: left; 2024.4.30削除*/
        /*display:flex;2024.4.30追加*/
        /*flex-direction: row; /*2024.4.30追加*/
        width: 100%;
        margin: 1em 1em 1em 1em;
        /*padding: 0; 2022.9.20追加*/
        border:0;
        /*display:table-cell;2022.9.20追加*/
        background-color:navy;
}
.formerconcerts_text{/*2024.4.30このクラスを追加*/
		flex:2;
		background-color:;
		margin:0 10px 0 10px;
		padding:10px;
		/*width: 60%;*/
		}
.formerconcerts_A p,.formerconcerts_B p{
        /*overflow: auto;/*2022.9.20いったん消す*/
        padding: 1em;
        text-align: left;
        /*width: 60%;*/
        min-height: 500px;/*2022.9.20,300pxから変更*/
        font-size: 90%;
        /*clear: both; 2022.9.20追加*/
}
.formerconcerts_A H3{
		/*clear:left; 2022.9.20追加*/
        /*2024.4.30削除　overflow: auto;*/
        padding: 1em 0 1em 1em;
        text-align: left;
        color: #392C52;
        font-size: 90%;
        font-weight: bold;
        width: 60%;
        border-bottom: solid 3px #384D98;
}
.formerconcerts_B H3{
        overflow: auto;
        padding: 1em 0 1em 1em;
        /*margin: 0; 2022.9.20追加*/
        text-align: left;
        color: #392C52;
        font-size: 90%;
        font-weight: bold;
        width: 60%;
        border-bottom: solid 3px plum;
}
.formerconcerts_A span,.formerconcerts_B span{
        padding: 0 0 0 5em;
        /*2024.4.30削除　display: block;*/
}











/****これからの音楽会ページ用～ここから～
*****************/
.box_nextconcert img{
        width: 45%;
        float: right;
        margin: 0em 1em 10em 1em;
}

/*.box_nextconcert H1{
        color: #44A077;
}*/

.box_nextconcert H2{/*日本語での紹介*/
        font-size: 100%;
        font-weight: normal;
        color: #442F20;
}

.box_nextconcert H3{/*英語での紹介見出し*/
        color: #44A077;
        font-size: 100%;
        font-weight: bold;
}
.box_nextconcert H4{/*英語での紹介*/
        color: #345948;
        font-size: 100%;
        font-weight: normal;
}



/******合唱団紹介ページ用～ここから～
**********/

.box_aboutus{
        text-align: left;
        padding-left: 2em;
        padding-right: 2em;
}


/******音楽会に寄せての随筆ページ用～ここから～
*********/

.box_essays{
        width:100%;
        margin: 5px;
        height: auto;
}
.box_essays p{
        overflow: auto;
        text-align: left;
        padding-left: 30px;
        padding-right: 30px;
}
.box_essays img{
        float: right;
        width: 30%;
        max-height: 400px;
        vspace: 10px;
        hspace: 10px;
        overflow: hidden;
        border:0;
}

.essay h2{
		text-align:center;
		font-size:150%;
		padding:0;
		margin-top: 0px;
		margin-bottom:0px;
}
.essay h3{
		text-align:center;
		font-size:120%;
		padding:0;
		margin-top: 0px;
		margin-bottom:0px;
}

.essay{
		text-align: left;
		padding:20px 5px;
		margin: 20px;
}
.essay_author{
		text-align: right;
		margin: 30px 30px 0 0;
}


/*******エッセイバックナンバー～ここから～
*****/
.box_backnumber{
        text-align: left;
        padding-left: 2em;
}
.backnumber_list li{
		list-style-type: none;
		text-indent: -1em;
		margin-bottom: 15px;
}
.backnumber_list li:before{
		content:"♪";
		color:#de59de;
		font-size: 80%;
}



/*****音楽会の風景ページ用～ここから～
**********/
.box_concert{
        text-align: left;
        padding-left: 2em;
        padding-right: 2em;
}

.box_concert img{
        width: 33%;
        margin: 10px;
}
.box_concert H2{
        background-color:gainsboro;
        font-size: 100%;
}
.box_concert H3{
        color:;
        font-size: 100%;
}
.box_concert p{
        text-align: left;
}
.player{
		text-align: center;
}
.player p{
		text-align: center;
}
.box_concert object{
        height: 45px;
}
.concertscene_main{
        margin: 20px auto;
        max-width: 70%;
}
.concertscene_main img{
        width: 100%;
}



.box_photo_home{
        display: block;
/**        float: left;**/
        width: 100%;
}


footer{/*電子部　footerタグ採用に伴いIDのbox_bottomやめる*/
        margin: 0px auto;
        /*width: 100%;*/
        /*float: left;*/
        text-align: center;
        /*margin-right: -3px;*/
        position: relative;
}
footer p{/*電子部*/
	font-size: 80%;
	border-radius: 10px;
        background-color: plum;
        padding: 10px 2px;
        color: #384D98;
        font-weight: bold;
        height: 22px;
        width: 100%;
        position:absolute;
        top: 11px;
}
footer a img{
		display:block;
		width: 70px;
		position: absolute;
		right: 50px;
		top: 20px;/*logover2の場合は25px*/
}





/*****************************
*******【B】タブレット用************
******************************/
@media (max-width: 1024px){
/******20190813試しに1024pxから1366pxに変更してみた******/

header h1{/*旧#name_A*/
        font-size: 250%;
        padding: 15 0 0 0;
}
header h2{/*旧#name_B*/
        font-size: 110%;
}

/*.dropmenu li ul li{
        display: none;
}20190813試しに外してみた*/

.box_home_right{
        margin: 0;
}


main h1{/*ページタイトル***タブレット用　旧#box_title*/
        color: cadetblue;
        border-bottom: 5px solid cadetblue;
}



/*団員募集 タブレット用～ここから～
*****/

.box_joinus img{
        width: 40%;
}


/*これまでの音楽会　タブレット用～ここから～
*****/

.formerconcerts_A p,.formerconcerts_B p{
        width: 55%;
        min-height: 100px;
}
.formerconcerts_A H3{
        width: 55%;
}
.formerconcerts_B H3{
        width: 55%;
}

}



/*******************************
***【C】小さ目タブレット＆大き目スマホ用****
******************************/
@media (max-width: 728px){

header h1{/*旧#name_A*/
        font-size: 240%;
}
header h2{/*旧#name_B*/
        font-size: 100%;
}


#normal{
        display:none;
}

#box_photo_1{/*音楽会写真【C】*/
        width: 100%;
        overflow: hidden;
        margin: 15px auto　10px;
        text-align: center;
}



#box_menu_2{
		/*float: left;外してみる*/
        width: 100%;
        padding: 0;
        margin: 10 auto;
	border: 0;
}
#box_menu_2 ul{/*ナビゲーションバー縦のリスト小さ目タブレット＆大き目スマホ用*/
        list-style-type: none;
		margin: 2px auto;
		background: none;
        padding: 0 auto;
        margin: 0 auto;
		border: 0;
		display:table;
}
#box_menu_2 LI{
        padding: 0 auto;
        width:31%;
	background-color: gainsboro;/*gainsboro*/
		font-weight: bold;
        text-align: center;
        overflow: hidden;
        float: left;
        margin: 3px 1px;
        font-size: 70%;/*90%から変更*/
        height: 60px;/*50pxから変更*/
        line-height: 20px;
}
#box_menu_2 LI a{
	text-decoration: none;
        padding: 0 auto;
        display: block;
        color: #384D98;
        height: 60px;/*50pxから変更*/
}
#box_menu_2 LI a:hover{
	background-color: cadetblue;
	color: white;
			width:100%;

}




#counter{/*アクセスカウンタ*/
		display: none;
}

#all_menu{/*全メニュー表示 小さ目タブレット＆大き目スマホ用*/
        display:block;
        width: 100%;
        text-align: right;
}
/**#all_menu img{
        width: 100%;
        margin: 1px 0 0 0;
}***/
#all_menu span{
        color: cadetblue;
        font-size: 75%;
		padding-right:15px;
}
#all_menu p{/*トップページのみ高さ調節のため中味なし*/
		line-height: 10px;
		margin:0;
}



main h1{/*ページタイトル 小さ目タブレット＆大き目スマホ用 旧#box_title*/
        /*clear: both;*/
        /*width: 100%;*/
        padding: 0 0 0 0;/*topを10pxから0に変更*/
        margin: 0 15px 0 15px;
        font-size: 100%;
        color:#7058a3;
        border-bottom: 5px solid #7058a3;
}
main h1 div{/*pianist紹介ページ用*/
		font-size:75%;
}

#box_contents{/*各ページコンテンツ　小さ目タブレット＆大き目スマホ用*/
        margin-left:0%;
        width: 100%;
}

/*トップページ 小さ目タブレット＆大き目スマホページ用～ここから～
*****/
#box_home_frame{
	margin-top: -15px;
}


#box_home_top{
        width: 100%;
}
#box_home_top p{
        padding: 0 20px 0 10px;
        font-size:90%;
}

#box_home_right:before{
	content:"";
	padding-top: 100%;
}

#box_home_right{
        width: 100%;
        position: static;/*新デザインで採用*/
        margin: 0 5px 0 5px;

}
#box_home_bottom{
		width: 100%;
}

header HR{/*合唱団名称の下のHR*/
        background:url(image/line_melody.gif);
        height: 28px;
        bottom:-10px;
        right: 0px;
}


footer p{/*電子部*/
	height: 20px;
}
footer a img{/*下部のロゴ*/
	width: 70px;
	right: 25px;
}



/*指揮者紹介 小さ目タブレット＆大き目スマホページ用～ここから～
*****/


.box_conductor_profile img{
        width: 45%;
}


/*これからの音楽会 小さ目タブレット＆大き目スマホページ用ページ用～ここから～
*****/
.box_nextconcert img{
        width: 100%;
        float: right;
        margin: 1em 1em 1em 1em;
}



/*団員募集 小さ目タブレット＆大き目スマホページ用～ここから～
*****/

.box_joinus{
	    padding-left: 1em;
        padding-right: 1em;

}
.box_joinus img{
        width: 45%;
}


/*これまでの音楽会　小さ目タブレット＆大き目スマホページ用用～ここから～
*****/
.formerconcerts_outline{
	display:block;/*2024.5.1追加*/
}
.formerconcerts_img{
	flex:none;/*2024.5.1追加*/
}
.formerconcerts_img img{
        width: 50%;
        max-height: 480px;
        margin: 1em 1em 1em 1em;
}
.formerconcerts_text{
	flex:none;/*2024.5.1追加*/
}
.formerconcerts_A p,.formerconcerts_B p{
        width: 90%;
}
.formerconcerts_A H3{
        width: 90%;
}
.formerconcerts_B H3{
        width: 90%;
}


.box_backnumber{/*【C】小さ目タブレット＆大き目スマホページ用用～ここから～*/
        padding-left: 1em;
}
.backnumber_list li a{
		text-decoration: none;
}

}



/*****************************
********【D】スマホ用**************
******************************
****(以前の設定：max-width: 480px)******/

@media screen and (max-width: 480px){


header{
        margin: 0px auto;
        height:112px;/*topbar分プラス22*/
}
#konsei_logo_square{/*正方形の合唱団ロゴ*/
        width: 75px;
}
header h1{/*旧#name_A*/
        font-size: 170%;
      line-height: 1.0;
      top: 27px;/*topbar分プラス22*/
      left: 88px;
}
header h2{/*旧#name_B*/
        font-size: 60%;
        top: 67px;/*topbar分プラス22*/
        left: 88px;
        width: 60%;
}
#drawer_menu{/*ハンバーガーメニュー追加*/
	bottom: 25px;
}


#box_photo_1{
}



/*.menu_B{A優先度高い、B優先度中、C優先度低い
        display:none;
}******/

#drawer-content{
	width: 175px;
	background: #fff;
	opacity:1;
	background-image: url(image/background_gclef.png);
	background-size: 175px;
	background-repeat:repeat-y;
}
#menu{/*これは自分で追加menuの文字画像*/
	width: 100px;
	padding-left:25px;
}


#konsei_logo_rectangle_1{
	width:;
}
#fb_logo{
	width:;
}


main h1{/*ページタイトルスマホ用 旧#box_title*/
        color: #778899; /*#96378Eから変更20190813*/
        border-bottom: 5px solid #778899;/*#96378Eから変更20190813*/

}
main h1 span{/*旧#box_title*/
	display:none;
}

#box_contents{
          margin-left:0%;
          width: 100%;
}


/*トップページ スマホ用～ここから～
*****/

.box_home_top{
        font-size: 90%;
}

.box_home_top img{
        width: 40%;
}

.box_music_1{
}
.box_music_1 object{
}

.box_welcome p{
        font-size: 90%;
}

.box_photo_home{
        display: none;
}


/*練習日・場所ページ用～ここから～
*****/

.box_schedule_1{
	font-size: 80%;
 	width: 93%;
	border-radius: 10px;
        border-shadow: 0 10px 6px -6px darkslategray;
        -moz-box-shadow: 0 10px 6px -6px darkslategray;
        -webkit-box-shadow: 0 10px 6px -6px darkslategray;
}

.venue_link_m{/*スマホ用練習場所地図へのリンク*/
        display: block;
	width: 100%;
        margin: 10px auto;
	clear: left;
	font-size: 80%;
        color: cadetblue;
        font-weight: bold;
        text-align: center;
}

.box_schedule_2{
	width: 100%;
        float: left;
        margin: 10px auto;
}



/*これまでの音楽会　スマホ用～ここから～
*****/
.formerconcerts_img img{
        width: 90%;
        max-height: 480px;
        margin: 1em 1em 1em 1em;
}
.formerconcerts_A p,.formerconcerts_B p{
        width: 90%;
}
.formerconcerts_A H3{
        width: 90%;
}
.formerconcerts_B H3{
        width: 90%;
}



/*指揮者紹介ページスマホ用～ここから～
*****/


.box_conductor{
        clear: both;
        width: 100%;
        text-align: center;
        padding: 10px 0 0 0;
        margin: 0;
        font-size: 80%;
}
.conductor_1{
        font-size: 125%;
}
.conductor_2{
        font-size: 125%;
}
.conductor_3{
        font-size: 150%;
}
.conductor_4{
        font-size: 125%;
}

.box_conductor_profile{
        width: 100%;
        clear: both;
        margin: 0;
        overflow: hidden;
}
.box_conductor_profile img{
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
}
.box_conductor_profile p{
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 90%;
}


/*ピアニスト紹介ページスマホ用～ここから～
*****/


.box_pianist{
        clear: both;
        width: 100%;
        padding: 10px 0 0 0;
        margin: 0;
}
.pianist_1{
        font-size: 125%;
}
.pianist_2{
        font-size: 125%;
}
.pianist_3{
        font-size: 150%;
}
.pianist_4{
        font-size: 125%;
}
.box_pianist_profile{
		clear:both;
}
.box_pianist_profile p{
		background:#fff;
		width:100%;
        padding: 0em;
        margin: 0em 0em 1em 0em;
        text-align: left;
        font-size: 90%;
}
.box_pianist_profile img{
        width: 70%;
        margin-left:15%;
        margin-right:15%;
        padding: 0;
        overflow: hidden;
}


/***エッセイページ用【D】
*****/
.box_essays p{
        padding-left: 5px;
        padding-right: 5px;
}
.essay h2{
		font-size:120%;
}
.essay h3{
		font-size:100%;
}
.essay{
		margin:10px;
}




/*音楽会の風景 スマホページ用～ここから～
*****/
.box_concert{
        /*width:100%;*/
        padding-left: 1em;
        padding-right: 1em;
        margin: 1%;
        height: auto;
}

.box_concert img{
        width: 45%;
        margin: 5px 1px;
}
.concertscene_main img{
        width: 90%;
}

footer p{/*電子部*/
	height: 15px;
	text-align:center;
}
footer a img{/*下部のロゴ*/
	width: 50px;
	right: 20px;
	top: 25px;
}



}