/*Start　プログラミングとは */
/*背景色　赤色設定*/
.picBlock03 {
  width: 94.9%;
  margin: 0% 2.8% 0%;
}

.redBlock01 {
  background-image: url(../../../../img/v3/bukatsu/programming/BG-10_PROGRAM_0220.png);
  background-repeat: repeat-y;
  background-position: top;
  padding: 0% 5%;
  background-size: 100%;
  margin: 0% 2.7% 0% 2.9%;
  padding-top: 2%;
}
.smartPhoneLayout {
  margin: 0% 2.7% -1% 2.9%;
  width: 94.5%;
}

.moviePanel {
  overflow: hidden;
}
.moviePanel table {
  width: 100%;
}
.imgSizeTd {
  width: 24.25%;
  height: 10%;
  overflow: hidden;
}
.emptyTd {
  width: 1%;
}
.emptyTr {
  height: 3px;
}
.movieSize {
  width: 100%;
}
.twitterTimeLinePanel{
 margin-left: 30px;
}
.facebookTimeLinePanel{
  margin-right: 30px;
}
/*背景Transparent*/
.hoverStyle:hover {
  opacity: 0.8;
}
.selected {
  border: 3px solid #ffe320;
}
/* End　プログラミングとは */


/* Start　ポコタスDo */
/*背景色　青色画像設定*/
.blueBlock01 {
  background-image: url(../../../../img/v3/bukatsu/programming/BG-3_PROGRAM_0807.png);
  background-repeat: repeat;
  background-position: left top;
  padding: 2% 8% 0% 8%;
  position: relative;
  margin: 0% 2.8%;
  margin-bottom: -1%;
}

/* Start　どらえもんとプログラミングを体験しよう */
/*背景色　黄色画像設定*/
.yellowBlock02 {
  background-image: url(../../../../img/v3/bukatsu/programming/BG-1_PROGRAM_0217.png);
  background-repeat: repeat;
  background-position: left top;
  padding: 2% 8% 0% 8%;
  position: relative;
  margin: 0% 2.8%;
  margin-bottom: -1%;
}

.gameBtnTbl {
  width: 100%;
  margin: 1% 0;
}
.gameBtnTbl td {
  width: 50%;
}
.toRight {
  text-align: right;
}

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

.labelFooter {
  font-size: 14px;
  text-align: right;
  width: 100%;
  padding-top: 2%;
}
#volumeOFF {
  width: 99%;
}
#closeActive {
  width: 99%;
}
/* End　どらえもんとプログラミングを体験しよう */

/* Start　プログラミングゲームで遊ぼう */
/*文字色白文書の設定*/
.whitePara {
  font-size: 1.5vw;
  margin: 1% 5%;
}

/*背景があるサブタイトル設定*/
.subtitleText01 {
  color: #FFFFFF;
  font-size: 1.8vw;
  margin: 2% 10%;
  font-weight: bold;
}

/*空白スペース設定*/
.emptyDiv{
  height: 10px;
}

.gameBlock01 {
  position: relative;
}

/*白枠設定*/
.whiteBorder {
  border: 0.2vw solid #FFFFFF;
  border-radius: 25px 25px 25px 25px;
  margin: 0% 5%;
}

.gameTitleBlock02 {
  margin: 0% 10%;
  width: 80%;
}

.processBlock02 {
  width: 84%;
  margin: 2% 8%;
}
/* End　プログラミングゲームで遊ぼう */

/* Start　動画でプログラミングを学ぼう */
/*背景色　黄色□画像設定*/
.yellowBlock03 {
  background-image: url(../../../../img/v3/bukatsu/programming/BG-0_PROGRAM_0227.png);
  background-repeat: repeat-y;
  background-position:top;
}

.contentTitle {
  width: 100%;
  margin: 2% auto 3% auto;
}

.dottedLine {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  width: 90%;
  margin: 0% 5%;
}
.dottedLine:after {
  content: "....................................................................................................................................................................................";
  /*letter-spacing: 2px;*/
  font-size: 3vw;
  color: #FFFFFF;
  display: inline-block;
}

