@charset "UTF-8";
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul, figure,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  text-align: left;
  vertical-align: baseline;
  background-color: transparent;
  outline: none;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

a img, :link img, :visited img {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul, ol {
  list-style-type: none; }

ul li img {
  vertical-align: top; }

button {
  cursor: pointer; }

html {
  height: 100%;
  overflow: auto; }

body {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: auto;
  text-align: center;
  background-attachment: fixed;
  background-color: #391a0d;
  background-image: url(/shironekoproject/iconmaker/img/bg_1.jpg);
  background-repeat: no-repeat;
  background-position: center top; }

.spOnly {
  display: none; }

.pc .spOnly {
  display: none; }

.sp .spOnly {
  display: block; }

article {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5%;
  width: 90%;
  height: 100%;
  -webkit-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  article[data-state="close"] {
    position: absolute !important;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  article[data-state="off"] {
    display: none;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
  article h1 {
    padding: 15px 0 10px; }

.top {
  position: relative;
  padding: 0;
  width: 500px;
  background-color: #391a0d;
  z-index: 300; }
  .top h1 img {
    width: 100%; }

.top_content {
  padding: 2% 5%;
  background-position: center top, center bottom, center center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% auto, 100% auto, 100% 99%;
  background-image: url(/shironekoproject/4komamaker/assets/img/maker/frame_top.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_bottom.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_middle.png); }
  .top_content h2 img {
    width: 100%; }
  .top_content .top_term_box {
    margin: 0 auto;
    padding: 8px;
    width: 97%;
    overflow: hidden;
    border: 2px solid #e8d399;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffefc4; }
    .top_content .top_term_box[data-state="on"] .top_term_frame {
      height: 300px; }
    .top_content .top_term_box .top_term_frame {
      position: relative;
      margin: 0 auto;
      width: 100%;
      height: 0;
      text-align: left;
      overflow-x: hidden;
      overflow-y: scroll;
      background-color: #fff;
      border-radius: 10px;
      -webkit-transition: all 400ms ease;
      -o-transition: all 400ms ease;
      transition: all 400ms ease; }
    .top_content .top_term_box .top_term_check_box {
      position: relative;
      display: inline-block;
      padding: 5% 0 3%;
      width: 100%;
      color: #790e0a;
      text-align: center; }
      .top_content .top_term_box .top_term_check_box label {
        position: relative;
        display: inline-block;
        padding: 0 0 0 0;
        color: #790e0a; }
        .top_content .top_term_box .top_term_check_box label input {
          position: absolute;
          top: -6px;
          left: 0;
          margin: 0;
          padding: 0;
          width: 26px;
          height: 26px;
          line-height: 0;
          border-radius: 4px;
          background-color: #fff;
          border: 1px #000 solid;
          -webkit-appearance: none;
          outline: none; }
          .top_content .top_term_box .top_term_check_box label input:checked:before {
            content: '\2714\fe0e';
            position: absolute;
            top: 13px;
            left: 2px;
            font-size: 18px;
            color: #22aa22; }
      .top_content .top_term_box .top_term_check_box button {
        position: absolute;
        top: 0;
        left: 2.2em;
        color: #c50700;
        text-decoration: underline; }
  .top_content .top_btn_start {
    margin: 2% 0;
    width: 98%;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    opacity: 0.5; }
    .top_content .top_btn_start img {
      width: 100%; }
    .top_content .top_btn_start[data-state='on'] {
      opacity: 1; }
  .top_content .top_caution {
    padding: 0 2%;
    font-size: 12px; }
    .top_content .top_caution li {
      color: #790e0a;
      line-height: 1.4;
      padding: 4px; }
  .top_content .top_device {
    padding: 4% 0;
    text-align: center; }
    .top_content .top_device button {
      font-size: 14px;
      color: #bd0700;
      text-decoration: underline; }

body[data-state="maker"] footer {
  display: none; }

footer {
  padding: 5% 0;
  color: #cab4ab;
  text-align: center;
  background-color: #391a0d; }
  footer img {
    width: 100%; }
  footer .shiroLogo {
    margin: 0 auto;
    width: 40%; }
  footer .redirectArea {
    margin: 12% 0;
    width: 100%;
    text-align: center; }
    footer .redirectArea div {
      display: inline-block;
      margin: 0 0 0 2%;
      width: 45%; }
      footer .redirectArea div:first-child {
        margin: 0; }
      footer .redirectArea div a {
        display: inline-block;
        padding: 10% 0;
        width: 100%;
        height: 100%;
        color: #f0f0f0;
        text-align: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 3vw;
        text-decoration: none;
        line-height: 1.5;
        border-radius: 5px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#826634), to(#654a1a));
        background-image: -webkit-linear-gradient(top, #826634, #654a1a);
        background-image: -o-linear-gradient(top, #826634, #654a1a);
        background-image: linear-gradient(top, #826634, #654a1a);
        font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Sawarabi Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
        footer .redirectArea div a span {
          font-size: 16px;
          font-family: inherit; }
  footer .snsArea {
    position: relative;
    margin: 12% auto;
    width: 80%;
    text-align: center;
    display: table; }
    footer .snsArea li {
      display: table-cell;
      display: inline-block;
      margin: 0 2%;
      width: 12%;
      vertical-align: middle; }
      footer .snsArea li a {
        display: inline-block; }
      footer .snsArea li.youtube {
        width: 30%; }
  footer .appArea {
    margin: 12% auto; }
    footer .appArea ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      footer .appArea ul li {
        margin: 0 1%;
        width: 30%; }
      footer .appArea ul a {
        display: inline-block; }
        footer .appArea ul a img {
          width: 100%;
          height: auto; }
  footer .appNotice {
    margin: 12% auto;
    width: 90%;
    font-size: 13px;
    line-height: 1.6; }
    footer .appNotice li {
      margin: 0 0 2% 3%;
      list-style: disc;
      font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Sawarabi Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      font-size: 9px;
      line-height: 1.3; }
  footer .link {
    margin: 6% auto;
    text-align: center; }
    footer .link a {
      text-decoration: none;
      color: #fff;
      font-size: 9px;
      line-height: 1.3;
      font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Sawarabi Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
  footer .copyright {
    font-size: 9px;
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Sawarabi Mincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center; }

body[data-state="maker"] .cp {
  display: none; }

.cp {
  display: block;
  padding: 3% 0 0;
  background-color: #391a0d; }
  .cp img {
    width: 100%; }
  .cp .cp_box {
    margin: 0 auto;
    width: 90%;
    padding: 5%;
    text-align: center;
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 100% auto, 100% 99%;
    background-image: url(/shironekoproject/4komamaker/assets/img/maker/frame_top.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_bottom.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_middle.png); }
    .cp .cp_box h3 {
      margin: 0 auto;
      width: 98%; }
    .cp .cp_box p {
      display: inline-block;
      margin: 0 auto;
      width: 96%;
      padding: 1rem 0 0 0;
      font-size: 14px;
      line-height: 1.3;
      color: #790e0a; }
    .cp .cp_box .cp_text_1 {
      margin: 3% auto 0;
      width: 70%; }
    .cp .cp_box .cp_text_3 {
      margin: 5% auto 0;
      width: 96%; }
    .cp .cp_box .twBtn {
      display: inline-block;
      width: 90%;
      margin: 3% 0% 20px;
      padding: 8% 5px;
      text-align: center;
      color: #fff;
      font-size: 36px;
      font-weight: bold;
      border-radius: 8px;
      background-color: #00b7ee;
      -webkit-box-shadow: 0 8px 0 #0074a7;
      box-shadow: 0 8px 0 #0074a7;
      cursor: pointer; }
    .cp .cp_box .twBtn img {
      display: inline;
      vertical-align: bottom;
      padding-right: 10px;
      width: 44px;
      height: auto; }
    .cp .cp_box .cp_header_img_box {
      position: relative;
      padding: 5% 0 0;
      height: 0;
      text-align: center;
      -webkit-transition: all 400ms ease;
      -o-transition: all 400ms ease;
      transition: all 400ms ease;
      overflow: hidden; }
      .cp .cp_box .cp_header_img_box p {
        display: inline-block;
        width: 96%;
        padding: 0 0 4%;
        font-size: 16px;
        font-weight: bold; }
      .cp .cp_box .cp_header_img_box .cp_tw_header {
        text-align: center; }
        .cp .cp_box .cp_header_img_box .cp_tw_header li {
          display: inline-block;
          width: 96%;
          margin: 1% 0; }
  .cp[data-state="on"] .cp_header_img_box {
    height: auto; }

.help {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100000;
  visibility: hidden; }
  .help[data-state="on"] {
    display: block;
    visibility: visible; }
  .help[data-state="off"] {
    display: none; }
  .help .help_box {
    position: relative;
    margin: 3% auto 0;
    padding: 5%;
    width: 380px;
    height: 500px;
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 100% auto, 100% 99%;
    background-image: url(/shironekoproject/4komamaker/assets/img/maker/frame_top.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_bottom.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_middle.png); }
    .help .help_box h3 {
      width: 100%; }
      .help .help_box h3 img {
        width: 100%; }
    .help .help_box .help_list_box {
      position: relative;
      margin: 0 auto;
      width: 90%;
      overflow: hidden;
      z-index: 1; }
      .help .help_box .help_list_box .help_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 300%;
        font-size: 0; }
        .help .help_box .help_list_box .help_list li {
          width: 100%; }
          .help .help_box .help_list_box .help_list li img {
            width: 100%; }
    .help .help_box .help_arrow {
      position: absolute;
      top: 0;
      left: -2.5%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 105%;
      height: 100%;
      z-index: 0; }
      .help .help_box .help_arrow li {
        position: absolute;
        width: 10%; }
        .help .help_box .help_arrow li button {
          position: relative;
          width: 100%;
          height: 100%; }
          .help .help_box .help_arrow li button img {
            width: 100%; }
        .help .help_box .help_arrow li:first-child {
          left: 0; }
        .help .help_box .help_arrow li:last-child {
          right: 0; }
    .help .help_box[data-num="0"] .help_arrow li:first-child,
    .help .help_box[data-num="2"] .help_arrow li:last-child {
      opacity: 0.5; }
    .help .help_box .help_pointer {
      margin: 5% auto 0;
      width: 100%;
      text-align: center; }
      .help .help_box .help_pointer li {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border-radius: 0.5rem;
        background-color: #fff;
        border: #A68101 1px solid; }
    .help .help_box[data-num="0"] .help_pointer li:nth-child(1),
    .help .help_box[data-num="1"] .help_pointer li:nth-child(2),
    .help .help_box[data-num="2"] .help_pointer li:nth-child(3) {
      background-color: #FFC500; }
    .help .help_box .help_skip,
    .help .help_box .help_close {
      position: absolute;
      bottom: 2%;
      left: 35%;
      display: none;
      width: 30%; }
      .help .help_box .help_skip img,
      .help .help_box .help_close img {
        width: 100%; }
    .help .help_box[data-num="0"] .help_skip,
    .help .help_box[data-num="1"] .help_skip,
    .help .help_box[data-num="2"] .help_close {
      display: block; }

.popup {
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 200000;
  visibility: hidden; }
  .popup[data-state="on"] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: visible; }
  .popup[data-state="off"] {
    display: none; }
  .popup .popup_box {
    position: relative;
    padding: 30px 30px;
    width: 92%;
    max-width: 400px;
    min-height: 180px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position: center top, center bottom, center center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% auto, 100% auto, 100% 99%;
    background-image: url(/shironekoproject/4komamaker/assets/img/maker/frame_top.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_bottom.png), url(/shironekoproject/4komamaker/assets/img/maker/frame_middle.png); }
    .popup .popup_box .popup_content {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 0 16%;
      width: 100%;
      height: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .popup .popup_box .popup_content p {
        text-align: center;
        line-height: 1.5;
        font-family: 'Rounded Mplus 1c';
        -webkit-transform: rotate(0.001deg);
        -ms-transform: rotate(0.001deg);
        transform: rotate(0.001deg); }
    .popup .popup_box .popup_btns {
      position: relative;
      width: 100%;
      height: auto;
      text-align: center; }
      .popup .popup_box .popup_btns li {
        display: inline-block;
        width: 40%; }
        .popup .popup_box .popup_btns li button img {
          width: 100%; }
  .popup[data-type="yesno"] li.popup_btn_close,
  .popup[data-type="close"] li.popup_btn_yes,
  .popup[data-type="close"] li.popup_btn_no {
    display: none; }

@media only screen and (min-width: 769px) {
  body {
    overflow: hidden; } }

@media only screen and (max-width: 768px) {
  body {
    width: 100%; }
  .top {
    width: 100%; }
  .top_content .top_term_box {
    margin: 0 auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; }
    .top_content .top_term_box[data-state="on"] .top_term_frame {
      height: 40vh; }
    .top_content .top_term_box .top_term_check_box {
      padding: 3% 0 3%;
      font-size: 4vw; }
      .top_content .top_term_box .top_term_check_box label input {
        top: -1vw;
        width: 6vw;
        height: 6vw; }
        .top_content .top_term_box .top_term_check_box label input:checked:before {
          top: 2.6vw;
          left: 0.8vw;
          font-size: 5vw;
          color: #22aa22; }
  .help .help_box {
    width: 80vw;
    height: 112vw; }
    .help .help_box .help_pointer li {
      width: .6rem;
      height: .6rem;
      border-radius: 0.3rem; } }

/*# sourceMappingURL=top.css.map */