@charset "UTF-8";
ul {
  list-style: none;
}

img {
  border: none;
  vertical-align: bottom;
}

a {
  outline: none;
}

#gaCol {
  height: 0;
  overflow: hidden;
}

#member #container #wrapper #mycontents #mainCol .inner p {
  text-align: center;
}
#member #container #wrapper #mycontents #mainCol .inner #wrapGame {
  background: url(../images/common/frame/bg_fr03_lt.png) left 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_rt.png) right 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_lb.png) left 5px bottom 5px no-repeat, url(../images/common/frame/bg_fr03_rb.png) right 5px bottom 5px no-repeat rgba(150, 100, 0, 0.1);
  background-size: 30px;
}
@media (max-width: 768px) {
  #member #container #wrapper #mycontents #mainCol .inner #wrapGame {
    padding: 30px 0px;
  }
}
@media (min-width: 769px) {
  #member #container #wrapper #mycontents #mainCol .inner #wrapGame {
    padding: 40px 0px;
  }
}
@media (max-width: 768px) {
  #member #container #wrapper #mycontents #mainCol .inner #wrapGame {
    padding: 20px;
    margin-bottom: 30px;
  }
}
@media (min-width: 769px) {
  #member #container #wrapper #mycontents #mainCol .inner #wrapGame {
    padding: 30px;
    margin-bottom: 40px;
  }
}

#mycontents {
  /* .bnrCol {
    position: relative;
    @include fr03;

    .titleImg {
      text-align: center;
    }

    > dl {
      > dt {
        font-weight: bold;
        margin-bottom: 10px;
        border-bottom: 1px solid $color_base;
      }
    }
    .btn {
      margin-bottom: 0
    }

    @include sp {
      padding: 30px;
      margin-bottom: 30px;

      .titleImg {
        margin-bottom: 10px;
      }

      > dl {
        > dt {
          font-size: 1.6rem;
          line-height: 1.6em;
        }
      }
    }

    @include pc {
      padding: 40px;
      margin-bottom: 40px;
      display: flex;

      .titleImg {
        width: 50%;
      }

      > dl {
        //width: 35%;
        width: calc(50% - 100px);

        padding-left: 3%;

        > dt {
          font-size: 1.4rem;
          line-height: 1.6em;
        }
      }
    }
  } */
}
#mycontents .icoNolink,
#mycontents .icoNolinkEn {
  background: url(../images/members/mycontents/ico_no-link.png) center top no-repeat;
  background-size: contain;
}
#mycontents .icoLink {
  background: url(../images/members/mycontents/ico_link.png) center top no-repeat;
  background-size: contain;
}
#mycontents .icoNolink,
#mycontents .icoLink,
#mycontents .icoNolinkEn {
  position: absolute;
  z-index: 20;
  display: block;
  color: #fffdf2;
  text-align: center;
  line-height: 1.1em;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  #mycontents .icoNolink,
  #mycontents .icoLink,
  #mycontents .icoNolinkEn {
    right: -10px;
    top: -10px;
    width: 70px;
    padding-top: 27px;
    height: 70px;
  }
}
@media (min-width: 769px) {
  #mycontents .icoNolink,
  #mycontents .icoLink,
  #mycontents .icoNolinkEn {
    right: -15px;
    top: -15px;
    width: 110px;
    padding-top: 44px;
    height: 110px;
  }
}
@media (max-width: 768px) {
  #mycontents .icoNolinkEn {
    padding-top: 15px;
  }
}
@media (min-width: 769px) {
  #mycontents .icoNolinkEn {
    padding-top: 30px;
  }
}
#mycontents .contentsList {
  margin-bottom: 50px;
}
#mycontents .contentsList li {
  text-align: center;
  font-weight: bold;
}
#mycontents .contentsList li a {
  display: block;
  box-sizing: border-box;
  background: rgba(150, 100, 0, 0.1);
  padding: 10px;
  color: #180000;
}
#mycontents .contentsList li img {
  margin: 10px 0 0;
}
#mycontents .contentsList li .btn {
  position: relative;
  margin: 10px auto 0;
}
@media (max-width: 768px) {
  #mycontents .contentsList li {
    margin-bottom: 10px;
  }
}
@media (min-width: 769px) {
  #mycontents .contentsList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #mycontents .contentsList li {
    width: 32%;
    margin-bottom: 30px;
  }
  #mycontents .contentsList li:nth-of-type(2), #mycontents .contentsList li:nth-of-type(5) {
    margin: 0 2%;
  }
  #mycontents .contentsList li a:hover {
    opacity: 0.7;
    text-decoration: none;
  }
  #mycontents .contentsList li a .btn:hover, #mycontents .contentsList li a img:hover {
    opacity: 1;
  }
}

