@charset "UTF-8";
.disnon {
  display: none; }

.bnInnerWrap {
  position: relative; }

.mag_bnInnerWrap {
  border: 3px solid #68a667; }

.qa_bnInnerWrap {
  border: 3px solid #392aa9; }

.tech_bnInnerWrap {
  border: 3px solid #6d9dd6; }

.bknumber H2 {
  position: relative;
  color: #fff;
  font-size: 140%;
  background-image: none;
  background-color: #fff;
  padding: 0;
  margin: 0; }
  .bknumber H2.backN {
    background-color: #666; }
.bknumber UL LI {
  list-style: none;
  float: left;
  font-weight: bold;
  text-align: center; }
.bknumber .magNewBox {
  border-top: 2px solid #006b03;
  border-right: 2px solid #006b03;
  border-bottom: 2px solid #006b03;
  border-left: 7px solid #006b03;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }
.bknumber .qaNewBox {
  border-top: 2px solid #382aa3;
  border-right: 2px solid #382aa3;
  border-bottom: 2px solid #382aa3;
  border-left: 7px solid #382aa3;
  padding: 10px;
  margin-bottom: 40px;
  width: 100%;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }
.bknumber .bnTabBox {
  position: relative;
  padding: 33px 0 0; }
  .bknumber .bnTabBox UL {
    position: relative;
    margin: 0; }
  .bknumber .bnTabBox DIV.bnInner {
    position: relative;
    width: 100%;
    height: 555px;
    top: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden; }
  .bknumber .bnTabBox p.bkpage {
    position: absolute;
    top: 5px;
    right: 0; }
    .bknumber .bnTabBox p.bkpage A {
      display: inline-block;
      width: 100px;
      text-decoration: none;
      color: #7bad7c;
      padding: 5px;
      font-size: 12px;
      font-weight: bold;
      line-height: 12px;
      text-align: center;
      background: #d9e7d8;
      border-radius: 5px; }
      .bknumber .bnTabBox p.bkpage A:hover {
        color: #d9e7d8;
        background: #7bad7c; }
  .bknumber .bnTabBox A.kodoku {
    display: block;
    text-align: center;
    padding: 30px 0; }

SPAN.newMagaTitle {
  display: block;
  color: #ababab;
  font-size: 160%;
  font-weight: bold;
  letter-spacing: 7px;
  margin-bottom: 20px; }

#htmlNew .InnerLeft, #qandaNew .InnerLeft {
  display: none; }
#htmlNew .InnerRight, #qandaNew .InnerRight {
  padding: 0 0 35px 0;
  width: 100%; }
#htmlNew .bnInnerBox, #qandaNew .bnInnerBox {
  border-bottom: 0; }

#tab {
  position: absolute;
  top: 0; }
  #tab LI {
    padding: 5px 10px;
    font-size: 15px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 5px 5px 0 0; }
    #tab LI.maga {
      color: #fff;
      background: #68a667;
      border-top: 2px solid #68a667;
      border-left: 2px solid #68a667;
      border-right: 2px solid #68a667; }
    #tab LI.qa {
      color: #fff;
      background: #392aa9;
      border-top: 2px solid #392aa9;
      border-left: 2px solid #392aa9;
      border-right: 2px solid #392aa9; }
    #tab LI.tech {
      color: #fff;
      background: #064b9e;
      border-top: 2px solid #064b9e;
      border-left: 2px solid #064b9e;
      border-right: 2px solid #064b9e; }
    #tab LI.maga, #tab LI.qa, #tab LI.tech {
      opacity: 0.6;
      filter: alpha(opacity=60);
      -moz-opacity: 0.6; }
    #tab LI.select, #tab LI.maga:hover, #tab LI.qa:hover, #tab LI.tech:hover {
      cursor: pointer;
      opacity: 1;
      filter: alpha(opacity=100);
      -moz-opacity: 1; }

#tab2 LI:hover, #tab2 LI.select, #tab3 LI:hover, #tab3 LI.select, #tab4 LI:hover, #tab4 LI.select {
  cursor: pointer;
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1; }

DIV.yearMenu, div.yearMenu2, div.yearMenu3 {
  margin: 0; }
  DIV.yearMenu UL LI, div.yearMenu2 UL LI, div.yearMenu3 UL LI {
    color: #fff;
    font-size: 15px;
    margin-right: 5px;
    padding: 3px 10px; }

