[style0/css/style.css]
/*ボディ*/
html {
     font-size: 20px;
     overflow-x: hidden;
     }

body {
      margin: 0;
      padding: 0;
      font-family: "Zen Maru Gothic", serif;
      }

.section {
         width: auto;
         }

.topimg {
         text-align: center;
         }

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

.next {

      }

.sikaku_box.fixed {
                  align-items: right;
                  position: fixed;
                  top: -1060px;
                  right: 0;
                  z-index: +1;
                  }

.sikaku_box.fixed.none {
                       opacity: 0;
                       z-index: -1;
                       }

.white {
    position: absolute;
    top: 1100px;
    right: 20px;
    z-index: 2;
    }

.fixed_btn { 
           margin-top: 30px;
           padding: 38px 10px 6px;
           text-align: center;
           margin-left: auto;
           border: none;
           border-radius: 50%;
           width: 120px;
           height: 120px;
           background-color: #dedede;
           line-height: 1.8;
           font-size: 14px;
           z-index: +1;
           }

.fixed_btn:hover { 
                 background-color: #222222;
                 }

.fixed_btn a { 
             color: #ffffff;
             font-weight: bold;
             }

.fixed_btn span { 
                font-size: 16px;
                }

.iconlink {
          width: 60px;
          height: auto;
          margin: 0 auto;
          padding-top: 40px;
          text-align: center;
          }

.iconlink img {
              width: 40px;
              }

.iconlink span {
               opacity: 0;
               visibility: hidden;
               pointer-events: none;
               font-size: 12px;
               text-align: center;
               }

.iconlink a::before {
                    opacity: 0;
                    transition: 0.5s;
                    content: "";
                    position: absolute;
                    visibility: hidden;
                    pointer-events: none;
                    }

.iconlink a:hover:before {
                         opacity: 1;
                         visibility: visible;
                         }

.iconlink a:hover span {
                       opacity: 1;
                       visibility: visible;
                       }

.tw {
    padding-bottom: 10px;
    width: 60px;
    }

.in {
    width: 60px;
    text-align: center;
    }


.tw:hover {
          filter: brightness(0.1);
          }

.in:hover {
          filter: brightness(0.1);
          }

.ohanasi {
         position: relative;
         text-align: center;
         margin: 0 auto;
         padding-left: 140px;
         padding: 60px 0px 50px;
         width: 70%;
         height: auto;
         }

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

.pc2 img {
         display: none;
         }

.sp img {
        display: none;
        }

.flexbox {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 18%;
         left: 12%;
         }

.ohanasi h1 {
            text-align: left;
            color: #ffada9;
            font-size: 80px;
            margin: 0!important;/*文字がずれている場合や*/
            padding: 0!important;/*文字が折り返される場合*/
            letter-spacing: 0.05em;
            }

.text {
      text-align: left;
      color: #222222;
      }

.pc-only {
         padding-top: 30px;
         padding-bottom: 50px;
         }

.sp-only p {
           display: none;
           padding: 0;
           }

.text p {
        line-height:3.5;
        }

.start  {
         padding: 20px 25px 25px;
         border-radius: 30px;
         border: 3px dotted #ffc7a9;
         color: #222222;
         background-color: #faf2b2;
         font-size: 30px;
         }

.start:hover {
              background-color: #ffc7a9;
              }

.buttonclass {
             font-size: 20px;
             }

.setsumei {
          padding-left: 30px;
          color: #222222;
          }

.sp p {
      display: none;
      }

.side {
      display: flex;
      align-items: center;
      }


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

.pc2 img {
         display: block;
         height: 1000px;
         }

.sikaku_box.fixed {
                  top: -1380px;
                  }

.white {
       top: 1420px;
       }
}

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

.pc img {
        display: block;
        }

.sikaku_box.fixed {
                  top: -1060px;
                  }

.white {
       top: 1100px;
       }
}

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

.pc-only {
         padding-bottom: 30px;
         }

.sikaku_box.fixed {
                  top: -940px;
                  }

.white {
       top: 970px;
       }
}

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

.pc-only {
              padding-top: 10px;
              padding-bottom: 20px;
              }

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

.buttonclass {
               font-size: 18px;
               }

.setsumei p{
           font-size: 18px;
           }

.sikaku_box.fixed {
                  top: -880px;
                  }

.white {
       top: 900px;
       }
}

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

.white {
       top: 770px;
       }
}

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

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

