﻿.contents-area {
  background: none;
  padding: 0;
  margin-top: 0;
  text-align: left;
}

.spContent {
  display: none;
}
.ta-c {
  text-align: center;
}

#page-top {
  margin-left: 1140px;
  z-index: 9999;
}

#str_container {
  width: 100%;
}
#str_container #topicPath {
  width: 960px;
  margin: 5px auto;
}
#str_container #localMenu {
  width: 960px;
  margin: 0 auto;
}
#str_container #res-header > div {
  width: 972px;
  margin: 0 auto;
}
.squareLayout01 {
  margin: -45px 0 0 -120px;
}



@media screen and (max-width: 768px) {
  #str_container #res-header {
    width: 100%;
  }
  .contents-area {
    margin: 0;
  }
  .pcContent {
    display: none!important;
  }
  .spContent {
    display: block!important;
  }

  #str_container #topicPath {
    width: 100%;
    margin: 0 auto;
  }
  #str_container #topicPath {
    width: 100%;
    margin: 5px auto;
  }
  #str_container #res-header > div {
    width: 100%;
    margin: 0 auto;
  }

  #page-top {
    margin-left: 0;
    z-index: 9999;
  }
}

.contents-area.layout01 {
  position: relative;
}
.contents-area.layout01:after {
  content: "";
  background: #ffca0a;
  width: 100%;
  height: 280px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.contents-area.layout01 p {
  width: 960px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 999;
}

.contents-area.layout02 {
  width: 960px;
  margin: 0 auto;
}
.contents-area.layout02 p {
  margin-top: 0;
}
.contents-area.layout02 p:first-child + * {
  margin-top: -40px;
}

.contents-area.layout03 {
  margin: 60px auto 0;
  position: relative;
}
.contents-area.layout03:after {
  content: "";
  background: #e5007f;
  width: 100%;
  height: 340px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.contents-area.layout03 p {
  width: 960px;
  height: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 999;
}
.squareLayout03 {
  position: absolute;
  top: 120px;
  left: -120px;
}

.contents-area.layout04 {
  width: 960px;
  margin: 120px auto 0;
}
.squareLayout04 {
  margin-top: -122px;
}

.contents-area.layout05 {
  width: 960px;
  margin: -7px auto 0;
}

.contents-area.layout06 p {
  width: 960px;
  margin: 30px auto 0;
}
.contents-area.layout06 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout05 {
  position: absolute;
  top: 32px;
  left: -120px;
}

.contents-area.layout07 {
  width: 960px;
  margin: 120px auto 0;
}

.contents-area.layout08 p {
  width: 960px;
  margin: 30px auto 0;
}
.contents-area.layout08 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout06 {
  position: absolute;
  top: -97px;
  left: 0;
}

.contents-area.layout09 p {
  width: 960px;
  margin: 14px auto 0;
}
.contents-area.layout09 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout07 {
  position: absolute;
  left: -120px;
  bottom: -15px;
}

.contents-area.layout10 {
  width: 960px;
  margin: 15px auto 0;
}

.contents-area.layout11 p {
  width: 960px;
  margin: 44px auto 0;
}
.contents-area.layout11 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout08 {
  position: absolute;
  left: 0;
  bottom: -70px;
}

.contents-area.layout12 {
  width: 960px;
  margin: 120px auto 0;
}

.contents-area.layout13 p {
  width: 960px;
  margin: 44px auto 0;
}
.contents-area.layout13 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout09 {
  position: absolute;
  left: -120px;
  bottom: 493px;
}
.contents-area.layout13 .comment {
  position: absolute;
  top: 903px;
  left: 30px;
  z-index: 999;
  font-size: 14px;
}

.contents-area.layout14 p {
  width: 960px;
  margin: 60px auto 0;
  position: relative;
}
.contents-area.layout14 {
  position: relative;
  z-index: 9999;
}
.contents-area.layout14 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout10 {
  position: absolute;
  top: -32px;
  left: 0;
}
.contents-area.layout14 .btn-gray {
  display: block;
  width: 390px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(51, 51, 51) 0px 5px 0px 0px;
  color: rgb(51, 51, 51);
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 22px;
  text-align: center;
  max-height: 999999px;
  margin: 0px auto;
  padding: 15px 0px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(51, 51, 51);
  border-image: initial;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  bottom: 36px;
  left: 81px;
  z-index: 9999;
}
.contents-area.layout14 .btn-gray a {
  color: rgb(51, 51, 51);
}
.contents-area.layout14 .btn-gray:hover {
  color: rgb(51, 51, 51);
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3;
}

.contents-area.layout15 p {
  width: 960px;
  margin: 105px auto 0;
}
.contents-area.layout15 p:first-child {
  position: relative;
  z-index: 999;
}
.squareLayout11 {
  position: absolute;
  top: -156px;
  left: -120px;
  z-index: 99;
}

.contents-area.layout16 {
  width: 960px;
  margin: 60px auto 0;
}
.contents-area.layout16 p {
  position: relative;
}
.contents-area.layout16 .btnInsta {
  position: absolute;
  top: 185px;
  left: 330px;
}
.contents-area.layout16 .btnInsta:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: .3;
}

@media screen and (max-width: 768px) {
  .contents-area.layout01 {
    margin: 60px 0 0 0;
  }
  .contents-area.layout01:after {
    display: none;
  }
  .contents-area.layout01 p {
    width: 100%;
    height: auto;
  }

  .contents-area.layout02 {
    width: 100%;
    margin: 60px 0 0 0;
  }
  .contents-area.layout02 p:first-child + * {
    margin-top: 0;
  }

  .contents-area.layout03 {
    margin: 30px 0 0 0;
    position: relative;
  }
  .contents-area.layout03:after {
    display: none;
  }
  .contents-area.layout03 p {
    width: 100%;
    height: auto;
  }

  .contents-area.layout04 {
    width: 100%;
    margin: 75px 0 0 0;
  }

  .contents-area.layout05 {
    width: 100%;
    margin: 15px 0 0 0;
  }

  .contents-area.layout06 {
    margin: 30px 0 0 0;
  }
  .contents-area.layout06 p {
    width: 100%;
    margin: 0;
  }

  .contents-area.layout07 {
    width: 100%;
    margin: 75px 0 0 0;
  }

  .contents-area.layout08 {
    margin: 30px 0 0 0;
  }
  .contents-area.layout08 p {
    width: 100%;
    margin: 0;
  }

  .contents-area.layout09 {
    margin: 15px 0 0 0;
  }
  .contents-area.layout09 p {
    width: 100%;
    margin: 0;
  }

  .contents-area.layout10 {
    width: 100%;
    margin: 5px 0 0 0;
  }

  .contents-area.layout11 {
    margin: 25px 0 0 0;
  }
  .contents-area.layout11 p {
    width: 100%;
    margin: 0;
  }

  .contents-area.layout12 {
    width: 100%;
    margin: 50px 0 0 0;
  }

  .contents-area.layout13 {
    margin: 20px 0 0 0;
  }
  .contents-area.layout13 p {
    width: 100%;
    margin: 0;
  }
  .contents-area.layout13 .comment {
    position: absolute;
    top: 100.3%;
    left: 8.3%;
    z-index: 999;
    font-size: 18px;
  }

  .contents-area.layout14 {
    margin: 70px 0 0 0;
    position: relative;
  }
  .contents-area.layout14 p {
    width: 100%;
    margin: 0;
  }
  .contents-area.layout14 p {
    width: 100%;
    margin: 0;
  }
  .contents-area.layout14 .btn-gray {
    position: absolute;
    bottom: 6%;
    left: 17%;
    width: 65%;
  }

  .contents-area.layout15 {
    margin: 40px 0 0 0;
  }
  .contents-area.layout15 p {
    width: 100%;
    margin: 0;
  }

  .contents-area.layout16 {
    width:100%;
    margin: 30px 0 0 0;
  }
  .contents-area.layout16 .btnInsta {
    position: absolute;
    top: 58%;
    left: 43%;
    width: 49%;
  }

}

@media screen and (max-width: 480px) {
  .contents-area.layout13 .comment {
    position: absolute;
    top: 101%;
    left: 8.3%;
    z-index: 999;
    font-size: 12px;
  }

  .contents-area.layout14 {
    margin: 50px 0 0 0;
    position: relative;
  }
  .contents-area.layout14 .btn-gray {
    position: absolute;
    bottom: 5%;
    left: 17%;
    width: 65%;
    font-size: 14px;
    padding: 10px 0;
  }
}