DIV.yearMenu UL LI {
  background: #8fbd8f; }

DIV.yearMenu2 UL LI {
  background: #737ad5; }

DIV.yearMenu3 UL LI {
  background: #6d9dd6; }

DIV.yearMenu UL LI, DIV.yearMenu2 UL LI, DIV.yearMenu3 UL LI {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6; }

DIV.textBox, DIV.textBox2, DIV.textBox3 {
  position: relative;
  top: 0;
  width: 97.5%;
  margin: 0;
  padding: 0; }
  DIV.textBox .volBox2, DIV.textBox2 .volBox2, DIV.textBox3 .volBox2 {
    margin: 10px 0;
    padding: 0;
    border: 1px solid #ccc;
    height: 430px;
    width: 100%;
    overflow: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; }
  DIV.textBox UL LI, DIV.textBox2 UL LI, DIV.textBox3 UL LI {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6; }
    DIV.textBox UL LI:hover, DIV.textBox2 UL LI:hover, DIV.textBox3 UL LI:hover {
      cursor: pointer;
      opacity: 0.8;
      filter: alpha(opacity=80);
      -moz-opacity: 0.8; }

div.textBox UL LI {
  color: #68a667;
  font-size: 12px;
  margin: 1px 2px 1px 0;
  padding: 2px 5px;
  width: 59px;
  background: #fff; }
div.textBox .volBox {
  padding: 10px 0 8px 10px;
  margin: 0;
  background: #8fbd8f; }

div.textBox2 UL LI {
  color: #382aa3;
  font-size: 12px;
  margin: 1px 2px 1px 0;
  padding: 2px 5px;
  width: 59px;
  background: #fff; }
div.textBox2 .volBox {
  padding: 10px 0 8px 10px;
  margin: 0;
  background: #737ad5; }

div.textBox3 UL LI {
  color: #6d9dd6;
  font-size: 12px;
  margin: 1px 2px 1px 0;
  padding: 2px 5px;
  width: 59px;
  background: #fff; }
div.textBox3 .volBox {
  padding: 10px 0 8px 10px;
  margin: 0;
  background: #6d9dd6; }

.bnInnerBox {
  padding: 0;
  margin: 0;
  border-bottom: 1px dotted #666;
  width: 100%;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; }

.InnerLeft {
  position: relative;
  text-align: center;
  background: #e9e9e9;
  width: 100px;
  padding: 15px 10px 40px;
  margin: 0;
  min-height: 185px; }
  .InnerLeft P {
    position: absolute;
    top: 45%;
    text-align: center;
    font-weight: bold;
    color: #666; }

.InnerRight {
  width: calc(100% - 115px);
  padding: 15px 10px 30px;
  margin: 0 15px 0 0; }
  .InnerRight H3 {
    font-size: 18px;
    color: #333;
    font-weight: bold !important;
    margin-bottom: 10px; }
    .InnerRight H3 SPAN.dayT {
      display: inline-block;
      float: left;
      color: #fff;
      width: 50px;
      padding: 2px;
      margin-right: 5px;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      background: #d3d3d3; }
    .InnerRight H3:before {
      display: none; }
  .InnerRight P {
    padding: 10px 0 0;
    margin: 0; }
  .InnerRight A {
    display: block;
    position: absolute !important;
    bottom: 10px;
    right: 10px;
    text-align: right; }

.inquiry {
  width: 100%;
  border-radius: 5px;
  text-align: center;
  padding: 20px 15px 12px;
  margin: 30px auto 0;
  background-color: #efefef; }
  .inquiry P {
    margin: 10px 0 0 0; }

.bk2009mg H2 {
  font-size: 28px;
  font-weight: normal;
  line-height: 28px;
  color: #333;
  padding: 0 0 7px 0;
  margin-bottom: 30px; }

.textMailMag {
  position: relative;
  border: 1px solid #ccc;
  padding: 0 0 50px;
  width: 630px;
  margin: 40px auto 0; }
  .textMailMag H2 {
    background: none;
    width: 470px;
    border-bottom: 2px solid #ccc;
    margin: 60px auto 30px;
    line-height: 1.3; }
    .textMailMag H2:before {
      display: none; }
    .textMailMag H2:after {
      display: none; }
  .textMailMag P {
    width: 470px;
    margin: 0 auto 23px;
    word-break: break-all !important; }
  .textMailMag span.datamg {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #777; }

.w2MG p {
  width: 490px; }
.w2MG h2 {
  width: 490px; }

.htmlmagSearch {
  display: flex;
  justify-content: center;
  padding: 30px 0 40px; }
  .htmlmagSearch input.inptext {
    width: 400px; }

.searchBtn {
  vertical-align: bottom;
  border-top: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  border-radius: 0 3px 3px 0; }

.bk2009mg dl {
  font-size: 16px; }
  .bk2009mg dl dt {
    font-weight: bold; }
  .bk2009mg dl dd {
    padding-bottom: 20px; }

.overlayBox {
  position: fixed;
  inset: 0;
  /* top, right, bottom, left: 0 と同じ */
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 9999; }
  .overlayBox.show {
    opacity: 1;
    visibility: visible; }
  .overlayBox .innerBox #magaEnt {
    display: block;
    position: relative;
    height: 366px;
    width: 460px;
    background: url(/magazine/htmlmail/img/bg_float01.png) no-repeat center 10px; }
    .overlayBox .innerBox #magaEnt .magaBkBtn05 {
      position: absolute;
      top: 283px;
      left: 15px; }
    .overlayBox .innerBox #magaEnt .magaBkBtn06 {
      position: absolute;
      top: 283px;
      right: 15px; }
  .overlayBox .innerBox .overlayCloseBtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(/magazine/htmlmail/img/close.png) no-repeat 0 0;
    width: 25px;
    height: 25px;
    text-indent: -9999px; }

@media only screen and (max-width: 767px) {
  .htmlmagSearch {
    display: none; }

  p.magaBkp1 {
    margin: 0;
    width: 100%; }
    p.magaBkp1 A {
      display: block; }

  #tab li {
    width: 65px; }

  .bkQaMgBox, .bkHtmlMgBox {
    width: 100%;
    margin: 0 auto; }

  .InnerRight {
    width: 100%;
    box-sizing: border-box;
    height: auto !important;
    padding-bottom: 40px; }
    .InnerRight A {
      bottom: 10px; }
    .InnerRight h3 span.dayT {
      padding: 0; }

  .magNewBox .InnerRight, .qaNewBox .InnerRight {
    height: auto !important;
    width: 100%;
    box-sizing: border-box;
    padding: 0; }
    .magNewBox .InnerRight p, .qaNewBox .InnerRight p {
      width: 100% !important;
      padding-bottom: 0; }
      .magNewBox .InnerRight p SPAN, .qaNewBox .InnerRight p SPAN {
        font-size: 14px; }
  .magNewBox P.magNewTitle, .qaNewBox P.magNewTitle {
    font-size: 20px !important;
    line-height: 22px; }

  .bknumber .bnTabBox {
    padding-top: 500px; }
    .bknumber .bnTabBox div.bnInner {
      box-sizing: border-box;
      height: 380px; }
    .bknumber .bnTabBox p.bkpage {
      right: 0;
      width: 110px; }

  div.textBox .volBox2, div.textBox2 .volBox2, div.textBox3 .volBox2 {
    width: 96%;
    padding-bottom: 10px;
    height: 300px; }

  .titleSp, .titleSp2, .titleSp3, .titleSp4 {
    display: block;
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    padding-top: 15px; }

  .titleSp {
    color: #392ba6; }

  .titleSp2 {
    color: #006a00; }

  .titleSp3 {
    font-size: 110%;
    color: #fff;
    line-height: 1.2; }
    .titleSp3 SPAN {
      color: #ffff00; }

  .titleSp4 {
    color: #009999;
    font-size: 110%;
    line-height: 1.2;
    padding-top: 0; }

  .spbnPage {
    width: 100%; }
    .spbnPage .disnon {
      display: block;
      visibility: visible; }
    .spbnPage .yearMenu, .spbnPage .yearMenu2, .spbnPage .yearMenu3 {
      display: none; }
    .spbnPage span.spYearbn {
      display: block;
      text-align: center;
      padding: 5px 0;
      color: #48944A;
      font-weight: bold; }
    .spbnPage .qatext span.spYearbn {
      color: #7b7aef; }
    .spbnPage .techtext span.spYearbn {
      color: #6d9dd6; }
    .spbnPage p.sphtmlTitle, .spbnPage p.spqandaTitle, .spbnPage p.sptechTitle {
      display: block;
      margin-bottom: 0; }
      .spbnPage p.sphtmlTitle SPAN, .spbnPage p.spqandaTitle SPAN, .spbnPage p.sptechTitle SPAN {
        display: inline-block;
        padding: 5px 10px;
        color: #fff; }
    .spbnPage p.sphtmlTitle {
      border-bottom: 3px solid #68a667; }
      .spbnPage p.sphtmlTitle SPAN {
        background: #68a667; }
    .spbnPage p.spqandaTitle {
      border-bottom: 3px solid #8880cd; }
      .spbnPage p.spqandaTitle SPAN {
        background: #8880cd; }
    .spbnPage p.sptechTitle {
      border-bottom: 3px solid #6d9dd6; }
      .spbnPage p.sptechTitle SPAN {
        background: #6d9dd6; }
    .spbnPage div.textBox, .spbnPage div.textBox2, .spbnPage div.textBox3 {
      position: relative;
      width: 96%;
      margin: 0 2%;
      top: 0; }
      .spbnPage div.textBox .volBox, .spbnPage div.textBox2 .volBox, .spbnPage div.textBox3 .volBox {
        display: none; }
      .spbnPage div.textBox .volBox2, .spbnPage div.textBox2 .volBox2, .spbnPage div.textBox3 .volBox2 {
        width: 100%;
        overflow: visible;
        height: auto;
        padding: 0;
        margin: 0;
        border: 0; }
        .spbnPage div.textBox .volBox2:after, .spbnPage div.textBox2 .volBox2:after, .spbnPage div.textBox3 .volBox2:after {
          content: ".";
          clear: both;
          display: block;
          height: 0;
          visibility: hidden;
          overflow: hidden;
          font-size: 0em;
          line-height: 0; }
    .spbnPage .bnInnerBox {
      float: left;
      position: relative;
      box-sizing: border-box;
      background: #8fbd8f;
      border-bottom: 0;
      padding: 10px;
      width: 100%;
      border-right: 2px solid #fff;
      border-left: 2px solid #fff;
      margin-bottom: 10px; }
    .spbnPage .qatext .bnInnerBox {
      background: #a7a0d4; }
    .spbnPage .techtext .bnInnerBox {
      background: #a7cef2; }
    .spbnPage .InnerLeft {
      display: flex;
      align-items: center;
      width: 33.33%;
      min-height: 100%;
      padding: 0;
      background: none; }
      .spbnPage .InnerLeft P {
        position: relative;
        width: 100% !important;
        top: 0;
        margin: 0 !important;
        color: #fff;
        line-height: 1;
        font-size: 14px !important;
        padding: 10px 10px 10px 0;
        text-align: center;
        box-sizing: border-box; }
    .spbnPage .InnerRight {
      display: flex;
      align-items: center;
      justify-content: space-between;
      float: none;
      width: 100%;
      margin: 0;
      padding: 0; }
      .spbnPage .InnerRight H3 {
        width: auto !important;
        font-size: 11px;
        color: #fff;
        line-height: 1;
        padding: 10px 0;
        text-align: left;
        display: block;
        margin: 0 !important; }
      .spbnPage .InnerRight P, .spbnPage .InnerRight h3 span.dayT, .spbnPage .InnerRight h3 span.dayY {
        display: none; }
      .spbnPage .InnerRight A {
        display: block;
        width: auto;
        height: auto;
        position: relative !important;
        top: 0;
        left: 0;
        background: none;
        line-height: 1px; }

  .bkpage2009sp {
    text-align: center; }
    .bkpage2009sp A {
      display: inline-block;
      color: #444;
      padding: 5px 10px;
      border: 1px solid #444444;
      border-radius: 3px; }

  .inquiry {
    width: 96%;
    margin: 0 2%;
    box-sizing: border-box; }
    .inquiry P {
      text-align: left; }

  #qandaNew .InnerRight h3, #htmlNew .InnerRight h3 {
    font-size: 14px; }

  .textMailMag {
    width: 96%;
    margin: 0 2%;
    box-sizing: border-box; }
    .textMailMag h2, .textMailMag p {
      width: 90%;
      margin: 0 5% 20px;
      box-sizing: border-box;
      word-wrap: break-word; }
    .textMailMag h2 {
      margin: 20px 5%; }
    .textMailMag span.datamg {
      top: 10px; }

  .htmlmagSearch #srchBoxPage {
    float: none;
    margin: 0 auto 20px !important;
    width: 90%; }

  .bk2009mg dl {
    width: 96%;
    margin: 0 2% 15px;
    box-sizing: border-box; } }