@charset "UTF-8";
/*====================================================================

====================================================================*/
* {
  margin: 0px;
  padding: 0px;
  line-height: 1.5em;
  letter-spacing: 0.07em;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -moz-box-sizing: border-box;
}

body {
  background: #ffff00;
  font-family: "Zen Maru Gothic", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  font-style: normal;
  color: #7c6c5c;
  text-align: center;
}

img {
  border: 0px solid #000000;
  vertical-align: bottom;
}

object,
embed {
  vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
}

div,
blockquote,
p,
pre,
ul,
ol,
li,
dl,
dt,
dd {
  border: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
  empty-cells: show;
}

td {
  vertical-align: top;
}

/* ===================================================================
	Link
=================================================================== */
a {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-decoration: none;
  overflow: hidden;
}
a:link {
  color: #0a9ace;
  text-decoration: none;
}
a:visited {
  color: #0a9ace;
  text-decoration: none;
}
a:hover, a:active {
  color: #48c8f6;
  text-decoration: none;
}

a:hover img.link {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

a.btn:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

/*====================================================================

====================================================================*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-table;
  min-height: 1%;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* End hide from IE-mac */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 300px;
}

body {
  overflow-x: hidden;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -js-display: flex;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#header {
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  -o-flex: 0 0 auto;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}

#main {
  display: block;
  -moz-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  -o-flex: 1 1 100%;
  -webkit-box-flex: 1;
          flex: 1 1 100%;
}

#footer {
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  -o-flex: 0 0 auto;
  -webkit-box-flex: 0;
          flex: 0 0 auto;
}

.flexList {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -js-display: flex;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-align-content: flex-start;
  -o-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
.flexList .empty {
  visibility: hidden;
  margin-bottom: 0;
  height: 0px !important;
  border: none !important;
}

@media only screen and (min-width: 1080px) {
  .spBlock {
    display: none !important;
  }
  .spOnly {
    display: none !important;
  }
}
@media only screen and (max-width: 1079px) {
  .pcBlock {
    display: none !important;
  }
  .pcOnly {
    display: none !important;
  }
}
a:hover * {
  -webkit-transtion: 0.2s;
  -moz-transtion: 0.2s;
  -ms-transtion: 0.2s;
  -o-transtion: 0.2s;
  transtion: 0.2s;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
a.disabled:hover {
  cursor: default;
}
a.disabled:hover img {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

a#top {
  height: 0px;
}

section.content div.img img {
  width: 100%;
}

@media only screen and (min-width: 1080px) {
  section.content div.img.pc-auto img {
    width: auto;
  }
}
main {
  padding-bottom: 20px;
}

@media only screen and (min-width: 1080px) {
  section.catch {
    overflow: hidden;
    margin: 0 auto;
  }
  section.catch div.img {
    width: 100%;
    height: 880px;
    background-repeat: no-repeat;
    background-position: center top;
  }
  section.w1200-under {
    display: none;
  }
}
@media only screen and (max-width: 1079px) {
  section.w1200-over {
    display: none;
  }
}
section.content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
section.content div.block-link {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  display: block;
  z-index: 100;
}
section.content div.block-link a {
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  opacity: 0;
  -webkit-transtion: 0.2s;
  -moz-transtion: 0.2s;
  -ms-transtion: 0.2s;
  -o-transtion: 0.2s;
  transtion: 0.2s;
}
section.content div.block-link a:hover {
  opacity: 0.4;
}

section.content.overview div.block-link.worksheet {
  position: absolute;
  left: 50%;
  top: 70.1666666667%;
  width: 42.5%;
  height: 5.8333333333%;
}
section.content.overview div.block-link.amazon {
  position: absolute;
  left: 31.9%;
  top: 82.8333333333%;
  width: 25.6666666667%;
  height: 6.6666666667%;
}
section.content.overview div.block-link.rakuten {
  position: absolute;
  left: 68.3%;
  top: 82.8333333333%;
  width: 25.6666666667%;
  height: 6.6666666667%;
}

section.content.entry_step01 div.block-link {
  position: absolute;
  left: 50%;
  top: 81.25%;
  width: 60.8333333333%;
  height: 15.8333333333%;
}

section.content.entry_step02 div.block-link {
  position: absolute;
  left: 50%;
  top: 31.25%;
  width: 62.5%;
  height: 6.6666666667%;
}
section.content.entry_step02 div.block-link a {
  background: #FF0000;
}

#footer {
  background: #FFFFFF;
}
#footer div.logo {
  margin: 30px auto;
}
#footer div.logo img {
  max-width: 300px;
}