@charset "UTF-8";
#teiden{
  padding-bottom: 100px;
}
#teiden img{
 max-width: 100%;
 height:auto;
}
#teiden h2{
 display: inline-block;
 font-size: 25px;
 font-weight: bold;
 padding:10px 15px;
 border:1px solid #000;
 margin-top: 50px;
 margin-bottom: 30px;
}
#teiden h3{
 font-size: 20px;
 font-weight: bold;
 padding-bottom: 0.5em;
 border-bottom: 1px solid #000;
}
#teiden .flex{
 display: flex;
 flex-wrap: wrap;
 padding:15px 3%;
 border-bottom: 1.5px dotted #707070;
}
#teiden .flex.last{
 border: none;
 margin-bottom: 50px;
}
#teiden .flex.first{
 border-top: 1.5px dotted #707070;
}
#teiden .flex.none{
  border: none;
}
#teiden .flex .left{
 width: 350px;
 margin-right: 30px;
 box-sizing: border-box;
}
#teiden .flex .right{
 width: calc(100% - 380px);
}
#teiden .top{
  padding: 15px 3% 50px;
}
#teiden .top img{
 width: 600px;
}
#teiden .note{
 position: relative;
 width: 94%;
 margin:15px auto 56PX;
 border: 2px solid #707070;
 padding:64px 23px 35px;
 box-sizing: border-box;
 border-radius: 10px;
}
#teiden .note h4{
position: absolute;
left:0;
right:0;
margin:auto;
top:-20px;
font-size: 17px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 40em;
}
#teiden .note-box{
 display: flex;
 justify-content: space-between;
}
#teiden .note-box .note-item-left{
 width: 35%;
}
#teiden .note-item-right{
 width: 60%;
}
#teiden .note-item-right-flex{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#teiden .note-box .flex-item {
 width: 48%;
}
#teiden .note-box2 {
 display: flex;
}
#teiden .note-box2 img{
 width: 350px;
}
@media screen and (max-width: 999px) {
#teiden {
    padding-bottom: 50px;
  }
 #teiden .flex {
   padding: 15px 0;
  }
 #teiden .flex .left {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2rem;
 }
  #teiden .flex.last{
   margin-bottom: 0;
  }
  #teiden .flex .right{
   width: 100%;
  }
  #teiden h2 {
   font-size: 20px;
   line-height: 1.4;
   padding:10px;
   margin-top: 25px;
   margin-bottom: 15px;
  }
  #teiden h3 {
   font-size: 18px;
  }
  #teiden .note h4 {
   width: 90%;
   line-height: 1.4;
   font-size: 15px;
  }
  #teiden .note h4 img{
  width: 100px;
  margin-right: 5px;
  }
  #teiden .note{
  padding: 80px 15px 15px;
   width: 100%;
   margin:20px auto;
  }
  #teiden .note-box {
   display: block;
  }
#teiden .note-box .note-item-left,#teiden .note-item-right,#teiden .note-box .flex-item{
 width: 100%;
}
#teiden .note-box .flex-item:first-child{
margin-bottom: 2rem;
}
#teiden .note-box .flex-item img{
  width: 150px;
  display: block;
  margin:0 auto;
}
#teiden .note-box2 img {
 width: 150px;
}
}