#mycontents {
  /*.ico_info {
    position: absolute;
    font-size: 0.8em;
    right: -3px;
    top: -3px;
    background: $color_red;
    color: $color_light;
    width: 2em;
    padding-top: 0.1em;
    height: 1.9em;
    border-radius: 50%;
    text-align: center !important;
    z-index: 10;
  }*/
  /*.charaList {    
    li {
      display: flex;
      position: relative;
      box-sizing: border-box;
      margin-bottom: 10px;
      
      a {
        //display: block;
        display: flex;
        background: $bg01;
        //padding: 10px 10px 60px 10px;
        padding: 10px;
        width: 100%;
        //display: flex;
        color: $color_black;
        &:hover {
          text-decoration: none;
          opacity: 0.7;
        }
      }

      .charaImg {
        margin: 0 10px 0 0;
      }

      dt {
        font-weight: bold;
        line-height: 1.4em;
      }

      dd {
        position: relative;
        //padding-top: 10px;
        font-size: 0.8em;
        line-height: 1.4em;

        &:last-of-type {
          padding: 10px;
          background: $color_green_dark;
          color: $color_light;
          text-align: center;
          border-radius: 3px;
          
          position: absolute;
          box-sizing: border-box;
          bottom: 10px;
          right: 10px;
          width: calc(100% - 20px);
        }
      }
    }

    @include sp {
      margin-bottom: 30px;

      li {
        width: 100%;
        .charaImg {
          width: 35%;
          height: auto;
        }*/
  /*a {
    padding: 10px 10px 50px 10px;
  }*/
  /*
        dl {
          width: 65%;
        }

        dt {
          min-height: 3em;
        }
        dd {
          &:last-of-type {
            position: absolute;
            box-sizing: border-box;
            bottom: 10px;
            right: 10px;
            width: calc(100% - 35% - 20px);
          }
        }        
      }
    }

    @include pc {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-bottom: 50px;

      li {        
        width: 49%;
        //min-height: 440px;

        &:nth-of-type(odd) {
          margin-right: 1%;
        }
        &:nth-of-type(even) {
          margin-left: 1%;
        }
        .charaImg {
          //width: 200px;
          //width: 140px;
          width: 40%;
        }
        dl {
          //width: calc(100% - 250px);
          width: 60%;
        }

        dt {
          font-size: 1.2em;
          //min-height: 90px;
        }
        dd {
          &:last-of-type {
            position: absolute;
            bottom: 10px;
            right: 10px;
            //width: calc(100% - 230px);
            //width: calc(100% - 170px);
            width: 55%;
          }
        }
      }
    }
  }*/
  /* 全面クリックVer
  .episodeList {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    li {
      position: relative;
          

      // 公開前
      &.coming {
        //background: $bg04;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.1);
        padding: 10px 10px 70px 10px;
      }    

      img {
        margin-bottom: 10px;
      }

      dt {
        font-weight: bold;
      }

      dd {
        position: relative;
        padding-top: 10px;
        font-size: 0.8em;
        line-height: 1.4em;
        // 未開放ボタン
        &.nolink {          
          position: absolute;
          bottom: 10px;
          right: 10px;
          box-sizing: border-box;
          width: calc(100% - 20px);
          padding: 15px 10px;
          background: $color_red;
          color: $color_light;
          text-align: center;
          border-radius: 3px;
        }
        //解放済みボタン
        &.btnlink {          
          position: absolute;
          bottom: 10px;
          right: 10px;
          box-sizing: border-box;
          width: calc(100% - 20px);
          padding: 15px 10px;
          background: $color_green_dark;
          color: $color_light;
          text-align: center;
          border-radius: 3px;
        }

        //解放条件テキスト
        &.before {
          background: $bg01;
          color: $color_red;
          font-weight: bold;
          padding: 1em;
        }
      }      
    }

    @include sp {
      margin-bottom: 30px;

      li {
        width: 49%;

        &:nth-of-type(odd) {
          margin: 0 1% 2% 0;
        }

        &:nth-of-type(even) {
          margin: 0 0 2% 1%;
        }

        dt {
          min-height: 70px;
        }
      }
    }

    @include pc {
      margin-bottom: 50px;

      li {
        width: 24%;
        margin: 0 1% 10px 0;
        //min-height: 300px;

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        dt {
          min-height: 90px;
        }
      }
    }
  }
*/
  /*.histrylist {
    dt {
      padding: 1em 0 0;
      font-weight: bold;
      margin-bottom: 1em;
    }

    dd {
      box-sizing: border-box;
      padding: 1em;
      background: $bg01;
      margin-bottom: 1em;
      position: relative;

      li {
        position: relative;
        box-sizing: border-box;
        margin-bottom: 10px;
        padding-left: 1em;
        padding-right: 1.5em;
        text-indent: -1em;

        &:before {
          content: "‐";
        }

        &:last-of-type {
          margin-bottom: 0;
        }
      }

      &.coming {
        background: rgba(0, 0, 0, 0.1);
      }
    }

    .noLinkTxt {
      a {
        background: $color_green_dark;
        padding: 5px;
        border-radius: 3px;
        text-decoration: none;
        color: $color_light;
        font-size: 0.9em;
        display: inline-block;

        text-indent: 0;
      }
    }

    span {
      text-indent: 0;
    }

    @include sp {}

    @include pc {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;

      dt {
        width: 7em;
        border-right: 1px solid $color_base;
      }

      dd {
        width: calc(100% - 8em);
      }

      .noLinkTxt {
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }*/
}
#mycontents .ssnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
#mycontents .ssnav li {
  margin: 0 5px 10px;
  max-width: calc(50% - 10px);
}
#mycontents .ssnav a {
  position: relative;
}
#mycontents .ssnav .btn {
  margin: 0 0 5px;
  width: auto;
  min-width: 8em;
  max-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  #mycontents .ssnav {
    /*.btn {
      //width: 100%;
      padding-left: 0;
      padding-right: 0;
    }*/
  }
}
#mycontents h4 {
  border-bottom: 1px solid #3c0000;
  padding: 1em 0;
}
#mycontents .charaList {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#mycontents .charaList li {
  position: relative;
  box-sizing: border-box;
  margin-bottom: 10px;
}
#mycontents .charaList li a {
  display: block;
  background: rgba(150, 100, 0, 0.1);
  padding: 10px 10px 60px 10px;
  color: #180000;
}
#mycontents .charaList li a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#mycontents .charaList li .charaImg {
  margin: 0 0 10px 0;
}
#mycontents .charaList li dt {
  font-weight: bold;
  line-height: 1.4em;
}
#mycontents .charaList li dd {
  position: relative;
  font-size: 0.8em;
  line-height: 1.4em;
}
#mycontents .charaList li dd:last-of-type {
  padding: 15px 10px;
  background: #143214;
  color: #fffdf2;
  text-align: center;
  border-radius: 3px;
  box-sizing: border-box;
  width: 100%;
}
@media (max-width: 768px) {
  #mycontents .charaList {
    margin-bottom: 30px;
  }
  #mycontents .charaList li {
    width: 49%;
  }
  #mycontents .charaList li:nth-of-type(odd) {
    margin: 0 1% 2% 0;
  }
  #mycontents .charaList li:nth-of-type(even) {
    margin: 0 0 2% 1%;
  }
  #mycontents .charaList li dl {
    width: 100%;
  }
  #mycontents .charaList li dt {
    min-height: 3em;
  }
  #mycontents .charaList li dd:last-of-type {
    position: absolute;
    box-sizing: border-box;
    bottom: 10px;
    right: 10px;
    width: calc(100% - 20px);
  }
}
@media (min-width: 769px) {
  #mycontents .charaList {
    margin-bottom: 50px;
  }
  #mycontents .charaList li {
    width: 24%;
    margin: 0 1% 10px 0;
  }
  #mycontents .charaList li:nth-of-type(4n) {
    margin-right: 0;
  }
  #mycontents .charaList li dl {
    width: 100%;
  }
  #mycontents .charaList li dt {
    min-height: 3em;
  }
  #mycontents .charaList li dd:last-of-type {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: calc(100% - 20px);
  }
}
#mycontents .episodeList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#mycontents .episodeList li {
  position: relative;
  box-sizing: border-box;
  background: rgba(150, 100, 0, 0.1);
  padding: 10px 10px 130px 10px;
}
#mycontents .episodeList li a {
  display: block;
  color: #fffdf2;
}
#mycontents .episodeList li a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#mycontents .episodeList li.coming {
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 10px 70px 10px;
}
#mycontents .episodeList li img {
  margin-bottom: 10px;
}
#mycontents .episodeList li dt {
  font-weight: bold;
}
#mycontents .episodeList li dd {
  position: relative;
  padding-top: 10px;
  font-size: 0.8em;
  line-height: 1.4em;
}
#mycontents .episodeList li dd.nolink {
  position: absolute;
  bottom: 10px;
  right: 10px;
  box-sizing: border-box;
  width: calc(100% - 20px);
}
#mycontents .episodeList li dd.nolink a {
  padding: 15px 10px;
  background: #990000;
  color: #fffdf2;
  text-align: center;
  border-radius: 3px;
}
#mycontents .episodeList li dd.btnlink {
  position: absolute;
  bottom: 10px;
  right: 10px;
  box-sizing: border-box;
  width: calc(100% - 20px);
}
#mycontents .episodeList li dd.btnlink a {
  padding: 15px 10px;
  background: #143214;
  color: #fffdf2;
  text-align: center;
  border-radius: 3px;
}
#mycontents .episodeList li dd.btnlink2 {
  position: absolute;
  bottom: 70px;
  right: 10px;
  box-sizing: border-box;
  width: calc(100% - 20px);
}
#mycontents .episodeList li dd.btnlink2 a {
  padding: 15px 10px;
  background: #143214;
  color: #fffdf2;
  text-align: center;
  border-radius: 3px;
}
#mycontents .episodeList li dd.before {
  background: rgba(150, 100, 0, 0.1);
  color: #990000;
  font-weight: bold;
  padding: 1em;
}
@media (max-width: 768px) {
  #mycontents .episodeList {
    margin-bottom: 30px;
  }
  #mycontents .episodeList li {
    width: 49%;
  }
  #mycontents .episodeList li:nth-of-type(odd) {
    margin: 0 1% 2% 0;
  }
  #mycontents .episodeList li:nth-of-type(even) {
    margin: 0 0 2% 1%;
  }
  #mycontents .episodeList li dt {
    min-height: 70px;
  }
}
@media (min-width: 769px) {
  #mycontents .episodeList {
    margin-bottom: 50px;
  }
  #mycontents .episodeList li {
    width: 24%;
    margin: 0 1% 10px 0;
  }
  #mycontents .episodeList li:nth-of-type(4n) {
    margin-right: 0;
  }
  #mycontents .episodeList li dt {
    min-height: 90px;
  }
}

