/*全体*/
body {
    color: #38250d;
    background-color: #fffdf7;
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;}

/*リンクの設定*/
a{  color: #38250d;}
a:hover{font-weight: bold;}
a:hover img {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;}






/*メニューバー*/
#nav-drawer {position: relative; text-align: left;}
.nav-unshown {display:none;}
#nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;}
#nav-content {
    overflow: auto;
    position: fixed;
    top: 0;right: 0;
    z-index: 9999;
    width: 48%;max-width: 300px;
    height: 100%;
    background-color: white;
    transition: .3s ease-in-out;
    -webkit-transform: translateX(105%);transform: translateX(105%);}
#nav-input:checked ~ #nav-close {
    display: block;
    opacity: .5;}
#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);transform: translateX(0%);
    box-shadow: 6px 0 25px rgba(0,0,0,.15);}

#bar{position: fixed;
    top:0;left:0;
    background-color: #4f3719;
    width: 100%;
    height: 8vh;
    z-index: 999;}
.rogo{
    height: 8vh;}
#menuikon{
    float: right;
    height: 7vh;
    max-width: 12vw;
    margin: 0.5vh 2vh;}
#menu1{
    background-color: #4f3719;
    color: white;
    font-size: 20px;
    text-align: center;
    height: 8vh;
    line-height: 8vh;
    margin-bottom: 5px;}
.menu2{
    display: block;
    padding: 10px 20px;
    text-decoration: none;}
.menu2:hover{background-color: #fffae8;}
.snsbox{float: right;}
.sns{
    height: 5vh;
    max-width: 12vw;
    margin: 1.5vh 1vh;
    float: left;}
.officialparent{
    position: relative;
    width: 5vh;
    color: white;
    border: solid 1px white;}
.official{
    line-height: 1.3vh;
    font-size: 1vh;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);}





/*TOP画像*/
#titlepc,#titlesp,#keypc,#keysp{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;}
#titlepc{
    display: block;
    top: 38vh;
    width: 100%;
    max-width: 1000px;}
#titlesp{
    display: none;
    top: 32vh;
    width: 100%;}
#keypc{
    display: block;
    top: 68vh;
    height: 32vh;
    max-width: 100%;}
#keysp{
    display: none;
    top: 60vh;
    height: 31vh;
    max-width: 100%;}


/*上の三つの四角*/
#colorboxparent{
    display:flex;
    justify-content:center;}
#colorbox1,#colorbox2,#colorbox3{
    width: 35vw;
    max-width: 250px;
    text-align: center;
    line-height: 18px;
    margin: 9vh 5px 0;
    padding: 10px;}
#colorbox1{
    border-top: solid 3px #4f3719;
    background-color: #F6DADA;}
#colorbox2{
    border-top: solid 3px #4f3719;
    background-color: #fffae8;
    position: relative;
    text-decoration: none;}
#colorbox2 div{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%,-55%);}
#colorbox3{
    border-top: solid 3px #4f3719;
    background-color: #D3E4DC;}
.colorboxtitle{
    margin: 6px 0;
    font-weight: bold;}




#news{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 60vh;
    text-align: center;}




/*TOPページ下*/
#indexcontent{
    box-sizing: border-box;
    position: absolute;
    top: 102vh;
    width: 1000px;
    max-width: 100%;
    padding: 9vh 15px 0;}




#virus{
    max-width:900px;
    width:100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 15px 10px;
    background-color: #fffae8;}
#virustitle{
    text-align: center;
    font-weight: bold;
    
}





/*ごあいさつ～六連とは*/
#hello,#profile{
    padding-top: 9vh;}
.leftborder{
    padding: 15px 15px 10px;
    background-color: #fffae8;
    border-left: solid 3px #4f3719;}






/*活動紹介、演奏会情報、その他タイトル*/
#activity,#ensoukaijouhou,#sonota{
    margin: 11vh 0 0;}
.borderparent{
    position: relative;
    text-align: center;}
.border{
    position: absolute;
    top: 45%;
    width: 100%;
    height: 1px;
    background-color: #4f3719;}
.bordertitle{
    background-color: white;
    font-size: 20px;
    padding: 0 5px;
    position: relative;
    display: inline-block;}






/*木目アイコン*/
.ikonthree{
    display:flex;
    justify-content:center;
    margin: 40px 5px;}
.ikon{
    width: 90%;
    max-width: 200px;
    margin: 5px;}






/*PV*/
#youtube{
    width: 1000px;
    max-width:100%;
    height: 315px;
    text-align: center;}
