@charset "utf-8";

img {
  width: 100%;
  display: block;
  margin: auto;
}

body {
  text-align: center;
  background-image: url("./images/bg.png");
  background-size: 180px;
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 150%;
  color: #333;
}

.sec-ciao {
  background-image: url("./images/white_top.png"), url("./images/white_bottom.png");
  background-repeat: repeat-x;
  background-position: top, bottom;
  background-size: 700px;
  padding-bottom: 4rem;
}

/* フッター */

.page_footer {
  background-color: #fff;
  padding: 1rem;
  position: relative;
}

.page-top {
  position: absolute;
  width: 65px;
  height: 65px;
  right: 8px;
  top: -3rem;
}

.icon-triangle {
  display: inline-block;
  width: 11px;
  height: 9px;
  background: url("./images/triangle.png") no-repeat;
  background-size: 8px;
  vertical-align: 1px;
}

/* 雑誌ページ */

.magazine-detail {
  margin: auto;
  padding-top: 2rem;
  color: #fff;
  max-width: 600px;
  background: url("./images/cover_bg.png") no-repeat;
  background-size: 97%;
  background-position: center 1.5rem;
}

.magazine-detail img {
  max-width: 350px;
  width: 60%;
  box-shadow: 0 0 8px #0000007a;
}

.title-magazine {
  color: #fff;
  font-size: 1.4rem;
  line-height: 120%;
  padding: 1rem 0;
  text-shadow: #f36c9a 2px 0px, #f36c9a -2px 0px, #f36c9a 0px -2px, #f36c9a 0px 2px, #f36c9a 2px 2px, #f36c9a -2px 2px, #f36c9a 2px -2px, #f36c9a -2px -2px, #f36c9a 1px 2px, #f36c9a -1px 2px, #f36c9a 1px -2px, #f36c9a -1px -2px, #f36c9a 2px 1px, #f36c9a -2px 1px, #f36c9a 2px -1px, #f36c9a -2px -1px;
}

.cp-box {
  max-width: 800px;
  margin: auto;
}

.howto-box {
  max-width: 640px;
  margin: auto;
  text-align: left;
  padding: 1rem;
  color: #fff;
}

.howto-box h2 {
  font-size: 1rem;
  padding: 0.5rem 0;
}

.list-howto li {
  list-style-type: disc;
  margin-left: 1rem;
  padding-bottom: 0.5rem;
  font-size: 0.8rem;
}

.close-message {
  max-width: 600px;
  margin: auto;
}

@media screen and (min-width: 768px) {

  /* フッター */
  .page-top {
    width: 80px;
    height: 80px;
    right: 20px;
    top: -3rem;
  }

  /* 雑誌ページ */

  .magazine-detail {
    background-size: 100%;
  }

  .title-magazine {
    font-size: 1.6rem;
  }

  .howto-box h2 {
    font-size: 1.2rem;
  }

  .list-howto li {
    font-size: 1rem;
  }

}