.top {
  position: relative;
}

.hero, .heroAlt {
  width: auto;
  height: 400px;
  background-color: white;
  /* overflow: hidden; */
}

#hero, #heroAlt {
  opacity: 0;
}

#heroAlt {
  position: relative;
  bottom: 400px;
}
.hero_wrap {
  background-size: cover;
  width: 100%;
  height: 400px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-position: center;
}

.home_wrapper {
  position: relative;
  bottom: 400px;
}

.messages {
  position: absolute;
  opacity: 0;
  width: auto;
  display: block;
}

#message_1 {
  height: 10vw;
  top: 200px;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
#message_2 {
  height: 11vw;
  top: 120px;
  left: 14vw;
}
#message_3 {
  height: 5.5vw;
  top: 300px;
  left: 2vw;
}

.home .banner {
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 96px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.home .row {
  background-size: cover;
}

.home .join {margin-bottom: 180px;}
.home .reason {
  margin-top: -200px;
  margin-bottom: -120px;
}

.map {
  margin-bottom: -216px;
}

.msg {
  background-color: white;
  background-image: url('../images/home/banner_1.jpg');
  border-top: 1px solid #DFF0EA;
  border-bottom: 1px solid #b6d9ca;
  color: #1d2924;
}

.msg.row {
  background-size: cover;
}

.msg .content {
  position: relative;
}

.msg .banner .banner_items {
  width: 960px;
  background-image: url('../images/common/material_1.png'), url('../images/common/material_1_revert.png');
}

.msg .content_item .image {
  height: 280px;
  position: relative;
  right: 20%;
}

.msg .content_item p {
  padding-right: 48px;
}

.reason.row {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('../images/home/banner_5.png');
  height: 2700px;
  position: relative;
}

.reason.row .content {
  position: absolute;
  top: 340px;
  display: block;
  width: 800px;
  left: 50%;
  transform: translate(-50%,0);
}

.reason.row .content .content_item {
  margin-bottom: 32px;
}

.reason.row .content .title {
  width: 100%;
  padding-top: 48px;
  text-align: center;
  background-position: top;
  background-size: 400px;
  background-repeat: no-repeat;
  background-image: url('../images/home/under_decoration.png');
  margin-bottom: 32px;
}

.reason.row > .content > .title > h1 {
  color: #9c8872;
}

.reason.row .content .number {
  height: 80px;
  width: 200px;
  text-align: center;
  font-size: 20px;
  line-height: 2.5;
  background-position: center;
  background-size: 200px;
  background-repeat: no-repeat;
  background-image: url('../images/home/title_wrap.png');
  color: #8995ab;
  margin: auto;
  font-weight: bold;
}

.reason.row .content h2 {
  color: #72819c;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.reason.row .content p {
  padding: 1rem 0;
  padding-left: 0.5rem;
  color: #5e5c4d;
}

.reason.row .content p span {
  display: block;
  padding: 0.2rem 0;
  padding-left: 1rem;
  margin-left: 1rem;
  color: #5e5c4d;
  font-weight: bold;
  border-left: 3px solid #c7bfb7;
}

.reason.row .content h2::before {
  content: "　";
  font-size: 16px;
  position: relative;
  bottom: 4px;
  margin-right: 1rem;
  background-color: #8995ab;
}

.stuff.row {
    background-image: url('../images/home/banner_3.jpg');
    border-top: 1px solid #F8D0EA;
    border-bottom: 1px solid #F8D0EA;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

.stuff .banner .banner_items {
    width: 960px;
    background-image: url('../images/common/material_1.png'), url('../images/common/material_1_revert.png');

}

.stuff .content .content_item .circle {
  background-size: calc(270px * 1.4);
  background-position: center;
  height: 270px;
  width: 270px;
  border-radius: calc(270px / 2);
}

.stuff .content .content_item .circle_0 {
  background-image: url('../images/home/stuff_1.jpg');
}
.stuff .content .content_item .circle_1 {
  background-image: url('../images/home/stuff_2.jpg');
}
.stuff .content .content_item .circle_2 {
  background-image: url('../images/home/stuff_3.jpg');
}

.join {
  background-color: white;
  background-image: url('../images/home/banner_2.png');
  background-position: top;
  border-top: 1px solid #f0e0c2;
  border-bottom: 1px solid #f0e0c2;
}

.join h1:first-child {
  /* transform: scale(0.82); */
}

.join.row {
  position: relative;
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  height: 1840px;
}

.join_wrap {
  position: absolute;
  top: 220px;
  width: 800px;
  left: 50%;
  transform: translate(-50%,0);
}

.join .content {
  width: 720px;
  position: relative;
  padding: 12px 0;
  margin-bottom: 56px;
}

.join .content .content_item {
  padding: 0;
}

.join .content .circle div {
  width: 200px;
  height: 200px;
  border-radius: calc(200px / 2);
}

.join .content_item.text img {
  height: 64px;
}

.join .content_item.text h2 {
  display: inline-block;
  margin: 0 32px;
}

.join .content_item.text {
  padding: 0 16px;
}
.join .content_item.text p {
  padding: 0 4px;
  font-size: 1.15rem;
}

.join .content_item.text h2 span {
  font-family: 'Monasticfont';
  -webkit-font-smoothing: unset !important;
  -moz-osx-font-smoothing: unset !important;
  -webkit-font-feature-settings: unset !important;
          font-feature-settings: unset !important;
  letter-spacing: 3px;
  color: #5e5c4d;
  font-weight: bold;
  font-size: 1.8rem;
}

.join .content_item.text .text_title {
  text-align: center;
  padding-bottom: 16px;
}

.join .content:nth-of-type(1) .circle div {
  background-image: url('../images/home/consul.jpg');
}
.join .content:nth-of-type(2) .circle div {
  background-image: url('../images/home/join.jpg');
}
.join .content:nth-of-type(3) .circle div {
  background-image: url('../images/home/party.jpg');
}
.join .content:nth-of-type(4) .circle div {
  background-image: url('../images/home/seeing.jpg');
}
.join .content:nth-of-type(5) .circle div {
  background-image: url('../images/home/ceremony.jpg');
}

@media screen and (max-width: 1200px) {
  .join.row {
    background-image: none;
    height: 1240px;
  }
  .join_wrap {
    width: 100%;
    top: 100px;
  }
  .join_wrap .content:nth-of-type(odd) {
    width: 100%;
    padding: 16px 5%;
    background-color: #F5EAD6;
  }
  .join .content {
    margin-bottom: 0;
  }
}

.alliance {
  background-image: url('../images/home/banner_3.jpg');
  border-top: 1px solid #F8D0EA;
  border-bottom: 1px solid #F8D0EA;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.alliance .banner .banner_items {
  width: 960px;
  background-image: url('../images/common/material_1.png'), url('../images/common/material_1_revert.png');
}

.alliance .content .content_item:nth-of-type(1) img {
  border-radius: 2px;
  height: 100px;
}
.alliance .content .content_item:nth-of-type(2) img {
  height: 150px;
}
.alliance .content .content_item:nth-of-type(3) img {
  border-radius: 13px;
  height: 200px;
}

.alliance .info {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
  top: 30px;
}

.alliance .info p {
  color: #DE5471;
  text-shadow:1px 1px 2px #db95a4;
  font-size: 2.2vw;
  font-weight: bold;
}

.blog {
  text-align: center;
}

.blog h1 {
  z-index: 2;
  cursor: pointer;
}

.blog .banner {
  background-color: #FDF6EE;
  border-top: 1px solid #FBE8DA;
  height: 128px;
}

.blog > div {
  margin: auto;
  height: 160px;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
}

.decorations {
  bottom: 8px;
  background-color: #948475;
}

.decorations:before {
  background-color: #d4c7ba;
}

.decorations:after {
  background-color: #6E6256;
}

.blog > div .blog_banner {
  background-image: url('../images/home/banner_blog.png');
  background-position-x: -30px;
  background-size: contain;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #FBE8DA;
}

.blog > div .blog_banner:hover {
  opacity: 0.8;
  cursor: pointer;
  position: relative;
  z-index:1;
}

.blog .lets_read {
  display: none;
  height: 88px;
  line-height: 4.5;
  font-size: 1.2rem;
  background-color: #6e6256;
  color: #FDF6EE;
  font-weight: bold;
  letter-spacing: 0.05rem;
}

.blog .lets_read:hover {
  background-color: #7d7063;
  color: #FDF6EE;
}

.fixed {
  display: none;
}

 /* Lisences
  *---------------------------------*/
.msg .lisence {
  right: -128px;
  bottom: 16px;
}

.join .lisence {
  right: -188px;
  bottom: -120px;
}

.reason .lisence {
  right: 360px;
  bottom: 360px;
}