#youtube iframe{
    width: 560px;
    height: 315px;
    max-width:90%;}






/*演奏会情報*/
ul.flyer_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left:0;
    margin: 20px 0;

}
ul.flyer_box li {
    list-style:none;
}

.ensoukai{
    background-color: #fffae8;
    margin: 20px 0;
    padding: 20px 10px;
    text-align: center;}
.ensoukaititle{
    font-size: 20px;}
.ensoukai table{
    margin: 0 auto;
    width: 100%;}
#jikaiparent{
    display: flex;
    justify-content:center;
    /*max-height: 716px;*/
    align-items: flex-start;}
#jikai {
    text-align: center;
    width: 80%;
    height: 1000px
    max-width: 400px;
    padding: 40px 5px;}
#flyer{
    width: 40vw;
    max-width: 350px;}

#ikouparent{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;}
.ikou1{
    text-align: center;
    width:75%;
    padding: 1%;}
.ikou2{
    display: flex;
    text-align: center;
    width:300px;
    padding: 20px 20px;}
.ikou3{
    text-align: center;
    width:300px;
    padding: 20px 20px;}
.ikou4{
    text-align: center;
    width:300px;
    padding: 20px 20px;}
.ikou div{
    padding: 5px 0;}
.ikou a{
    text-decoration: none;}






/*エンドバー*/
#end{
    background-color: #4f3719;
    color: white;
    font-size: 12px;
    width: 100%;
    text-align: center;
    margin: 100px 0 0;
    padding: 15px 0;}
#copyrights{
    font-size: 10px;}




/*サブページ*/
.subpage{padding: 12vh 15px 0;}

.subtitle{
	position: relative;
	padding: .3em;
	text-align: center;
    margin: 0 auto;
    font-size: 20px;}
.subtitle::before,.subtitle::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;}
.subtitle::before {
	top: -3px;
	border-top: 2px solid;
	border-bottom: 1px solid;}
.subtitle::after {
	bottom: 0;
	border-top: 1px solid;
	border-bottom: 2px solid;}




/*活動紹介ページ*/
.subparent{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 150px;
    padding: 40px 0}

.subleft{
    width: 460px;
    padding: 0 10px;}

.subright{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 490px;}

.subimg{
    width: 45%;
    padding: 0 1% 5px;
    pointer-events: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    touch-callout:none;
    user-select:none;}

.subtext{
    padding: 10px 0;
    margin: 0;}

.bottom{
    margin-bottom: 80px;}




/*その他ページ*/
.subtitle2{border-bottom: solid 1px;}
.subtitle3{
    font-size: 20px;
    border-bottom: solid 1.5px;
    margin: 60px 0 10px;}


.mail{
    font-style: italic;
    font-weight: bold;}

.question{
    border-bottom: solid 0.2px;
    margin: 30px 0 10px;}
    
.rinji{color:darkred;}





/*メディアクエリ*/

@media screen and (max-width:900px){
    #colorbox1,#colorbox3{
        padding: 1vh 0;
        width: 48%;}
    /*#colorbox2{display: none;}*/
    #news{top: 57vh;}}

@media screen and (max-width:600px){
    body{font-size: 3.8vw;}
    #menuikon{margin: 0.5vh 1vh 0.5vh 0.5vh;}
    .sns{margin: 1.5vh 0.5vh;}
    #menu1,.bordertitle,.ensoukaititle{font-size: 4vw;}
    #titlepc{display: none;}
    #titlesp{display: block;}
    #keypc{display: none;}
    #keysp{display: block;}
    #colorbox1,#colorbox3{
        font-size:3vw;
        line-height: 3vw;
        padding: 1vh 0;
        width: calc(100% / 3);}
    .colorboxtitle{
        margin-bottom: 0.5vh;
        font-size: 3vw;}
    #news{
        font-size:3vw;
        top: 52vh;}
    #end{font-size: 2.7vw;}
    #copyrights{font-size: 2.2vw;}
    .subtitle,.subtitle3{font-size: 4.2vw;}
    .subtitle::before,.subtitle::after {height: 4px;}}