.sidebar-enabler{
display: flex; align-items: baseline; justify-content: space-between; margin-right: 12.5vw; margin-left: 5vw; text-align: justify;
} .sidebar-enabler .sidebar{
font-size: 1.1rem; flex-shrink: 0; align-self: baseline; position: sticky; width: 20%; min-width: 190px; max-height: calc(100vh - 130px); max-width: 250px; top: 110px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; margin-right: 3%; /* margin-left: 50px; */ border: solid 1px rgb(96, 96, 96); line-height: 1.3; border-top-left-radius: 20px; border-bottom-right-radius: 20px;
overflow-y: scroll;
} .sidebar-enabler .indexbar {
font-size: 1.25rem; font-family:'Arima Madurai', cursive; font-weight: bold; flex-shrink: 0; align-self: baseline;
position: sticky; width: 20%; min-width: 200px; max-height: calc(100vh - 130px); top: 110px; overflow-y: scroll;
padding: 5px 0 5px 15px; margin: 0; line-height: 1.3;
display: flex; justify-content: space-between; flex-direction: column;
}
.indexbar .switchtab {
margin-bottom: 1.25em; padding: 15px ; height: 5em;
} @media screen and (min-width:851px) {
.indexbar .switchtab { /* つまりswitchtab のstyleを上書きしたいってこと! */ /* flex-basis: 24%; */ text-align: left; /* display: flex; */ /* align-items: center; */ /* border: solid 2px rgb(218, 208, 70); */ /* background-color: #fffdeb; */ /* border: none; */ border-bottom-right-radius: 0px; border-top-right-radius: 0px; border-right: none; border-width: 2px; }
}
.indexbar>div {
box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
} .indexbar>a {
text-align: center; box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
} .indexbar>.switchtab:nth-child(1) {
box-shadow: -6px 2px 3px 2px rgba(0,0,0,0.3);
} .indexbar>.switchtab:nth-child(2) {
box-shadow: -4px 2px 3px 2px rgba(0,0,0,0.3);
} .indexbar>.switchtab:nth-child(3) {
box-shadow: -1px 2px 2px 1px rgba(0,0,0,0.3);
} .indexbar>.switchtab:nth-child(4) {
box-shadow: -1px 1px 1px 1px rgba(0,0,0,0.3);
} .indexbar>.sactive {
background-color: #fffdeb;
}
.sidebar>.myp {
font-size: 1.2rem; font-family: 'Raleway', sans-serif; font-weight: bold; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center;
} .sidebar ul{
text-align: left; padding: 0; margin:0; margin: 0; list-style-type: none;
} .sidebar li{
margin: 0px 0px 5px 0px;
} /* .sidebar ul ul {
margin: 0px 30px 30px 0px;
} */
.sidebar a{
text-decoration: none; color: black; display: block; font-weight: bold; padding: 5px 10px 3px 10px; border: solid 2px white; border-left: none; border-bottom-right-radius:10px; border-top-right-radius: 10px;
}
.sidebar a.gr:hover, .sidebar a.pl:hover{
border-color: rgb(97,190,54);
} .sidebar a.re:hover {
border-color: #F15A22;
} .sidebar a.ye:hover {
border-color: rgb(218, 208, 70);
} @media screen and (min-width:851px) {
.sidebar a.gr.active, .sidebar a.pl.active { border-color: rgb(97,190,54); background-color: rgb(226,239,205); } .sidebar a.re.active { background-color: #fce7df; border-color: #F15A22; } .sidebar a.ye.active { background-color: #fcf9df; border-color: rgb(218, 208, 70); }
}
.sidebar ul ul a{
font-size: 0.825em; padding-left: 30px;
} .sidebar ul ul ul a {
/* font-size: 0.9em; */ font-weight: normal; padding-left: 70px;
} .maincontents{
display: block; /* 空にしないために */
} @media screen and (max-width:850px) {
.sidebar-enabler{ display: block; } .sidebar-enabler .sidebar, .sidebar-enabler .indexbar{ position: static; max-width: 100%; width: 75%; margin-left: auto; margin-right: auto; border: solid 3px gray; border-radius: 15px; } .sidebar a{ border-radius: 10px; border-left: solid 2px white; } .sidebar-enabler .indexbar { padding-right: 15px; }
}
/* unused? */ .right-text-aligner {
font-size: 1.3rem; margin-left: 250px; margin-right: 7%; padding: 2em; padding-right: 0; /* border: 2px solid red; */ text-align: justify;
}