.movieOmochaLeft01 {
  position: absolute;
  left: 3%;
  width: 20%;
}
.movieOmochaRight01 {
  position: absolute;
  right: 2%;
  width: 20%;
  bottom: 15%;
}
.movieOmochaRight02 {
  position: absolute;
  right: 2%;
  width: 20%;
  bottom: 1%;
}
.movieOmochaRight03 {
  position: absolute;
  right: 2%;
  width: 20%;
  bottom: -4%;
}
/* End　動画でプログラミングを学ぼう */

/* Start　SCRATCHで作品づくりに挑戦してみよう */
/*Scratch背景画像設定*/
h2 {
  font-size: 1.5vw;
  color: #05c206;
  font-weight: bold;
}

.scratchBlock {
  background-image: url(../../../../img/v3/bukatsu/programming/BG-5_PROGRAM_0220.png);
  background-repeat: repeat-y;
  background-position: top;
  background-size: 100%;
}

.topBottom_div {
  padding: 1% 0%;
}

.scratch_div {
  margin: 0% 5% 0% 5%;
  width: 90%;
  border: 2px dashed #FFFFFF;
}

.title_style {
  width: 95%;
  margin: 1% 3% 0%;
}

.logo_div {
  position: relative;
}

.logo_size {
  vertical-align: middle;
  width: 99%;
}

.logoBox {
  width: 90%;
  margin: 2% 5%;
}

