/* CSS Document */
html {
  overflow-x: hidden;
  min-width: 960px; }

body {
  margin-top: -60px;
  overflow-x: hidden;
  min-width: 960px;
  background: none; }

.backGround {
  background: url(../imgHtml/common/back.jpg);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0; }

.centerBlock {
  position: relative;
  z-index: 1; }

h2 {
  font-size: 2.2em;
  padding: 20px;
  font-weight: 500;
  color: #de7b32;
  text-align: left;
  line-height: 1.8em;
  font-family: 'anzu'; }

p {
  font-weight: 300;
  line-height: 1.5em; }

h2 + p {
  text-align: center;
  margin-bottom: 30px;
  font-size: 1em;
  line-height: 2em; }

.more {
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: 180px;
  text-align: center;
  position: relative;
  cursor: pointer; }
  .more p {
    position: absolute;
    z-index: 333;
    top: 30px;
    font-size: 1.2em;
    left: 19%; }
  .more .arrow_w {
    position: absolute;
    z-index: 333;
    top: 30px;
    right: -50px; }
  .more .moreImg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

header {
  background-position: top center;
  padding-top: 10%;
  position: relative;
  margin-bottom: 10%;
  color: #333;
  height: 250px;
  box-sizing: border-box; }
  header h1 {
    background: #de7b32;
    color: #fff;
    padding: 10px 20px;
    position: absolute;
    top: 80px;
    z-index: 555;
    left: 0; }
  header .topLogo {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%); }
  header .topBlock {
    position: relative;
    z-index: 333;
    top: -100px; }
  header .telA {
    position: absolute;
    right: calc(50% - 475px);
    bottom: -30px;
    z-index: 333; }
  header .twitterA {
    position: absolute;
    right: calc(50% - 355px);
    bottom: -30px;
    z-index: 333; }
  header .mailA {
    position: absolute;
    right: calc(50% - 415px);
    bottom: -30px;
    z-index: 333; }
  header h5 {
    background: url("../imgHtml/select/orangeLine.png");
    position: absolute;
    top: 50px;
    width: 100%;
    height: 20px; }

/*menu*/
menu {
  position: relative;
  margin-bottom: 45px; }
  menu .innerWrap {
    width: 960px;
    display: block;
    margin: -40px auto 0;
    box-sizing: border-box;
    padding: 0px 0px 0 30px; }
    menu .innerWrap a {
      background: url("../imgHtml/common/topLink.png");
      padding: 23px 20px;
      width: 148px;
      height: 63px;
      vertical-align: text-bottom;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      right: 10px;
      top: 12px;
      font-size: 1em;
      transition: 0.5s; }
    menu .innerWrap a:hover {
      opacity: 0.8; }
    menu .innerWrap a:nth-child(2) {
      background: url("../imgHtml/common/selectLink.png"); }
    menu .innerWrap a:nth-child(3) {
      background: url("../imgHtml/common/bookLink.png"); }
    menu .innerWrap a:nth-child(4) {
      background: url("../imgHtml/common/eventLink.png"); }
    menu .innerWrap a:nth-child(5) {
      background: url("../imgHtml/common/nerBookLink.png"); }
    menu .innerWrap a:nth-child(6) {
      background: url("../imgHtml/common/accLink.png"); }
    menu .innerWrap a::after {
      position: absolute;
      content: url("../imgHtml/common/arrow_w.png");
      right: 5px;
      top: 17px; }
    menu .innerWrap a + a {
      margin-left: 3px; }

/*mainBlock*/
.mainBlock .innerWrap {
  background: url("../imgHtml/select/mainImg.jpg");
  width: 100%;
  height: 400px;
  color: #fff;
  text-align: center;
  position: relative;
  padding: 130px; }
  .mainBlock .innerWrap h2 {
    color: #fff;
    text-align: center; }
.mainBlock .innerWrap h5:first-child {
  width: 100%;
  height: 19px;
  position: absolute;
  left: 0;
  top: -11px;
  background: url("../imgHtml/select/orangeLine.png");
  z-index: 333; }
.mainBlock .innerWrap h5:last-child {
  width: 100%;
  height: 19px;
  position: absolute;
  bottom: -12px;
  left: 0;
  background: url("../imgHtml/select/orangeLine.png");
  z-index: 333; }

