body {
    color: #555;
    background: #ffffff;
    font-size: 1.2em;
    line-height: 125%;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}
.pure-img-responsive-c {
    max-width: 100%;
    height: auto;
    align-self: center
}

.line-pink {
    background: linear-gradient(transparent 60%,#ffd2f5 0%);
}
.line-blue {
    background: linear-gradient(transparent 60%,#81bef7 0%);
}

/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    
}

/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
    position: relative;
    left: 0;
    padding-left: 0;
    font-family: 'Kosugi+Maru', sans-serif;
}
    #layout.active #menu {
        left: 240px;
        width: 240px;
    }

    #layout.active .menu-link {
        left: 240px;
    }
/*
The content `<div>` is where all your content goes.
*/
.content {
    margin: 0 auto;
    padding: 0 2em;
    max-width: 1000px;
    margin-bottom: 50px;
    line-height: 1.6em;
}
.content p {
    text-align: center;
}

.content-subhead {
    margin: 50px 0 20px 0;
    font-weight: 300;
    color: #888;
}

.button-success {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    background: #ff66cc;
}

/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/

#menu {
    margin-left: -240px; /* "#menu" width */
    width: 240px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #ffffff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
    color: #555555;
    border: none;
    padding: 0.6em 0 0.6em 0.6em;
}

#formailform ul li{
    padding-left: 0px;

}
/*
Remove all background/borders, since we are applying them to #menu.
*/

    #menu .pure-menu,
    #menu .pure-menu ul {
    border: none;
    background: transparent;
    color: #555;
}

/*
Add that light border to separate items into groups.
*/

/*
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    
    border-top: 1px solid #666;
    
}
*/
    /*
    Change color of the anchor links on hover/focus.
    */
    #menu .pure-menu li a:hover,
    #menu .pure-menu li a:focus {
        background: #fffed0;
        
    }

/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected {
    font-size: 100%;
    background: #cdf3b8;
    color: #555555;
}
#menu .pure-menu-heading {
    font-size: 100%;
    background: #f4ffdb;
    color: #555555;
}

    /*
    This styles a link within a selected menu item `<li>`.
    */
    #menu .pure-menu-selected a {
        color: #555555;
        
    }

/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
    color: #555555;
    margin: 0;
}

/* -- Dynamic Button For Responsive Menu -------------------------------------*/

/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/

/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

.menu-link:hover,
.menu-link:focus {
    background: #000;
}

.menu-link span {
    position: relative;
    display: block;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: 0.2em;
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    margin-top: -0.6em;
    content: " ";
}

.menu-link span:after {
    margin-top: 0.6em;
}

#main p {
    color: #555555;
    
}
#main h2 {
    position: relative;/*相対位置*/
    padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
    line-height: 1.1;/*行高*/
    color: #f49b00;/*文字色*/
    border-top: dotted 1px #399127;
    border-bottom: dotted 1px #399127;
    background: #fffed0;
}
#main h2::before {
    font-family: "Font Awesome 5 Free";/*忘れずに*/
    content: "\f138";/*アイコンのユニコード*/
    position: absolute;/*絶対位置*/
    font-size: 1.1em;/*サイズ*/
    left: 0.25em;/*アイコンの位置*/
    top: 0.33em;/*アイコンの位置*/
    color: #f49b00; /*アイコン色*/
}

#main h3 {
    color: #555;
    border-bottom: dashed 2px #ffc778;
}
#pure-u-1 h3 {
    color: #555;
    border-bottom: dashed 2px #ffc778;
}

#main h4 {
    color: rgb(233, 127, 198);
    text-align: center;
}

#main span  {
    font-size: x-large;
}
#main ul {
    list-style-type: none;
}
#main ul li{
    /* background-image:url(/pic/marker.png); */
    background-repeat: no-repeat;
    background-position: 5px 0px;
    padding-left: 30px;
}
#main ol{
    padding-left: 30px;
    margin: 0;
    list-style-type:decimal;
}
#main .content #top1{
    text-align: right;
    font-size: 0.8em;
    background-color: #ffff16;
}
#main .content #top2{
    width: 20%;
    background-color: white;
}


/* -- Responsive Styles (Media Queries) ------------------------------------- */

/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {

    .header,
    .content {
        padding-left: 2em;
        padding-right: 2em;
    }
    .header h1 {
        font-size: 0.8em;
        text-align: right;
        color: #555555;
        padding: 0;
        margin: 0;
    }
    .header h5 {
        font-size: 1em;
        text-align: center;
        font-weight: 300;
        color: #999;
        padding: 0;
        margin-top: 50;
        margin-bottom: 0;
        background-color:#cdf3b8
    }
    #layout {
        padding-left: 240px; /* left col width "#menu" */
        left: 0;
    }
    #menu {
        left: 240px;
    }

    .menu-link {
        position: fixed;
        left: 240px;
        display: none;
    }

    #layout.active .menu-link {
        left: 240px;
    }
}

@media (max-width: 48em) {
    /* Only apply this when the window is small. Otherwise, the following
    case results in extra padding on the left:
        * Make the window small.
        * Tap the menu to trigger the active state.
        * Make the window large again.
    */
    #layout.active {
        position: relative;
        left: 240px;
    }
}

.lesson {
    color:#000;
    background: #ffcaca;
}
.pre {
    color: #000;
    background: gold;
    font-weight: bold;
}


.photo-box, .text-box {
    overflow: hidden;
    position: relative;
    height: 250px;
    text-align: center;
}

.photo-box img {
    max-width: 150%;
    height: auto;
}


.photo-box aside {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0;
    color: white;
    width: 100%;
    font-size: 70%;
    text-align: center;
    background: -moz-linear-gradient(top,  rgba(16,27,30,0) 0%, rgba(12,2,2,1) 90%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(16,27,30,0)), color-stop(90%,rgba(12,2,2,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(16,27,30,0) 0%,rgba(12,2,2,1) 90%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00101b1e', endColorstr='#0c0202',GradientType=0 ); /* IE6-9 */
}
.photo-box aside span {
    color: #ddd;
    font-size: small;
}

.photo-box aside span a {
    color: #ccc;
    text-decoration: none;
    font-size: small;
}

.d1 {
    border-collapse:collapse;
    text-align:center;
    margin:0 0 0 25px;
    width:250px;
}
.d1 td {
    border:solid 1px #ccc;
    height:22px;
}

.d2 td {
    font-weight:bold;
    font-size:18px;
    color:#ffcaca;
    border:none;
}

.d3,.d3a {
    color:#f00;
}
.d3 {
    background:#fee;
}

.lesson {
    color:#000;
    background: #ffcaca;
}

.pre {
    color: #000;
    background: gold;
    font-weight: bold;
}

.d4,.d4a {
    color:#00f;
}
.d4 {
    background:#eef;
}

.d5 {
    background:#ff8;
    font-weight:bold;
}

.d6 {
    font-weight:bold;
    background:#efe;
}

.d7 td {
    font-size:13px;
    color:#666;
    padding:5px 0 0 10px;
    text-align:left;
    border:none;
}
     
div.d8 {
    width:300px;
    float:left;
}

div#d9 {
    width:3900px;
    height:100%;
}

div#d10{
    width:100%;
    height:100%;
    overflow:hidden;
}

div#d11{
    width:300px;
    height:auto;
    position:relative;
}

div#d12 {
    position:absolute;
    top:32px;
    left:65px;
    cursor:pointer;
}

div#d13 {
    position:absolute;
    top:32px;
    left:210px;
    cursor:pointer;
}

.btn-sticky {
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
  }
  .btn-sticky:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
  }