/*変数*/
:root{
    --article-width:700px;
    --nav-height:5em;
}
*{
    -webkit-text-size-adjust: 100%;
}
body{
    margin: 0;
    background-color:peachpuff;
}
header{
    height: auto;
    padding: 5em 0em 0em 0em;
}
/*nav*/
nav{
    width:100%;
    overflow:auto;
    position: fixed;
    top: 0;
    background-color: white;
    -ms-overflow-style:none; /*IEでscrollbar消す*/
}
nav::-webkit-scrollbar{
    display: none;/*chromeでscrollbar消す*/
}

nav ul{
    margin-left: auto;
    margin-right: auto;
    width:var(--article-width);
    list-style: none;
}
nav li{
    width:15%;/*navの幅を6分割*/
    height:3em;
    display: inline-block;
    text-align: center;
    line-height: 3em;
}
nav a{
    display: block;
    font-family: 'Baloo Chettan',sans-serif;
    font-size: 1.3em;
    text-decoration: none;
}
nav :link{
    color:brown;
}
nav :visited{
    color: brown;
}
nav :hover{
    color:orange;
}

.mmc{
    color: deeppink;
}

article{
    display: block;
    max-width: var(--article-width);
    min-width: 420px;
    margin-right: auto;
    margin-left: auto;
    padding: 50px;/*navにかぶってmmcが見えないので上にpadding*/
    background-color: white;
}
section{
    margin-bottom: 50px;
}
p{
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    font-size:1.2em;
}
h1{
    text-align: center;
    font-size:x-large; 
}
h3{
    text-align: center;
}
:link{
    color: orange;
}
:visited{
    color: limegreen;
}
table,th,td{
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    margin-left: auto;
    margin-right: auto;
    font-size:1.1em;
    border: solid 1px #dddddd;
    text-align: center;
}
.katudoutable{
    
    clear: both;
    border: none;
}
.katudoutable th{
    border: none;
}
.katudoutable td{
    text-align: left;
    border: none;
}

footer{
    text-align: center;
}
footer table{
    text-align: left;
}

/*icon*/
.fa-twitter-square{
    font-size: 2em;
    color: deepskyblue;
}
.fa-pen-square{
    font-size: 2em;
    color: red;
}
.fa-itunes{
     font-size: 2em;
    color: orange;
}
.shutyou{
    color: deeppink;
}


/*toppage*/
#topPhoto{
    min-width:420px;
    height:500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center; 
    background-image: url(../img/index_topphoto.jpg);
    text-align: center;
}
#topPhoto h1{
    margin: 0;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size:500%;
    color: white;
    line-height: 165px;
    font-weight: 500;
}

dt {
float: left ;
clear: left ;
margin-right: 0.5em ;
width: 10em ;
}

dd {
float: left ;
margin-left: 1em ;
}

/*about_inst*/
#mandolin,#mandola,#cello,#guitar,#bass,#conductor{
    box-sizing: border-box;
    height:500px;
    background-repeat: no-repeat;
    color:white;
    background-position: center;
    border: solid black 3em;
    padding: 0em 1em 0em 1em;
    font-family: 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
#bass p,#mandola p{
    /*position: absolute;/*pを下に配置したい*/
    /*bottom: 0;*/
}
#mandolin{
    background-image: url(../img/inst/mandolin.jpg);
}
#mandola{
    background-image: url(../img/inst/mandola.jpg);
    /*position: relative;/*pを下に配置したい*/
}
#cello{
    background-image: url(../img/inst/cello.jpg);
}
#guitar{
    background-image: url(../img/inst/guitar.jpg);
}
#bass{
    background-image: url(../img/inst/bass.jpg);
    /*position: relative;/*pを下に配置したい*/
}
#conductor{
    background-image: url(../img/inst/conductor.jpg);
}

/*og*/
#kouza{
    font-size:medium;
    padding: 10px;
    border:1px dashed;
    border-color: pink;
}

/*act*/
.table_act{
    border: solid white 1px;
    border-style:none;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}
.table_act td{
    text-align: center;
    font-family: 'Bungee',sans-serif;
    font-size: xx-large;
}
.table_act img{
    width: 200px;
    height:200px;
}
.red{
    color:red;
}