@charset "UTF-8";
*{
                margin: 0;
            }

            .book-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.book-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 16px;
  background-color: #fdfdfd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  gap: 20px;
  align-items: flex-start;
}

.rakuten-link {
  flex: 0 0 auto;
}

.amazon-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  font-size: 0.95rem;
}

.amazon-links a {
  color: #0076d6;
  text-decoration: none;
}

.amazon-links a:hover {
  text-decoration: underline;
}
            iframe{
                width: 100%;
                border: 1px solid black;
            }
            body{
                margin-top: 0px;
                color: #333;
                font-family: Meiryo;
            }
            body>header{
                position: fixed; /* ヘッダーを固定する */
                top: 0%;
                width:100%;
                font-size: xx-large;
                background-color: #000;
                color: #fff;
                padding: 10px 30px;

            }

            main{
                margin-top: 80px;
                padding: 0 15px;
            }
            main>h1{
                margin-bottom: 20px;
            }
            main>article{
                padding: 0 0 0 0;
                margin-bottom: 20px;
            }

            .errorlist{
                margin: 0;
                padding: 0;
                list-style-type: none;
                color: red;
            }

            form>p{
                margin-bottom: 20px;
            }
            p>span.helptext{
                font-size: 14px;
                color: #999;

            }
            p>label{
                display: block;
            }
            p>input,p>textarea,p>select{
                width: 400px;
                padding: 6px 12px;
                box-sizing: border-box;
                border-radius: 4px;
                border: solid 1px #999;
            }

            .example>label{
                display: inline-block;
                padding: 5px;
                cursor: pointer;
            }
            .example>label:hover{
                color: red;
            }
            .example>label>input{
                margin-right: 5px;
                cursor: pointer;
            }
            canvas{display: block; background: #ffe; margin: 0 auto;}
            .flex{
    /*コレ追加*/display: flex;
    border: 1px solid #333;
}
.flex div{
    border: 1px solid #333;
}
.right{
    background: #ffd87c;
}
.left{
    background: #9ddbfc;
}

container{
    width: 200px;
    height: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.container > div{
    flex: 1;
}
.div_g {
    background-color: #EBEBEB;
    border: ridge;
}

mjx-container {
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
}

li{
    list-style-type: none;
    list-style-position: inside;
}
ol.first-layer{
    counter-reset: num_f;
    padding-left:1%;
}
.first-layer li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer2{
    counter-reset: num_f 1;
    padding-left:1%;
}
.first-layer2 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer2 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer3{
    counter-reset: num_f 2;
    padding-left:1%;
}
.first-layer3 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer3 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer4{
    counter-reset: num_f 3;
    padding-left:1%;
}
.first-layer4 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer4 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer5{
    counter-reset: num_f 4;
    padding-left:1%;
}
.first-layer5 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer5 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer6{
    counter-reset: num_f 5;
    padding-left:1%;
}
.first-layer6 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer6 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer7{
    counter-reset: num_f 6;
    padding-left:1%;
}
.first-layer7 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer7 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer8{
    counter-reset: num_f 7;
    padding-left:1%;
}
.first-layer8 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer8 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.first-layer9{
    counter-reset: num_f 8;
    padding-left:1%;
}
.first-layer9 li{
    counter-increment: num_f;
    font-size:110%;
    font-weight:bold;
}
.first-layer9 li:before{
    display: marker;
    content: counter(num_f)". ";
}
ol.second-layer{
    counter-reset: num_s;
    padding-left:0;
}
.second-layer li{
    counter-increment: num_s;
    font-size:100%;
    font-weight:normal;
}
.second-layer li:before{
    display: marker;
    content: counter(num_f)'-' counter(num_s)": ";
}
ol.third-layer{
    counter-reset: num_t;
    padding-left:0;
}
.third-layer li{
    counter-increment: num_t;
    font-size:100%;
    font-weight:normal;
}
.third-layer li:before{
    display: marker;
    content: counter(num_f)'-' counter(num_s)"-" counter(num_t)': ';
}