@charset "utf-8";



/*
:root{

textRunRun.css の --introduction-color と同じ
--introduction-color: #93CCF0;

}
*/

#page-contents {
    border-right-style: solid;
    border-right-width: 3px;
    /* var(--introduction-color) */
    border-right-color: #93CCF0;
    border-left-style: solid;
    border-left-width: 3px;
    /* var(--introduction-color) */
    border-left-color: #93CCF0;
}

#mainId {
    /* var(--introduction-color) */
    background-color: #93CCF0;
}

#mainOnePage {
    /* var(--introduction-color) */
    background-color: #93CCF0;
}

/* 現時点では、div-width-short  内でも使っている。 */
.sectionFirst {

}

    .sectionSecond {

    }

        .sectionThird {

        }


.h1-first {
    /* var(--introduction-color) */
    background-color: #93CCF0;

}

.former-t-exampleuse{
    /* var(--introduction-color) */
    background-color: #93CCF0;
}

.former-t-droppingway{
    /* var(--introduction-color) */
    background-color: #93CCF0;
}

.t-intro-1{
    position: relative;
    margin: 0 0 30px 0;
    padding: 0.5rem 20px 0.5rem 1.2em;
    font-size: 1.5rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: aquamarine;

}

.t-intro-1-before{
    position: absolute;
    display: block;
    top: 0.2rem;
    left: 0;
    width: 1rem;
    height: 80%;

    margin-right: 0.5em;

    background-color: aquamarine;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

}

.t-intro-2{
    position: relative;
    margin-bottom: 30px;
    padding-left: 3.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.3rem;
}

.t-intro-2-before{
    position: absolute;
    display: block;
    top: 0.2rem;
    left: 2rem;
    width: 0.8rem;
    height: 80%;
    margin-right: 1rem;

    font-size: 1.1rem;
    background-color: #5db2ff;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

}

details.details-supplement-intro{
    margin-right: 0;
    margin-left: -20px;

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    border: 3px solid #a2b2ff;
    /* var(--detail-supplement-color) */
    background-color: #f0f7ff;
}

details.details-supplement-intro{
    transition: 0.5s;
}

details.details-supplement-intro[open]{
    background: #f2ffff;
}

/*--------------------------
 目次
------------------------------*/

.intro-index{
    margin-left: 2rem;
    margin-right: 2rem;
}

.intro-index-left{
    width: 23rem;
}

hr.hr-intro-index{
    margin-right: 3em;
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: darkblue;
}

div.div-t-intro-index{
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.t-intro-index{
    width: 11em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 5px solid #00bbdd
}

.intro-index li a{
    display: block;
    margin-left: 1.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1.1rem;
    text-decoration: none;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.intro-index li a,
.intro-index li a:link,
.intro-index li a:visited{
    color: #276CD8;
    background-color: #f0ffff;
}

.intro-index li a:hover,
.intro-index li a:focus,
.intro-index li a:active{
    color: #F90;
    background-color: #fff0f0;
}

.intro-index-current{

}

.span-intro-index-current{
    display: block;
    margin-left: 1.2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    font-size: 1.1rem;
    text-decoration: none;

    color: #F90;
    background-color: #fff0f0;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

ol.intro-index-counter{
    margin-bottom: 3em;
    /*    margin-left: 15px;*/
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    /*    padding-left: 2rem;*/
    padding-left: 0;
    list-style: none;
}

ol.intro-index-counter>li{
    position: relative;
    counter-increment: list1;

    margin: 10px 1em 10px 0;


}

ol.intro-index-counter>li::before{
    position: absolute;
    content: counter(list1);
    font-weight: bold;
    color: #36469B;
}

/*--------------------------
 このページの目次
------------------------------*/

ul.ul-intro-thispage a,
ul.ul-intro-thispage a:link,
ul.ul-intro-thispage a:visited{
    color: #000;
}

ul.ul-intro-thispage a:hover,
ul.ul-intro-thispage a:focus,
ul.ul-intro-thispage a:active{
    color: #F90;
}

div.div-intro-thispage{
    position: relative;
    margin-bottom: 1.5rem;

    padding: 0.5rem 1rem 0.5rem 2rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: aquamarine;

}

.intro-thispage-before{
    position: absolute;
    display: block;
    top: 0.2rem;
    left: 0;
    width: 1rem;
    height: 80%;

    background-color: aquamarine;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div.div-intro-thispage a{
    display: block;
    font-size: 1.2rem;
    text-decoration: none;
}


div.div-intro-thispage-2{
    position: relative;
    margin-bottom: 1.5rem;
    margin-left: 40px;

    padding: 0.5rem 1rem 0.5rem 1.6rem;

}

.intro-thispage-2-before{
    position: absolute;
    display: block;
    top: 0.2rem;
    left: 0;
    width: 0.8rem;
    height: 80%;

    font-size: 1.1rem;
    background-color: #5db2ff;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div.div-intro-thispage-2 a{
    display: block;
    font-size: 1rem;
    text-decoration: none;
}

/*--------------------------
 右上メニュー
------------------------------*/

#anywhere-menu a,
#anywhere-menu a:link,
#anywhere-menu a:visited{
    color: #000;
}


/*--------------------------
メディアクエリ
------------------------------*/

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

    .intro-index-left{
        width: auto;
    }

    div.div-intro-thispage{
        margin-right: 1rem;
        margin-left: 1rem;
    }

    div.div-intro-thispage-2{
        margin-right: 1rem;
        margin-left: 2rem;
    }

}