#mycontents #charaCol {
  background: url(../images/common/frame/bg_fr03_lt.png) left 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_rt.png) right 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_lb.png) left 5px bottom 5px no-repeat, url(../images/common/frame/bg_fr03_rb.png) right 5px bottom 5px no-repeat rgba(150, 100, 0, 0.1);
  background-size: 30px;
}
@media (max-width: 768px) {
  #mycontents #charaCol {
    padding: 30px 0px;
  }
}
@media (min-width: 769px) {
  #mycontents #charaCol {
    padding: 40px 0px;
  }
}
#mycontents #charaCol .charaImg {
  text-align: center;
}
#mycontents #charaCol > dl > dt {
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px solid #180000;
}
#mycontents #charaCol > dl > dd {
  margin-bottom: 1em;
}
#mycontents #charaCol .news {
  background: rgba(150, 100, 0, 0.1);
  padding: 1em;
}
@media (max-width: 768px) {
  #mycontents #charaCol {
    padding: 30px;
    margin-bottom: 30px;
  }
  #mycontents #charaCol .charaImg {
    margin-bottom: 10px;
  }
  #mycontents #charaCol > dl > dt {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.6em;
    pointer-events: all;
  }
  #mycontents #charaCol > dl > dt:before {
    content: "";
    position: absolute;
    right: 4px;
    top: 0.2em;
    width: 0.6em;
    height: 0.6em;
    border-top: 1px solid #180000;
    border-right: 1px solid #180000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: all 0.2s ease-in-out;
  }
  #mycontents #charaCol > dl > dt.open:before {
    top: 0.5em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #mycontents #charaCol > dl .toggle {
    display: none;
  }
  #mycontents #charaCol .copy {
    font-size: 1.0rem;
    line-height: 1.6em;
  }
}
@media (min-width: 769px) {
  #mycontents #charaCol {
    padding: 40px;
    margin-bottom: 40px;
    display: flex;
  }
  #mycontents #charaCol .charaImg {
    width: 40%;
  }
  #mycontents #charaCol > dl {
    width: 57%;
    padding-left: 3%;
  }
  #mycontents #charaCol > dl > dt {
    font-size: 1.4rem;
    line-height: 1.6em;
    pointer-events: none;
  }
  #mycontents #charaCol > dl .toggle {
    display: block;
  }
  #mycontents #charaCol .copy {
    font-size: 12px;
    line-height: 1.6em;
  }
  #mycontents #charaCol .news dl {
    display: flex;
    flex-wrap: wrap;
  }
  #mycontents #charaCol .news dl dt {
    width: 6em;
  }
  #mycontents #charaCol .news dl dd {
    width: calc(100% - 7em);
  }
}

