@charset "UTF-8";
/* CSS Document */
#mainspace {
  height: 49em;
}
#maintitle .readbox{
    text-align: justify;
}
#maintitle .readbox h3{
    font-size: 2.8rem;
    padding: 2em 0 0.5em 0;
}
#maintitle .readbox .txt, #list_title .txt, #list .inner .txt{
    font-size: 1.8rem;
    line-height: 1.8;
}


#side{
  position: sticky;
    order: 1;
    top: 12em;
  transform: translateZ(0); /* sticky+transform問題を緩和 */
}

#listbox{
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 5;
    background-color: #fff;
  overflow: visible; /* ここ重要！ */
}
#listbox #side_menu{
    order: 2;
width:43rem;
}


#listbox .triangle{
  position: absolute;
  width: 0;
  height: 0;
  z-index: 0;
}
#listbox .up.left{
  top: -19.93em;
  border-bottom: 20em solid #292929;
}
#listbox .up.right{
  top: -19.93em;
  border-bottom: 20em solid #f3f3f3;
}
#listbox .down.left {
  bottom: -19.93em;
  border-top: 20em solid #292929;
}
#listbox .down.right {
  bottom: -19.93em;
  border-top: 20em solid #f3f3f3;
}
#listbox .triangle.left {
  right: 0;
  border-right: 50vw solid transparent;
  border-left: 0 solid transparent;
}
#listbox .triangle.right {
  left: 0;
  border-left: 100vw solid transparent;
  border-right: 0 solid transparent;
}

#backgray{
    flex: 1;
    order: 1;
    background-color: #292929;
    height: 97.6rem;
}
#backgray2{
    flex: 1;
    order: 2;
    background-color: #f3f3f3;
}


#list{
    flex: 1;
    order: 2;
    padding: 0 0 10em 0;
}

.listtitle{
    position: relative;
    display: flex;
}

#list_title{
    order: 1;
width:125rem;
    min-height: 97.5rem;
    padding: 7em 2em 0 6em;
    background-color: #f3f3f3;
    text-align: justify;
    position: relative;
}
#list_title h2,#list .inner h2{
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: justify;
}
#list_title h3,#list .inner h3{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
}
#list_title .txt, #list .inner .txt{
    padding: 1em 0 4em 0;
    text-align: justify;
}

#list .inner{
    width: 125rem;
    padding: 0 0 0 6em;
    position: relative;
    z-index: 5;
}
#list .inner h3{
    text-align: justify;
    margin: -1em 0 0.5em 0;
}
#list .inner ul{
    margin-bottom: 7em;
}
#list .inner li{
    text-align: justify;
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 600;
    text-indent: -1em;
    padding: 0 0 0.5em 1em;
}
#list .inner dl{
    border-bottom: 1px solid #dfe3e9;
    padding: 2em 0;
    display: flex;
    text-align: justify;
}
#list .inner dl.first{
    margin-top: 2em;
}
#list .inner dt{
    font-size: 1.8rem;
    font-weight: 600;
    width: 10em;
}
#list .inner dd{
    flex: 1;
    font-size: 1.8rem;
}
#list .inner .caution{
    border: 2px solid #272828;
    padding: 2em 4em;
    display: inline-block;
    margin: 3em auto;
}
#list .inner .caution p{
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.6;
}



@media screen and (min-width: 769px) and (max-width: 1886px) {
#list_title,#list .inner {
  width: 112rem;
}

}


@media screen and (min-width: 769px) and (max-width: 1500px) {


}


@media only screen and (max-width: 768px) {
    
#side {
  position: relative;
  display: block;
  min-width: inherit;
  width: 100%;
  top: inherit;
}

#listbox #side_menu{
width:100%;
}
    #side_menu ul {
  padding: 3em 1.5em 0 1.5em;
}
    
#listbox{
    display: block;
}
#listbox .triangle{
  position: absolute;
  width: 0;
  height: 0;
  z-index: 0;
}
#listbox .up.left{
  top: -3.9em;
  border-bottom: 4em solid #292929;
}
#listbox .up.right{
  top: -5.9em;
  border-bottom: 6em solid #f3f3f3;
}
#listbox .down.left {
  bottom: -3.9em;
  border-top: 4em solid #292929;
}
#listbox .down.right {
  bottom: -5.9em;
  border-top: 6em solid #f3f3f3;
}
#listbox .triangle.left {
  right: 0;
  border-right: 100vw solid transparent;
}
#listbox .triangle.right {
  left: 0;
}

#backgray,#backgray2{
display: none;
}
    
  

#maintitle .readbox h3{
    font-size: 2.5rem;
    line-height: 1.6;
    padding: 2em 0 0.5em 0;
}
#maintitle .readbox .txt, #list_title .txt, #list .inner .txt{
    font-size: 1.8rem;
    line-height: 1.8;
}
    
.listtitle{
    display: block;
} 
    
#list_title{
width:100%;  min-height: auto;
    padding: 4em 1.5em 0 1.5em;
}
#list_title h2,#list .inner h2{
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.4;
}
#list_title h3,#list .inner h3{
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.4;
}
#list_title .txt, #list .inner .txt{
    padding: 1em 0 4em 0;
}

#list{
    padding: 0 0 8em 0;
}
#list .inner{
    width: 100%;
  padding: 0 1.5em 0 1.5em;
}
#list .inner h3{
    margin: -1em 0 0.5em 0;
}
#list .inner ul{
    margin-bottom: 7em;
}
#list .inner li{
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 600;
    text-indent: -1em;
    padding: 0 0 0.5em 1em;
}
#list .inner dl{
    display: block;
}
#list .inner dl.first{
}
#list .inner dt{
    width: auto;
    padding-bottom: 0.5em;
}
#list .inner dd p{
    text-indent: -1em;
    padding-left: 1em;
}
#list .inner .caution{
    padding: 2em 1em;
    margin: 3em auto;
    text-align: justify;
}
#list .inner .caution p{
    font-size: 2.2rem;
}




    
}