@charset "UTF-8";
/* ----------------------------------------------------
	sassを使用しています。css編集の際はご注意ください。
	compass/scss
---------------------------------------------------- */
/* ----------------------------------------------------
base
---------------------------------------------------- */
html, body {
  padding: 0;
  margin: 0;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 36px;
  line-height: 1.8;
  color: #000;
  height: 100%;
  background: url(../images/bg_body.jpg);
}
@media (max-width: 750px) {
  html, body {
    font-size: 18px;
  }
}
@media (max-width: 320px) {
  html, body {
    font-size: 16px;
    line-height: 1.8;
  }
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

ul {
  list-style: none;
  box-sizing: border-box;
}
ul li {
  box-sizing: border-box;
}

/* ----------------------------------------------------
link
---------------------------------------------------- */
a {
  color: #000;
  text-decoration: none;
  transition: 0.2s ease-in-out;
}
a:visited {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: #333;
}
a:hover img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
  background: none !important;
  transition: 0.2s;
}
a:active {
  color: #333;
}

/* ----------------------------------------------------
header
---------------------------------------------------- */
header {
  margin: 0 auto;
  width: 750px;
  line-height: 0;
}
@media (max-width: 750px) {
  header {
    width: auto;
  }
}
header h1 {
  line-height: 0;
}
header h1 img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------
.section01
---------------------------------------------------- */
.section01 {
  margin: 0 auto;
  width: 750px;
  line-height: 0;
}
@media (max-width: 750px) {
  .section01 {
    width: auto;
  }
}
.section01 div {
  width: 100%;
  line-height: 0;
}
.section01 div img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------
.balloonbox
---------------------------------------------------- */
.balloonbox {
  margin: 0 auto;
  width: 750px;
  line-height: 0;
  background: #f8f6e2;
}
@media (max-width: 750px) {
  .balloonbox {
    width: auto;
  }
}
.balloonbox div.exbox {
  line-height: 0;
}

/* ----------------------------------------------------
.section02
---------------------------------------------------- */
.section02 {
  padding: 120px 0;
  margin: 0 auto;
  width: 750px;
  line-height: 0;
  background: #f8f6e2;
}
@media (max-width: 750px) {
  .section02 {
    padding: 60px 0;
    width: auto;
  }
}
.section02 div {
  line-height: 0;
}
.section02 div img {
  width: 100%;
  height: auto;
}
.section02 div.more {
  width: 92%;
}
.section02 div.footerbox {
  padding: 100px 0 50px 0;
}
@media (max-width: 750px) {
  .section02 div.footerbox {
    padding: 50px 0 25px 0;
  }
}
.section02 div.footerbox h3 {
  margin: 0 auto 40px auto;
  text-align: center;
  line-height: 0;
}
@media (max-width: 750px) {
  .section02 div.footerbox h3 {
    margin-bottom: 20px;
  }
}
.section02 div.footerbox h3.shareTitle {
  width: 40.66667%;
}
.section02 div.footerbox h3.seriesTitle {
  margin-top: 100px;
  width: 63.86667%;
}
@media (max-width: 750px) {
  .section02 div.footerbox h3.seriesTitle {
    margin-top: 50px;
  }
}
.section02 div.sharebox {
  display: flex;
  justify-content: center;
}
@media (max-width: 750px) {
  .section02 div.sharebox {
    margin-bottom: 45px;
  }
}
.section02 div.sharebox .twitter,
.section02 div.sharebox .line,
.section02 div.sharebox .facebook {
  line-height: 0;
  width: 21.06667%;
}
.section02 div.sharebox .line {
  margin: 0 40px;
}
@media (max-width: 750px) {
  .section02 div.sharebox .line {
    margin: 0 20px;
  }
}
.section02 div.sinkanLink {
  margin: 0 auto;
  width: 84%;
}
.section02 div.akahata {
  margin: 60px auto 0 auto;
  width: 84%;
}
@media (max-width: 750px) {
  .section02 div.akahata {
    margin-top: 30px;
  }
}

/* ----------------------------------------------------
footer
---------------------------------------------------- */
footer {
  margin: 0 auto;
  width: 750px;
  line-height: 0;
}
@media (max-width: 750px) {
  footer {
    width: auto;
  }
}
footer div {
  line-height: 0;
}
footer div img {
  width: 100%;
  height: auto;
}