.scratchWhiteDiv {
  width: 90%;
  border-radius: 3px 3px;
  background-color: #FFFFFF;
  margin:1% 5%;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.textImgMargin {
  margin: 2% 3.5%;
}

.paraDiv {
  width: 50%;
  float: left;
}

.scratch_para {
  width: 96%;
  padding: 2% 2% 2% 4%;
}

.scratchText {
  font-size: 12px;
}

.imgDiv {
  width: 50%;
  float: right;
}

.scratchImg {
  width: 100%;
  padding: 2% 2%;
}

.work_div {
  margin: 2% 5%;
  width: 90%;
  background-image: linear-gradient(-45deg,#fff 25%,#ffff00 25%,#ffff00 50%,#fff 50%,#fff 75%,#ffff00 75%,#ffff00);
  background-size: 20px 20px;
  background-image: -webkit-linear-gradient(-45deg,#fff 25%,#ffff00 25%,#ffff00 50%,#fff 50%,#fff 75%,#ffff00 75%,#ffff00);
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.workImg {
  width: 100%;
  padding: 2% 0%;
}

.workImg01 {
  width: 86%;
  padding: 0% 7%;
}

.note_text {
  font-size: 0.8vw;
  font-weight: bold;
  text-align: center;
  width: 90%;
  padding: 0% 5%;
  margin-bottom: 1%;
}

.btn_div {
  margin: 0% 32%;
  padding: 2% 0%;
}

.greenbtn {
  background-color: #05c206;
  border-radius: 15px 15px 15px 15px;
  width: 100%;
  float: left;
}

.wakusen2 {
  margin-top: 20px;
  text-align: center;
  font-size: 1.8vw;
  font-weight: bold;
  color: #000;
  text-shadow:
      0 2px 0 #fff,
      2px 0 0 #fff,
      0 -2px 0 #fff,
      -2px 0 0 #fff,
      -2px -2px 0 #fff,
      2px -2px 0 #fff,
      -2px 2px 0 #fff,
      2px 2px 0 #fff;
}

.contest_div {
  width: 90%;
  background-color: #FFFFFF;
  margin: 0% 5%;
}

/*SliderのCSS*/
.worksSlider{
  box-sizing: border-box;
  border-radius: 5px;
  background: #fff;
  padding: 5px 5px;
}
.worksSlider .cover{
  margin: 2px;
}
.worksSlider .cover .img{
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

.workImgDiv {
  margin:2px;
  position: relative;
  top: 50%;
  left: 50%;
  right: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  object-fit: cover;
}

.workImgDiv img {
  position: relative;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-50%);
}

.seeMoreBtn_blue {
  background-color: #0080cb;
  border-radius: 15px 15px 15px 15px;
  border: 1px solid #FFFFFF;
  width: 300px;
  margin: 2% 33% 0%;
  text-align: center;
}

.omochaStyleLeft01 {
  position:absolute;
  top:0;
  left:0;
  width: 12%;
}
.omochaStyleLeft03 {
  position:absolute;
  top: 280%;
  left: -3.5%;
  width: 12%;
}
.omochaStyleRight01 {
  position:absolute;
  top:0;
  right:0;
  width: 12%;
}

.omochaStyleLeft02 {
  position: absolute;
    left: -9%;
    width: 12%;
    top: 0;
}
.omochaStyleRight02 {
  position: absolute;
  right: -9%;
  width: 12%;
  top: -25%;
}
.omochaStyleRight03 {
  position: absolute;
  right: -9%;
  width: 12%;
  top: 70%;
}
.omochaStyleLeft04 {
  position:absolute;
  width: 12%;
}
/* End　SCRATCHで作品づくりに挑戦してみよう */

/* Start　beプログラミング */
.youtube_div {
  width: 100%;
  padding-top: 3%;
}

.processBlock03 {
  width: 100%;
  height: 450px;
}

.plain_yellow {
  background-color: #ffd900;
/*  background-image: url(../../../../img/v3/bukatsu/programming/BG-8_PROGRAM_0220.png);
  background-repeat: repeat-y;
  background-position: left top;*/
  padding-bottom: 20px;
  margin: 0% 2.8%;
}

.plain_green {
  background-color: #89fd94;
/*  background-image: url(../../../../img/v3/bukatsu/programming/BG-9_PROGRAM_0220.png);
  background-repeat: repeat-y;
  background-position: top;*/
  padding-bottom: 20px;
  margin: 0% 2.8%;
}

.block_div {
  width: 90%;
  background-color: #f0e68c;
  margin: 0% 5%;
  padding: 1% 0;
}

.articleStyle {
  list-style-type: disc;
  padding: 1% 10%;
}
.newArticle:link,
.newArticle:visited {
  color: #000000;
  text-decoration: none;
}
.newArticle:hover,
.newArticle:active {
  color: #ff6c00;
  text-decoration: none;
}
.articleStyle li {
  font-size: 14px;
  font-size: 1.5rem;
}

.block_div td {
  width: 280px;
  padding:0 1px;
}

.block_div p {
  padding:1% 1%;
  font-size: 1vw;
}
/* End　beプログラミング */

.otherConfirm {
  margin: 0 25%;
}

.picBlock02 {
  width: 96%;
  margin: 2% 2% 0% 2%;
}

.bannerTable {
  width: 60%;
  margin: 1% 3%;
}
.bannerTable td {
  width: 30%;
  padding: 0.5% 0.5%;
}
.bannerTable td img {
  width: 100%;
}

.closeFirstBlock{
  width: 94.8%;
  margin: 0% 2.77% 0%;
}

.worksMoreButton{
  text-align: center;
  margin-top: 2%;
}

/* End　beプログラミング */

/*デバイスの横幅が321以上768以下の場合*/
@media screen and (max-width:768px) {
  .paraDiv {
    width: 100%;
  }

  .imgDiv {
    width: 100%;
  }

  .seeMoreBtn_blue {
    width: 130px;
    margin: 2% 30%;
  }

  .scratchText {
    font-size: 1vw;
  }

  .otherConfirm {
    margin:0 12% 5px 12%;
    width: 76%;
  }

  .labelFooter {
    font-size: 10px;
  }

  .articleStyle li {
    font-size: 14px;
    font-size: 1.2rem;
  }

  .wakusen2 {
    font-size: 1.5rem;
  }

  .topBottom_div {
    padding: 1% 0%;
  }

  .scratch_div {
    margin: 0% 5% 0% 4.5%;
  }

  .btn_div {
    margin: 0% 23%;
  }
  .textImgMargin {
    margin: 0% 0%;
  }

  .bukatsuLogoArea div {
    width: 90%;
    text-align: center;
  }
}

 /* デバイスの横幅が320px以下の場合 */
@media only screen and (max-width: 320px) {
  .paraDiv {
    width: 100%;
  }

  .imgDiv {
    width: 100%;
  }

  .seeMoreBtn_blue {
    width: 130px;
    margin: 2% 30%;
  }

  .scratchText {
    font-size: 1vw;
  }

  .otherConfirm {
    margin:0 0 0;
    width: 100%;
  }
} /* デバイスの横幅が320px以下の場合 */