#mycontentsPopup {
  padding: 30px;
  text-align: center;
}
#mycontentsPopup h1,
#mycontentsPopup p {
  font-weight: bold;
  margin-bottom: 1em;
}
#mycontentsPopup .mycontentsBox {
  background: url(../images/common/frame/bg_fr03_lt.png) left 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_rt.png) right 5px top 5px no-repeat, url(../images/common/frame/bg_fr03_lb.png) left 5px bottom 5px no-repeat, url(../images/common/frame/bg_fr03_rb.png) right 5px bottom 5px no-repeat rgba(150, 100, 0, 0.1);
  background-size: 30px;
}
@media (max-width: 768px) {
  #mycontentsPopup .mycontentsBox {
    padding: 30px 0px;
  }
}
@media (min-width: 769px) {
  #mycontentsPopup .mycontentsBox {
    padding: 40px 0px;
  }
}
#mycontentsPopup .mycontentsBox dt {
  font-weight: bold;
  font-size: 1.4rem;
  padding: 1em 0;
}
#mycontentsPopup .mycontentsBox dd.before {
  background: rgba(150, 100, 0, 0.1);
  color: #990000;
  font-weight: bold;
  padding: 1em;
}
@media (max-width: 768px) {
  #mycontentsPopup .mycontentsBox {
    padding: 30px;
  }
}
@media (min-width: 769px) {
  #mycontentsPopup .mycontentsBox {
    padding: 40px;
    display: flex;
    align-items: center;
  }
  #mycontentsPopup .mycontentsBox > div {
    width: 300px;
    margin-bottom: 30px;
  }
  #mycontentsPopup .mycontentsBox dl {
    width: calc(100% - 330px);
    padding-left: 30px;
  }
  #mycontentsPopup .mycontentsBox .copy {
    font-size: 12px;
    line-height: 1.6em;
  }
}