.start {
         padding: 5px 20px 15px;
         }

.buttonclass {
               font-size: 16px;
               }

.setsumei {
          padding-left: 20px;
          }

.setsumei p{
           font-size: 16px;
           margin-top: 0px;
           }
.side {
      display: flex;
      flex-direction: column;
      align-items: start;
      }

.sikaku_box.fixed {
                  top: -720px;
                  }

.white {
       top: 740px;
       }
}

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

.white {
       top: 680px;
       }
}

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

.fixed_btn { 
           margin-top: 30px;
           padding: 35px 10px 6px;
           width: 100px;
           height: 100px;
           background-color: #dedede;
           line-height: 1.5;
           font-size: 12px;
           }

.sikaku_box.fixed {
                  top: -620px;
                  }

.white {
       top: 640px;
       }
}

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

.sikaku_box.fixed {
                  top: -700px;
                  }

.white {
       top: 1000px;
       }
}

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

.white {
       top: 860px;
       }
}

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

.flexbox {
         top: 100px;
         }

.pc img {
        display: none;
        }

.pc-only {
         padding-bottom: 30px;
         }

.parent {
         width: auto;
         height: 600px;
         }

.sp img {
        display: block;
        height: 100%;
        }

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

.flexbox {
         margin-right: 12%;
         }

.sikaku_box.fixed {
                  top: -520px;
                  }

.white {
       top: 540px;
       }
}

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

.white {
       top: 520px;
       }
}

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

.white {
       display: none;
       }
}

/* 460px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 460px) {
.ohanasi h1 {
            font-size: 30px;
            }

.text {
       max-width: 340px;
       }

.text p {
        font-size: 15px;
        margin-bottom: 20px;
        }

.buttonclass {
               font-size: 15px;
               }

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

.setsumei {
          padding-left: 0px;
          }

.pc-only {
         display: none;
         }

.sp-only p {
           display: block;
           }
}

/* 400px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 400px) {
.pc p{
     display: none;
     }

.sp p{
     display: block;
     text-align: left;
     line-height: 2;
     padding-top: 10px;
     }
}

/* 375px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 375px) {
.ohanasi h1 {
            font-size: 24px;
            }
}


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

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

.bookmark {
          position: absolute;
          top: 0px;
          left: 80%;
          }

.bookmark img {
              height: 300px;
              width: auto;
              }

.bookmark:hover {
                transform: translateY(-15px);
                transition: all 0.5s;
                cursor: pointer;
                }

.tepu {
      position: absolute;
      top: 110px;
      left: 70px;
      }

.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: 160px;
    left: 140px;
    }

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

.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: 170px;
    left: 220px;
    }

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

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

.container {
      display: flex;
      flex-wrap: wrap; /* flexアイテムを折り返す（複数行に配置する） */
      position: absolute;/*重ねたい子要素にabsolute*/
      top: 300px;
      left: 0;
      right: 0;
      width: 70%;
      height: auto;
      margin: 0 auto;
      justify-content: space-between;
      row-gap: 60px;
      }

.column {
      width: calc(100%/3 - 50px);
      height: auto;
      display: flex;
      flex-direction: column;
      border: 1px solid #transparent;
      box-sizing: border-box; /* ボックスモデルを維持するために必要なスタイル */
      }

.column-img img {
                width:100%;
                height:auto;
                }

.column-img:hover {
                  transform: rotate(5deg);/*どれぐらい傾けるか*/
                  transition: all 0.3s;
                  }

.column h3{
           background: #ffffff;
           line-height: 2;
           display: inline-block;
           padding: 0px 20px;
           }

.mark {
      text-align: left;
      }


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

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

.back img {
          height: 100%;
          }
}

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

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

.back {
      height: 1540px;
      }
}

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

.bookmark img {
              height: 250px;
              width: auto;
              }

.bookmark {
          top: 0px;
          }

.tepu img {
          width: 80%;
          height: auto;
          }

.tepu {
      top: 90px;
      left: 30px;
      }

.ja {
    top: 130px;
    left: 100px;
    }

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

.en {
    top: 137px;
    left: 170px;
    }

.title h2 {
          font-size: 26px;
          }

.title {
        top: 195px;
        left: 120px;
        }

.container {
           top: 240px;
           width: 73%;
           height: auto;
           }

.column {
      width: calc(100%/3 - 40px);
      }
}

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

.back {
       height: 1380px;
       }