/*otherBlock*/
.otherBlock {
  background: #de7b32;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 20px;
  margin-bottom: 60px; }
  .otherBlock .innerWrap {
    color: #fff;
    margin: 0 auto;
    display: block;
    width: 960px; }
    .otherBlock .innerWrap h2 {
      color: #fff;
      text-align: center; }
    .otherBlock .innerWrap h2:after {
      content: url("../imgHtml/top/whiteLine.png");
      display: block;
      margin-top: -20px; }
    .otherBlock .innerWrap .other {
      position: absolute;
      left: calc(50% - 300px);
      top: -50px;
      z-index: 333; }
    .otherBlock .innerWrap .otherBox {
      display: -webkit-inline-box;
      background-repeat: no-repeat;
      position: relative;
      width: 960px;
      padding: 1%;
      box-sizing: border-box; }
      .otherBlock .innerWrap .otherBox div {
        color: #000;
        width: 32%;
        display: grid;
        padding: 25px;
        vertical-align: top;
        height: 140px;
        background: rgba(255, 255, 255, 0.7); }
        .otherBlock .innerWrap .otherBox div h3 {
          line-height: 1.5em; }
      .otherBlock .innerWrap .otherBox div:first-child img {
        position: absolute;
        top: 0px;
        left: 160px; }
      .otherBlock .innerWrap .otherBox div:nth-child(2) img {
        position: absolute;
        right: 347px;
        top: 0px; }
      .otherBlock .innerWrap .otherBox div:nth-child(3) img {
        position: absolute;
        top: -20px;
        right: 0px; }
      .otherBlock .innerWrap .otherBox div + div {
        margin-left: 1%; }
  .otherBlock .addTxt {
    text-align: center;
    padding-bottom: 60px; }

/*normal*/
.normal {
  width: 960px;
  background: #fff;
  margin: 0 auto;
  box-sizing: border-box; }
  .normal .innerWrap {
    width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 100px 60px 170px;
    position: relative; }
    .normal .innerWrap h2 {
      padding: 0;
      margin-bottom: 30px;
      letter-spacing: -0.05em; }
    .normal .innerWrap h2 + p {
      width: 400px;
      text-align: justify; }
  .normal img {
    position: absolute; }