#mycontentsViewer {
  padding: 0 0 50px;
  margin-bottom: 50px;
  background: #fff;
  /*ul.tmb {
    box-sizing: border-box;
    background: $bg01;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;    
    margin: 0 auto 30px;
    padding: 10px;
    li {
      a {
        position: absolute;
        left:0;
        top:0;
        display: block;
        width: 100%;
        height: 100%;        
      }
    }
    @include sp {
      li {
        width: 19%;
        margin:0 0.5% 1%;
        
      }
    }
    @include pc {
      max-width: 700px;
      li {
        width: 9%;
        margin:0 0.5% 1%;
        a {
          &:hover {
            background: rgba(255,255,255,0.5);
          }          
        }
      }          
    }
  }*/
}
#mycontentsViewer h1 {
  background: rgba(0, 0, 0, 0.8);
  color: #FFF;
  font-weight: bold;
  padding: 1em 0;
  text-align: center;
}
#mycontentsViewer .morePage {
  max-width: 755px;
}
#mycontentsViewer ul.viewer {
  box-sizing: border-box;
  width: 100%;
  max-width: 755px;
  margin: 0 auto;
  padding: 30px;
}
#mycontentsViewer ul.viewer li {
  width: 100%;
  position: relative;
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 30px;
  padding-top: 136.5%;
}
#mycontentsViewer ul.viewer li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}
#mycontentsViewer ul.viewer .pageNo {
  background-image: url("../images/members/mycontents/luminaria/img_no.png") !important;
}

.txt_red {
  color: #990000;
  font-weight: 700;
}