.container {
           top: 250px;
           }
}

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

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

.back {
      height: 1600px;
      }

.container {
           top: 260px;
           }
}

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

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

.container {
           top: 260px;
           }

.back {
      height: 1380px;
      }
}

/* 720px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 720px) {
.bookmark {
          left: 78%;
          }
}

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

.bookmark img {
              height: 200px;
              width: auto;
              }

.bookmark {
          top: 10px;
          }
}

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

.container {
           row-gap: 30px;
           }
}

/* 510px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 510px) {
.back {
      height: 1110px;
      }

.column {
        width: calc(100%/3 - 10px);
        }

.container {
           row-gap: 20px;
           }
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
.back {
      height: 1130px;
      }

.tepu {
      left: -5px;
      }

.ja {
    left: 70px;
    }

.en {
    left: 140px;
    }

.title {
        left: 72px;
        }

.container {
           width: 85%;
           height: auto;
           top: 230px;
           }

.bookmark {
          left: 75%;
          }
}

/* 440px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 440px) {
.bookmark {
          left: 73%;
          }
}

/* 428px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 428px) {
.back {
      height: 1050px;
      }

.container {
           width: 85%;
           height: auto;
           }

.column h3{
           font-size: 15px;
           }
}

/* 400px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 400px) {
.back {
      height: 1020px;
      }

.bookmark {
          left: 70%;
          }
}

/* 395px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 395px) {
.container {
           width: 90%;
           height: auto;
           }

.column h3{
           font-size: 14px;
           }
}

/* 375px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 375px) {
.back {
      height: 1000px;
      }
}

/* 360px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 360px) {
.bookmark {
          left: 68%;
          }
}


/*お知らせ*/
#showButton {
            border: none;
            font-family: "Zen Maru Gothic", serif;
            font-size: 20px;
            padding: 10px 20px;
            margin-top: 30px;
            margin-bottom: 30px;
            color: #222222;
            }

#showButton:hover {
                  background-color: #ffc7a9;
                  color: #fff;
                  }

#content {
         display: none; /* 初めは非表示 */
         padding: 20px 0px;
         }

.matome {
        background-image: url(../img0/news.png);
        background-size: cover;
        text-align: center;
        margin: 0 auto;
        margin-bottom: 80px;
        padding-bottom: 100px;
        width: 70%;
        height: auto;
        }

.tepu2 {
       width: 310px;
       height: auto;
       padding-top: 50px;
       margin-left: 65px;
       margin-bottom: 40px;
       position: relative;
      }

.ja2 {
     position: absolute;
     top: 50px;
     left: 25px;
     text-align: left;
     color: #FFFFFF;
     }

.ja2 h2{
      font-size: 40px;
      }

.en2 {
     position: absolute;
     top: 55px;
     left: 200px;
     text-align: left;
     color: #FFFFFF;
     }

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

.box {
     width: 70%;
     height: auto;
     margin: 0 auto;
     }

.news1 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     }

.news2 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news3 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news4 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news5 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news6 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news7 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.news8 {
     display: flex;
     justify-content: center;
     width: 100%;
     height: auto;
     margin: 0 auto;
     padding-bottom: 30px;
     }

.thumbnail img {
                height: 139px;
                }

.thumbnail {
           height: 139px;
           }

.child2 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child3 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child4 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child5 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child6 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child7 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child8 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.child9 {
        background-color: #ffffff;
        flex-grow: 1;
        height: auto;
        margin-left: 20px;
        }

.grandchild {
            display: flex;
            align-items: center;
            border-bottom: 1px solid #efefef;
            width: 100%;
            padding: 0 30px;
            }

.date h3 {
         color: #ffada9;
         font-family: "Jost", sans-serif;
         font-optical-sizing: auto;
         font-weight: 400;
         font-style: normal;
         font-size: 22px;
         padding: 0px 20px 0px 0px;
         }

.tag h3{
       background: #efefef;
       line-height: 2;
       display: inline-block;
       padding: 0px 20px;
       }

.pink {
      color: #ffada9;
      }

.toggle2 {
        display: none;
        }

.toggle3 {
        display: none;
        }

.toggle4 {
        display: none;
        }

.toggle5 {
        display: none;
        }

.toggle6 {
        display: none;
        }

.toggle7 {
        display: none;
        }

.toggle8 {
        display: none;
        }

.toggle9 {
        display: none;
        }