/*special*/
.special {
  background: #de7b32;
  position: relative; }
  .special h5:first-child {
    width: 100%;
    height: 56px;
    position: absolute;
    left: 0;
    top: -30px;
    background: url("../imgHtml/select/orangeLine.png");
    z-index: 333; }
  .special h5:last-child {
    width: 100%;
    height: 19px;
    position: absolute;
    bottom: -12px;
    left: 0;
    background: url("../imgHtml/select/orangeLine.png");
    z-index: 333; }
  .special .innerWrap {
    width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 60px;
    height: 820px;
    position: relative; }
    .special .innerWrap h2 {
      color: #fff;
      font-family: "anzu";
      font-size: 3em;
      line-height: 1.5em;
      transform: rotate(-15deg);
      margin-top: -70px; }
    .special .innerWrap div {
      position: absolute; }
      .special .innerWrap div div {
        position: relative; }
        .special .innerWrap div div h3 {
          font-weight: bold;
          font-size: 1.2em;
          line-height: 1.2em; }
          .special .innerWrap div div h3 img {
            position: absolute; }
    .special .innerWrap .cat {
      top: 250px;
      left: 10px; }
      .special .innerWrap .cat h3 {
        top: 100px;
        position: absolute;
        left: 216px;
        z-index: 333;
        width: 210px; }
      .special .innerWrap .cat .nekoOmote {
        position: absolute;
        top: 210px;
        left: 40px; }
      .special .innerWrap .cat .fukidashi0 {
        top: 20px;
        position: absolute;
        left: 180px; }
    .special .innerWrap .risu {
      top: 290px;
      left: 410px; }
      .special .innerWrap .risu h3 {
        position: absolute;
        width: 330px;
        z-index: 333;
        top: 45px;
        left: 70px; }
      .special .innerWrap .risu .fukidashi1 {
        position: absolute;
        top: -10px;
        left: 30px; }
      .special .innerWrap .risu .risuBack {
        position: absolute;
        top: 170px;
        left: 170px; }
    .special .innerWrap .inu {
      top: 230px;
      right: 80px; }
      .special .innerWrap .inu h3 {
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.2em;
        z-index: 333;
        position: absolute;
        width: 360px;
        top: -80px;
        left: -290px; }
      .special .innerWrap .inu .inuRight {
        position: absolute;
        top: 80px;
        right: calc(50% + -130px); }
      .special .innerWrap .inu .fukidashi2 {
        top: -150px;
        right: calc(50% - 160px);
        position: absolute; }
    .special .innerWrap .messe {
      margin-top: 370px;
      position: relative; }
      .special .innerWrap .messe h4 {
        background: url("../imgHtml/select/commFukidashi_s.png");
        display: inline-block;
        width: 216px;
        height: 139px;
        padding: 50px 0;
        text-align: center;
        font-weight: bold;
        line-height: 1.5em;
        position: absolute; }
      .special .innerWrap .messe h4:first-child {
        color: #de3232; }
      .special .innerWrap .messe h4:nth-child(2) {
        color: #de7b32; }
      .special .innerWrap .messe h4:nth-child(3) {
        color: #87c56f; }
      .special .innerWrap .messe h4:nth-child(4) {
        color: #72bbc6; }
      .special .innerWrap .messe h4:nth-child(5) {
        color: #b974c6; }
    .special .innerWrap .sixMesse h4:first-child {
      top: 0;
      left: 0; }
    .special .innerWrap .sixMesse h4:nth-child(2) {
      top: -100px;
      left: 170px; }
    .special .innerWrap .sixMesse h4:nth-child(3) {
      top: 20px;
      left: 290px; }
    .special .innerWrap .sixMesse h4:nth-child(4) {
      top: -60px;
      left: 470px; }
    .special .innerWrap .sixMesse h4:nth-child(5) {
      top: 21px;
      left: 650px; }
    .special .innerWrap .sixMesse h4:nth-child(6) {
      top: -120px;
      left: 700px; }
    .special .innerWrap .fourMesse h4 {
      background: url("../imgHtml/select/commFukidashi_m.png");
      width: 288px;
      height: 186px;
      font-size: 1.3em;
      padding-top: 75px; }
    .special .innerWrap .fourMesse h4:first-child {
      top: 0;
      left: 0; }
    .special .innerWrap .fourMesse h4:nth-child(2) {
      top: -120px;
      left: 240px; }
    .special .innerWrap .fourMesse h4:nth-child(3) {
      top: 0px;
      left: 490px; }
    .special .innerWrap .fourMesse h4:nth-child(4) {
      top: -140px;
      left: 680px; }

/*proBlock*/
.proBlock {
  position: relative; }
  .proBlock .heart {
    position: absolute;
    top: 430px;
    right: -220px; }
  .proBlock .proImg .subImg {
    position: absolute; }
  .proBlock .proImg .subImg:first-child {
    top: 110px;
    right: 100px; }
  .proBlock .proImg .subImg:nth-child(2) {
    top: 190px;
    right: -80px; }
  .proBlock .proImg .subImg:nth-child(3) {
    top: 370px;
    right: 180px; }
  .proBlock .proImg .subImg:nth-child(4) {
    top: 370px;
    right: -80px; }

/*oderBlock*/
.oderBlock .innerWrap:first-child {
  padding-left: 400px;
  padding-bottom: 0px; }
  .oderBlock .innerWrap:first-child h2 span {
    margin-right: -23px; }
  .oderBlock .innerWrap:first-child .proImg {
    position: absolute;
    top: 120px;
    left: 0; }
    .oderBlock .innerWrap:first-child .proImg img:first-child {
      position: absolute;
      top: 0;
      left: -70px; }
    .oderBlock .innerWrap:first-child .proImg img:nth-child(2) {
      position: absolute;
      top: 80px;
      left: 190px; }
    .oderBlock .innerWrap:first-child .proImg img:nth-child(3) {
      position: absolute;
      top: 260px;
      left: -70px; }
    .oderBlock .innerWrap:first-child .proImg img:nth-child(4) {
      position: absolute;
      top: 260px;
      left: 110px; }
.oderBlock .innerWrap:nth-child(2) h2 {
  color: #72bbc6;
  font-family: "anzu";
  font-size: 2em;
  line-height: 1.5em;
  transform: rotate(-15deg);
  margin-top: -110px;
  font-weight: normal; }
.oderBlock .innerWrap:nth-child(2) p {
  margin-top: 120px;
  margin-left: 40px; }
.oderBlock .innerWrap:nth-child(2) .proImg {
  position: absolute;
  top: 120px;
  left: 650px;
  z-index: 333; }
  .oderBlock .innerWrap:nth-child(2) .proImg img:first-child {
    position: absolute;
    top: 90px;
    left: -250px; }
  .oderBlock .innerWrap:nth-child(2) .proImg img:nth-child(2) {
    position: absolute;
    top: 10px;
    left: -40px; }
  .oderBlock .innerWrap:nth-child(2) .proImg img:nth-child(3) {
    position: absolute;
    top: 260px;
    left: 10px; }
  .oderBlock .innerWrap:nth-child(2) .proImg img:nth-child(4) {
    position: absolute;
    top: 130px;
    left: 170px; }
.oderBlock .innerWrap:nth-child(2) .hatena {
  position: absolute;
  top: 30px;
  left: -10px; }
.oderBlock .innerWrap:nth-child(2) .nami {
  position: absolute;
  top: 190px;
  right: 30px; }

/*konnaBlock*/
.konnaBlock {
  height: 860px; }

/*moreBlock*/
.moreBlock {
  position: relative; }
  .moreBlock .proImg {
    position: absolute;
    top: 120px;
    left: 650px;
    z-index: 333; }
    .moreBlock .proImg img:first-child {
      position: absolute;
      top: -5px;
      left: -140px; }
    .moreBlock .proImg img:nth-child(2) {
      position: absolute;
      top: 260px;
      left: -140px; }
    .moreBlock .proImg img:nth-child(3) {
      position: absolute;
      top: 260px;
      left: 100px; }

/*omoiBlock*/
.omoiBlock {
  width: 1100px;
  border: 15px solid #de7b32;
  padding: 10px;
  margin: 0 auto;
  background: #fff; }
  .omoiBlock .innerWrap {
    border: 1px solid #de7b32;
    padding: 60px;
    position: relative; }
    .omoiBlock .innerWrap h2 {
      font-size: 2em;
      font-weight: bold;
      text-align: center; }
    .omoiBlock .innerWrap p {
      text-align: justify;
      line-height: 1.8em;
      width: 700px;
      margin: 0 auto; }
    .omoiBlock .innerWrap img {
      position: absolute; }
    .omoiBlock .innerWrap .birdRight {
      top: -40px;
      right: -20px; }
    .omoiBlock .innerWrap .bird {
      top: 470px;
      left: -40px; }
    .omoiBlock .innerWrap .apple {
      bottom: 20px;
      right: 20px; }

/*flowBlock*/
.flowBlock .innerWrap h2 {
  text-align: center; }
.flowBlock .innerWrap img {
  margin: 0 auto;
  display: block;
  position: relative; }
.flowBlock .innerWrap p {
  text-align: center;
  padding: 20px; }
.flowBlock .innerWrap a:first-of-type {
  background: #de7b32;
  padding: 20px;
  border-radius: 10px;
  color: #fff;
  display: block;
  width: 320px;
  margin: 30px auto 10px;
  text-align: center;
  font-family: "anzu";
  font-size: 2.2em; }
  .flowBlock .innerWrap a:first-of-type span {
    display: block;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-size: 0.5em;
    letter-spacing: 0.6em; }
.flowBlock .innerWrap a:last-child {
  display: block;
  color: #de7b32;
  border-bottom: 1px solid #de7b32;
  width: 100px;
  text-align: center;
  margin: 0 auto; }

@media screen and (max-width: 1024px) {
  .omoiBlock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 680px; }

  .omoiBlock .innerWrap .birdRight {
    top: -40px;
    right: 60px; }

  .omoiBlock .innerWrap .bird {
    top: 550px;
    left: 90px; }

  .flowBlock {
    margin-top: 630px; } }
@media screen and (max-width: 960px) {
  .backGround {
    width: 960px;
    height: 100%; }

  .normal {
    width: 900px; }
    .normal .innerWrap {
      width: 900px;
      padding: 100px 30px 170px; }

  .special .innerWrap {
    width: auto;
    padding: 10px; }
    .special .innerWrap .cat {
      left: -80px; }
    .special .innerWrap .risu {
      left: 330px; }
    .special .innerWrap .inu {
      top: 180px;
      right: 170px; }
    .special .innerWrap .messe {
      margin-top: 470px; }

  .oderBlock .innerWrap:nth-child(2) .hatena {
    transform: scale(1.4);
    left: 0px; } }