#mycontentsAgree small {
  display: block;
  padding-bottom: 1em;
}
#mycontentsAgree .frm1 {
  margin-bottom: 1em;
}
#mycontentsAgree .frm1 h4 {
  border-bottom: 1px solid #3c0000;
  padding: 1em 0;
}
#mycontentsAgree .flow {
  text-align: center;
}
#mycontentsAgree .flow p {
  text-align: left;
  max-width: 302px;
  margin: 0 auto 1em;
}
#mycontentsAgree .flow .flowIco,
#mycontentsAgree .flow .flowIco6 {
  position: relative;
}
#mycontentsAgree .flow .flowIco span,
#mycontentsAgree .flow .flowIco6 span {
  position: absolute;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  text-align: ceter;
  display: block;
  color: #fffdf2;
  line-height: 2em;
  width: 2em;
}
#mycontentsAgree .flow .flowIco:before,
#mycontentsAgree .flow .flowIco6:before {
  display: block;
  width: 2em;
  height: 2em;
  background: #143214;
  transform: rotate(45deg);
  content: "";
  position: absolute;
  top: 0;
  z-index: 1;
}
@media (max-width: 768px) {
  #mycontentsAgree .sampleImg li {
    margin-bottom: 20px;
  }
  #mycontentsAgree .flow .flowIco span,
  #mycontentsAgree .flow .flowIco6 span {
    left: -3em;
  }
  #mycontentsAgree .flow .flowIco:before,
  #mycontentsAgree .flow .flowIco6:before {
    left: -3em;
  }
  #mycontentsAgree .flow li {
    box-sizing: border-box;
    background: url(../images/members/mycontents/arrow2.png) left 7px bottom no-repeat;
    margin-bottom: 50px;
    padding-left: 3em;
  }
  #mycontentsAgree .flow li:last-of-type {
    background: none;
  }
}
@media (min-width: 769px) {
  #mycontentsAgree .sampleImg {
    display: flex;
  }
  #mycontentsAgree .sampleImg li {
    padding: 0 10px;
  }
  #mycontentsAgree .frm1 {
    padding: 50px;
  }
  #mycontentsAgree .flow {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #mycontentsAgree .flow .flowIco {
    background: url(../images/members/mycontents/arrow.png) right center no-repeat;
    display: block;
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
  }
  #mycontentsAgree .flow .flowIco span {
    position: absolute;
    left: 0;
  }
  #mycontentsAgree .flow .flowIco:before {
    left: 0;
  }
  #mycontentsAgree .flow .flowIco6 {
    display: block;
    width: 100%;
    height: 2em;
    margin-bottom: 1em;
  }
  #mycontentsAgree .flow .flowIco6 span {
    position: absolute;
    left: 0;
  }
  #mycontentsAgree .flow .flowIco6:before {
    left: 0;
  }
  #mycontentsAgree .flow li {
    width: 32%;
    padding-bottom: 100px;
  }
  #mycontentsAgree .flow li:nth-last-of-type(2), #mycontentsAgree .flow li:nth-last-of-type(5) {
    margin: 0 2%;
  }
  #mycontentsAgree .flow li p {
    min-height: 6em;
  }
}

main .btnData,
#mainCol .btnData {
  background: url(../images/common/frame/btn_bg_lt.png) left 3px top 3px no-repeat, url(../images/common/frame/btn_bg_rt.png) right 3px top 3px no-repeat, url(../images/common/frame/btn_bg_lb.png) left 3px bottom 3px no-repeat, url(../images/common/frame/btn_bg_rb.png) right 3px bottom 3px no-repeat;
  background-size: 30px auto;
  font-weight: bold;
  line-height: 1.4em;
  border-radius: 3px;
  display: block;
  min-height: 20px;
  padding: 10px 5px;
  text-align: center;
  box-sizing: border-box;
  color: #fffdf2;
}
main .btnData:hover,
#mainCol .btnData:hover {
  text-decoration: none;
  opacity: 0.7;
}
@media (max-width: 768px) {
  main .btnData,
  #mainCol .btnData {
    background-size: 30px;
    width: 8em;
    margin: 20px 0 30px auto;
  }
}
@media (min-width: 769px) {
  main .btnData,
  #mainCol .btnData {
    width: 8em;
    max-width: 100%;
    margin: 20px 0 20px auto;
  }
}
main .btnData,
#mainCol .btnData {
  background-color: #3c0000;
}

.noteBox {
  background: rgba(255, 253, 242, 0.7);
  text-align: center;
}
@media (max-width: 768px) {
  .noteBox {
    padding: 20px 10px;
    margin-bottom: 20px;
  }
}
@media (min-width: 769px) {
  .noteBox {
    padding: 30px 20px;
    margin-bottom: 30px;
  }
}
.noteBox .btn {
  margin-bottom: 0 !important;
}