.Label {
       padding: 1em 30px;
       width: 100%;
       display: block;
       color: #666666;
       font-size: 18px;
       background:#ffffff;
       text-align: left;
       }

/*タイトル横の矢印*/
.Label::before {
               content:"";
               width: 6px;
               height: 6px;
               border-top: 1px solid #222222;
               border-right: 1px solid #222222;
               -webkit-transform: rotate(45deg);
               position: absolute;
               top:calc( 50% - 3px );
               right: 20px;
               transform: rotate(135deg);
               }

.Label,
.content {
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         transform: translateZ(0);
         transition: all 0.3s;
         }

/*本文*/
.content {
         height: 0;
         padding: 0 30px;
         overflow: hidden;
         background-color: #ffffff;
         text-align: left;
         margin: 0;
         }

.content p {
           line-height: 2em;
           font-size: 18px;
           margin: 0;
           }

/*開閉時*/
.toggle2:checked + .news1 {
                        max-height: 500px;
                        }

.toggle2:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle2:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle3:checked + .news2 {
                        max-height: 500px;
                        }

.toggle3:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle3:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle4:checked + .news3 {
                        max-height: 500px;
                        }

.toggle4:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle4:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle5:checked + .news4 {
                        max-height: 500px;
                        }

.toggle5:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle5:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle6:checked + .news5 {
                        max-height: 500px;
                        }

.toggle6:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle6:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle7:checked + .news6 {
                        max-height: 500px;
                        }

.toggle7:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle7:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle8:checked + .news7 {
                        max-height: 500px;
                        }

.toggle8:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle8:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }

.toggle9:checked + .news8 {
                        max-height: 500px;
                        }

.toggle9:checked + .Label + .content {
                                    max-height; 500px;
                                    height: auto;
                                    padding: 0px 30px 30px ;
                                    transition: all .3s;
                                    }

.toggle9:checked + .Label::before {
                                 transform: rotate(-45deg) !important;
                                 }
/* 1300px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1300px) {
.tepu2 img {
          width: 80%;
          height: auto;
          }

.ja2 {
     top: 45px;
     left: 45px;
     }

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

.en2 {
     top: 30px;
     left: 180px;
     }

.tepu2 {
       padding-top: 40px;
       margin-left: 25px;
       margin-bottom: 30px;
       }

.box {
     width: 73%;
     }
}

/* 1200px以下に適用されるCSS（タブレット用） */
@media screen and (max-width: 1200px) {
.date h3 {
         font-size: 18px;
         padding-right: 10px;
         }

.tag h3 {
         font-size: 16px;
         padding-right: 10px;
         padding-left: 10px;
         }

.Label {
       font-size: 16px;
       }

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

.toggle2:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle3:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle4:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle5:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle6:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle7:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle8:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }

.toggle9:checked + .Label + .content {
                                    padding: 0px 30px 20px ;
                                    }
.thumbnail {
           height: 121px;
           }

.thumbnail img {
               height: 121px;
               }

.matome {
        padding-bottom: 80px;
        }
}

/* 1000px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 1000px) {
.matome {
        width: 100%;
        height: auto;
        }

.back2 img {
          height: 100%;
          }
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {
.matome {
        margin-bottom: 0;
        padding-bottom: 60px;
        }

.grandchild {
            padding: 0 20px;
            }

.Label {
       padding: 16px 20px;
       }

.toggle2:checked + .Label + .content {
                                    padding: 0px 20px 20px;
                                    }

.toggle3:checked + .Label + .content {
                                    padding: 0px 20px 20px;
                                    }

.toggle4:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.toggle5:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.toggle6:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.toggle7:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.toggle8:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.toggle9:checked + .Label + .content {
                                    padding: 0px 20px 20px ;
                                    }

.thumbnail {
           display: none;
           }

.box {
     width: 85%;
     }

.tepu2 {
       margin-left: 20px;
       margin-bottom: 40px;
       width: 250px;
       height: 126px;
       }

.tepu2 img {
           width: 100%;
           }

.ja2 {
     left: 20px;
     }

.en2 {
     left: 155px;
     }

.child2 {
        margin-left: 0;
        }

.child3 {
        margin-left: 0;
        }

.child4 {
        margin-left: 0;
        }

.child5 {
        margin-left: 0;
        }

.child6 {
        margin-left: 0;
        }

.child7 {
        margin-left: 0;
        }

.child8 {
        margin-left: 0;
        }

.child9 {
        margin-left: 0;
        }
}