/*
Theme Name: マンガTOP
Theme URI: http://andfactory.co.jp
Author: and factory, inc.
Author URI: http://andfactory.co.jp
Version: 1.0
*/
/* ====================================== Basic Layout */
body {
  background: #242424;
  font-size: 16px;
  line-height: 1.6;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ---------- Header ---------- */
header {
  position: relative;
}

.header_top {
  font-size: 18px;
  color: #B3B3B3;
  position: absolute;
  top: 328px;
  left: 61px;
}

.header_top p {
  margin: 20px 0 0 0;
}

.store {
  display: flex;
  position: absolute;
  align-items: baseline;
  top: 94px;
}

header:before {
  content: url('../img/logo_nichibun_black.png');
  position: absolute;
  box-sizing: border-box;
  padding: 20px 32px;
  left: 850px;
}

contents:before {
  content: "";
  position: absolute;
  background-color: #F7402D;
  width: 100%;
  height: 80px;
}

contents:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 100%;
  height: 528px;
  top: 0px;
  z-index: -1;
}

.md-none {
  display: none;
}

/* ---------- Contents ---------- */
.feature {
  padding-top: 64px;
}

.feature img {
  width: 340px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.charms {
  padding-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.charms img {
  width: 224px;
  height: auto;
  padding-bottom: 40px;
}

.appdetail {
  padding-top: 24px;
  position: relative;
}

.detail {
  color: #fff;
  background-color: #000;
  line-height: 1.8;
  width: 384px;
  padding: 10px 20px;
  text-align: center;
  position: absolute;
  bottom: 64px;
  left: 300px;
}

.appdetail img {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- SNS ---------- */
.social {
  padding: 40px 0;
  position: relative;
}

.sns {
  display: flex;
  align-items: center;
  position: absolute;
  left: 400px;
}

.sns p {
  color: #fff;
  font-size: 14px;
}

.sns img {
  width: 40px;
  height: auto;
  display: inline-flex;
  padding-left: 16px;
}

/* ---------- Footer ---------- */
footer {
  color: #fff;
  text-align: center;
  padding: 20px 0 56px 0;
  margin-top: 40px;
}

.links {
  padding-bottom: 14px;
}

footer a {
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

footer a:hover {
  color: #F7402D;
}

/*
footer a:after {
  content: "|";
  color: #D8D8D8;
  padding: 0 5px 0 10px;
}
*/
footer a:last-child:after {
  content: "";
}

hr.divider {
  display: block;
  height: 1px;
  border: 0;
  border-top: 2px solid #666666;
}

.copyright {
  font-size: 10px;
  padding: 24px 0 20px 0;
}

.ABJ {
  padding-top: 16px;
}

.ABJ_logo img {
  margin-left: auto;
  margin-right: auto;
}

.ABJ_text {
  font-size: 10px;
}

/* ======================================= Grid Layout*/
.container {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
}

.container-750 {
  width: 750px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  width: 100%;
}

/* ========================== Background and Text Color */
.bg-black {background: #000000;}
.bg-darkgray {background: #242424;}
.bg-red {background: #F7402D;}
.white {color: #fff;}
.black {color: #000;}
.darkgray {color: #242424}
.mediumgray {color: #B3B3B3}
.red {color: #F7402D;}

/* ================================ Position and Transition */
.none {display: none;}
.img-responsive {width: 100%;height: auto;}
.image {display: inline-flex;}
.img-pc {width: 1024px;height: auto;
}

/* ---------- #media ---------- */

@media only screen and (min-width: 376px) and (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2){
/* ---------- Header ---------- */
  .header_top {
    font-size: 18px;
    top: 410px;
    left: 20px;
  }

  .header_top p {
    text-align: center;
  }

  .header_top-sp {
    font-size: 18px;
    color: #B3B3B3;
    position: absolute;
    bottom: 15%;
    padding: 0 20px;
  }

  .header_top-sp p {
    text-align: center;
  }

  .header_top-sp img{
    width: 375px;
  }

  .soon{
    color: #B3B3B3;
    text-align: center;
    z-index: 2;
  }

  .soon img{
    width: 100%;
  }

  .header_top--soon {
    font-size: 18px;
    position: absolute;
    top: 55%;
    left: 35px;
  }

  .header_top--soon img{
    width: 350px;
  }

  header:before {
    content: url('../img/logo_nichibun_white.png');
    box-sizing: border-box;
    padding: 20px 0px;
    left: 310px;
  }

  contents:before {
    display: none;
  }

  contents:after {
    display: none;
  }

  .store {
    position: absolute;
    top: 90%;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .store img{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 105px 0;
  }

  /* ---------- Contents ---------- */
   .feature {
     padding-top: 130px;
   }

   .feature img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   .charms {
     padding: 32px 0;
     display: block;
     justify-content: space-between;
   }

   .charms img {
     width: 224px;
     margin-left: 53px;
   }

   .appdetail {
     padding-top: 0px;
     position: relative;
   }

   .detail {
     color: #fff;
     background-color: #000;
     font-size: 14px;
     line-height: 1.8;
     width: 300px;
     padding: 5px 0px;
     text-align: center;
     position: absolute;
     bottom: 24%;
     left: 14%;
   }

   .appdetail img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   /* ---------- SNS ---------- */
    .social {
      padding: 32px 0 40px 0;
      position: relative;
    }

    .sns {
      left: 26%;
      z-index: 1;
    }

    .sns img {
      width: 48px;
      z-index: 1;
    }

  /* ---------- Footer ---------- */
   footer{
     text-align: center;
   }
   .links {
     padding-bottom: 20px;
   }

   .copyright {
     padding: 20px 0;
   }

  /* ======================================= Grid Layout*/
  .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .container-750 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }

  .none {
    display: contents;
  }

  .md-none {
    display: contents;
  }

  .sm-none {
    display: none;
  }
}

@media only screen and (min-width: 361px) and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2){
/* ---------- Header ---------- */
  .header_top {
    font-size: 18px;
    top: 410px;
    left: 20px;
  }

  .header_top p {
    text-align: center;
  }

  .header_top-sp {
    font-size: 18px;
    color: #B3B3B3;
    position: absolute;
    bottom: 25%;
    padding: 0 20px;
  }

  .header_top-sp p {
    text-align: center;
  }

  .header_top-sp img{
    width: 335px;
  }

  .soon{
    color: #B3B3B3;
    text-align: center;
    z-index: 2;
  }

  .soon img{
    width: 100%;
  }

  .header_top--soon {
    font-size: 18px;
    position: absolute;
    top: 62%;
    left: 15px;
  }

  .header_top--soon img{
    width: 350px;
  }

  header:before {
    content: url('../img/logo_nichibun_white.png');
    box-sizing: border-box;
    padding: 20px 0px;
    left: 290px;
  }

  contents:before {
    display: none;
  }

  contents:after {
    display: "";
    height: auto;
  }

  .store {
    position: absolute;
    top: 90%;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .store img{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 90px 0;
  }

  /* ---------- Contents ---------- */
   .feature {
     padding-top: 120px;
   }

   .feature img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   .charms {
     padding: 32px 0;
     display: block;
     justify-content: space-between;
   }

   .charms img {
     width: 224px;
     margin-left: 50px;
   }

   .appdetail {
     padding-top: 0px;
     position: relative;
   }

   .detail {
     color: #fff;
     background-color: #000;
     font-size: 14px;
     line-height: 1.8;
     width: 300px;
     padding: 5px 0px;
     text-align: center;
     position: absolute;
     bottom: 24%;
     left: 14%;
   }

   .appdetail img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   /* ---------- SNS ---------- */
    .social {
      padding: 32px 0 40px 0;
      position: relative;
    }

    .sns {
      left: 25%;
      z-index: 1;
    }

    .sns img {
      width: 48px;
      z-index: 1;
    }

  /* ---------- Footer ---------- */
   footer{
     text-align: center;
   }
   .links {
     padding-bottom: 20px;
   }

   .copyright {
     padding: 20px 0;
   }

  /* ======================================= Grid Layout*/
  .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .container-750 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }

  .none {
    display: contents;
  }

  .md-none {
    display: contents;
  }

  .sm-none {
    display: none;
  }
}

@media only screen and (max-width: 360px) and (-webkit-min-device-pixel-ratio: 2){

/* ---------- Header ---------- */
  .header_top {
    font-size: 18px;
    top: 410px;
    left: 20px;
  }

  .header_top p {
    text-align: center;
  }

  .header_top-sp {
    font-size: 18px;
    color: #B3B3B3;
    position: absolute;
    bottom: 30%;
    padding: 0 20px;
  }

  .header_top-sp p {
    text-align: center;
  }

  .header_top-sp img{
    width: 280px;
  }

  .soon{
    color: #B3B3B3;
    text-align: center;
    z-index: 2;
  }

  .soon img{
    width: 100%;
  }

  .header_top--soon {
    font-size: 18px;
    position: absolute;
    top: 328px;
    left: 10px;
  }

  .header_top--soon img{
    width: 300px;
  }

  header:before {
    content: url('../img/logo_nichibun_white.png');
    box-sizing: border-box;
    padding: 20px 0px;
    left: 230px;
    z-index: 1;
  }

  contents:before {
    display: none;
  }

  contents:after {
    display: none;
  }

  .store {
    position: absolute;
    top: 90%;
    box-sizing: border-box;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .store img{
    width: 100%;
    box-sizing: border-box;
    padding: 0 58px;
  }

  /* ---------- Contents ---------- */
   .feature {
     padding-top: 90px;
   }

   .feature img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   .charms {
     padding: 32px 0;
     display: block;
     justify-content: space-between;
   }

   .charms img {
     width: 224px;
     margin-left: 15px;
   }

   .appdetail {
     padding-top: 0px;
     position: relative;
   }

   .detail {
     color: #fff;
     background-color: #000;
     font-size: 14px;
     line-height: 1.8;
     width: 300px;
     padding: 5px 0px;
     text-align: center;
     position: absolute;
     bottom: 14%;
     left: 3%;
   }

   .appdetail img {
     width: 100%;
     height: auto;
     margin-left: auto;
     margin-right: auto;
   }

   /* ---------- SNS ---------- */
    .social {
      padding: 32px 0 40px 0;
      position: relative;
    }

    .sns {
      left: 18%;
    }

    .sns img {
      width: 48px;
    }

  /* ---------- Footer ---------- */
   footer{
     text-align: center;
   }
   .links {
     padding-bottom: 20px;
   }

   .copyright {
     padding: 20px 0;
   }

  /* ======================================= Grid Layout*/
  .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .container-750 {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }

  .none {
    display: contents;
  }

  .md-none {
    display: contents;
  }

  .sm-none {
    display: none;
  }
}

.download-button {
  display: none;
}

.download-button--active {
  display: block;
}