[style/css/style.css]
body ol {
        padding: 0;
        }

h2 {
   margin: 0;
   }

p {
   margin: 0;
   }

/*パンくずリスト*/
.breadcrumb {
  margin: 0;
  padding-left: 10px;
  list-style: none;
  border-top: solid #efefef 1px;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  border: none;
  text-align: center;
  width: auto !important;
  margin: 30px 0px;
}

.breadcrumb li:after {
  /* ▶を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #dcdcdc;
}

.breadcrumb li:last-child:after {
  color: transparent;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.4em 12px;
  border-radius: 2px;
  text-decoration: none;
  color: #222222;
  background: #ffffff;
  font-size: 18px;
}

.breadcrumb li a:hover {
                       background: #efefef;
                       cursor: pointer;
                       }

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
.breadcrumb li a {
                 font-size: 16px;
                 }

.breadcrumb {
            padding-left: 0;
            }
}

@media screen and (max-width: 414px) {
.breadcrumb {
            padding-left: 36px;
            }

.breadcrumb li a {
                  padding: 0;
                  }
}


/*挿絵カテゴリ*/
.categolira {
             position: relative;
             text-align: center;
             margin: 0 auto;
             width: 70%;
             height: auto;
             padding: 0px 0px 80px;
             }

.back {
      width: 100%;
      height: auto;
      }

.back img {
          width: 100%;
          height: auto;
          }

.tepu {
      position: absolute;
      top: 65px;
      left: 65px;
      }

.ja {
    position: absolute;/*重ねたい子要素にabsolute*/
    text-align: left;
    -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    color: #FFFFFF;
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    top: 115px;
    left: 155px;
    }

.ja h2{
      font-size: 38px;
      }

.en {
    position: absolute;/*重ねたい子要素にabsolute*/
    text-align: left;
    -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
    color: #FFFFFF;
    margin: 0!important;/*文字がずれている場合や*/
    padding: 0!important;/*文字が折り返される場合*/
    top: 115px;
    left: 285px;
    }

.en h2 {
       font-family: "Herr Von Muellerhoff", cursive;
       font-weight: 400;
       font-style: normal;
       font-size: 40px;
       }

.column {
        position: absolute;/*重ねたい子要素にabsolute*/
        top: 230px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 60%;
        height: 100%;
       }

.column-img img {
                width: 100%;
                height: auto;
                padding-bottom: 20px;
                pointer-events: none;
                -webkit-touch-callout:none;
                -webkit-user-select:none;
                -moz-touch-callout:none;
                -moz-user-select:none;
                user-select:none;
                }

.child {
       background-color: #ffffff;
       width: 100%;
       padding-top: 17px;
       padding-left: 40px;
       padding-right: 40px;
       padding-bottom: 20px;
       display: block;
       }

.name h2 {
          color: #222222;
          font-size: 40px;
          text-align: left;
          padding-bottom: 10px;
          padding-left: 10px;
          border-bottom: solid #222222 1px;
          }

.text {
      text-align: left;
      width: 450px;
      padding-top: 10px;
      padding-left: 10px;
       }

.text p {
        font-size: 18px;
        line-height: 1.6;
        }

.sp {
    display: none;
    }

.child2 {
       background-color: #ffffff;
       width: 100%;
       height: auto;
       margin-top: 20px;
       padding-top: 20px;
       padding-left: 40px;
       padding-right: 30px;
       padding-bottom: 20px;
       display: block;
       }

.info {
      text-align: left;
      display: flex;
      }

.info p {
        font-size: 16px;
        line-height: 1.5;
        }

.mark1 {
       background-color: #efefef;
       padding: 0.5em;
       margin-right: 10px;
       border-radius: 2px;
       }

.tool {
      padding-top: 7px;
      padding-bottom: 11px;
      margin-right: 10px;
      }

.made {
       background-color: #efefef;
       padding: 0.5em;
       margin-right: 10px;
       border-radius: 2px;
       }

.date {
      padding-top: 7px;
      padding-bottom: 11px;
      }

.caution {
         width: 100%;
         text-align: right;
         }

.caution p{
          font-size: 16px;
          }


/* 2560px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 2560px) {
.back img {
          height: 1400px;
          }

.right {
       display: flex;
       }

.child {
       width: 60%;
       margin-right: 20px;
       }

.child2 {
        width: 40%;
        margin-top: 0;
        }

.info {
      flex-direction: column;
      }

.date {
      padding-left: 10px;
      }

.tool {
      padding-left: 10px;
      }
}

/* 1920px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1920px) {
.back img {
          height: 1280px;
          }

.right {
       display: block;
       }

.child {
       width: 100%;
       margin-right: 0;
       }

.child2 {
        width: 100%;
        margin-top: 20px;
        }

.info {
      flex-direction: row;
      }

.first {
       display: flex;
       }

.second {
        display: flex;
        }

.date {
      padding-left: 0;
      }

.tool {
      padding-left: 0;
      }
}

/* 1600px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1600px) {
.back img {
          height: 1200px;
          }
}

/* 1440px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1440px) {
.back img {
          height: 1100px;
          }

.text p {
        font-size: 16px;
        }
}

/* 1366px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1366px) {
.back img {
          height: 1080px;
          }
}

/* 1284px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1284px) {
.back img {
          height: 1030px;
          }

.column {
        top: 190px;
        }

.name h2 {
         font-size: 36px;
         }

.ja {
      top: 105px;
      left: 150px;
      }

.ja h2{
        font-size: 30px;
        }

.en {
     top: 110px;
     left: 255px;
     }

.en h2 {
        font-size: 30px;
        }

.tepu {
       left: 45px;
       }

.tepu img {
           width: 80%;
           }
}

/* 1170px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1170px) {
.back img {
          height: 980px;
          }
}

/* 1080px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1080px) {
.name h2 {
         font-size: 30px;
         }

.back img {
          height: 940px;
          }
}

/* 834px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 834px) {
.categolira {
            width: 100%;
            height: auto;
            }

.back img {
          height: 980px;
          }
}

/* 800px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 800px) {
.back img {
          height: 960px;
          }

.info p {
         font-size: 15px;
         }
}

/* 750px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 750px) {
.back img {
          height: 930px;
          }
}

/* 720px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 720px) {
.back img {
          height: 910px;
          }
}

/* 640px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 640px) {
.ja {
      top: 85px;
      left: 85px;
      }

.ja h2{
        font-size: 28px;
        }

.en {
     top: 85px;
     left: 195px;
     }

.en h2 {
        font-size: 30px;
        }

.tepu {
       top: 45px;
       left: -10px;
       }

.column {
        top: 160px;
        }

.child {
       padding-left: 20px;
       padding-right: 20px;
       }

.child2 {
        padding-left: 20px;
        padding-right: 20px;
        }

.back img {
          height: 850px;
          }
}

/* 480px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 480px) {
.categolira {
            padding-bottom: 0;
            }

.column {
        width: 80%;
        }

.back img {
          height: 830px;
          }
}

/* 440px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 440px) {
.back img {
          height: 840px;
          }

.text {
      width: 302px;
      }
}

/* 414px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 414px) {
.back img {
          height: 880px;
          }

.info {
      flex-direction: column;
      }

.first {
       margin-bottom: 10px;
       }

.text {
      width: 290px;
      }

.pc {
    display: none;
    }

.sp {
    display: block;
    }
}

/* 402px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 402px) {
.column {
        width: 85%;
        }

.back img {
          height: 900px;
          }
}

/* 375px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 375px) {
.back img {
          height: 880px;
          }

.text {
      width: 278px;
      }
}

/* 360px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 360px) {
.back img {
          height: 870px;
          }
}