/*========================================================================
   index layout
========================================================================*/
#index #mainVisual::before {
 padding-top: 41.25%;
}

#index #contents {
 padding-top: 0px;
}

#index #contents::before {
 top: -15px;
}

#greeting .txtArea h3 {
 font-size: calc(24em / 16);
}

#greeting .imgArea {
 margin-bottom: 1em;
}

@media screen and (min-width: 768px) {
 #greeting {
  height: auto;
  position: relative;
 }
 #greeting::after {
  content: '';
  display: block;
  padding-top: 50%;
 }
 #greeting .imgArea {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
 }
 #greeting .bg {
  display: none;
 }
}

@media screen and (min-width: 1000px) {
 #greeting {
  height: 500px;
 }
 #greeting .bg {
  display: block;
  width: 470px;
  height: 357px;
  background-image: url(../img/index/balloon.png);
  position: absolute;
  top: 73px;
  right: 40px;
 }
 #greeting .bg .txtArea {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1.2em;
 }
}

#point .imgArea {
 margin-bottom: 2.5em;
}

@media screen and (min-width: 768px) {
 #point .layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 115%;
  margin-right: -15%;
  margin-left: 0%;
 }
 #point .layout.rv {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-flow: row-reverse;
  flex-flow: row-reverse;
  margin-right: 0%;
  margin-left: -15%;
 }
 #point .txtArea {
  width: 35.65%;
 }
 #point .imgArea {
  max-width: 700px;
  width: 60.8%;
  margin: 0 1.5% 2.5em;
 }
}

@media screen and (min-width: 1000px) {
 #point .txtArea {
  margin-top: 60px;
 }
 #point .imgArea {
  margin: 0 1.5% 1em;
 }
}

#point01 .deco_circle {
 position: absolute;
 top: 170px;
 left: -180px;
 z-index: -1;
 -webkit-transform: scale(0.6);
 -ms-transform: scale(0.6);
 transform: scale(0.6);
}

#point01 .deco01 {
 position: absolute;
 top: 170px;
 left: -50px;
 z-index: -1;
 -webkit-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
}

#point01 .deco02 {
 position: absolute;
 top: -150px;
 right: -100px;
 z-index: -1;
 -webkit-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
}

@media screen and (min-width: 768px) {
 #point01 .deco_circle {
  position: absolute;
  top: -230px;
  left: -180px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
 #point01 .deco01 {
  position: absolute;
  top: -150px;
  left: -230px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
 #point01 .deco02 {
  position: absolute;
  top: -210px;
  right: -260px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
}

#point02 .deco_circle {
 position: absolute;
 top: -10px;
 left: 0px;
 z-index: -1;
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
}

#point02 .deco03 {
 position: absolute;
 top: -30px;
 left: -40px;
 z-index: -1;
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}

#point02 .deco04 {
 position: absolute;
 top: 170px;
 right: -40px;
 z-index: -1;
 -webkit-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
}

#point02 .dog02 {
 position: absolute;
 top: 230px;
 right: 10px;
 z-index: -1;
 -webkit-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
}

@media screen and (min-width: 768px) {
 #point02 .deco_circle {
  position: absolute;
  top: -130px;
  left: 340px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
 #point02 .deco03 {
  position: absolute;
  top: -320px;
  left: -210px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
 #point02 .deco04 {
  position: absolute;
  top: 70px;
  right: -160px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
 #point02 .dog02 {
  position: absolute;
  top: -10px;
  right: -70px;
  z-index: -1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
 }
}

#snsArea #fb h3 {
 text-align: center;
 margin-bottom: 2em;
}

#snsArea #fb .contwrap {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -ms-flex-flow: wrap;
 flex-flow: wrap;
}

#snsArea #fb .contwrap .cont {
 width: 100%;
}

@media screen and (min-width: 768px) {
 #snsArea #fb .contwrap .cont {
  width: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
 }
}

#snsArea #insta .btn {
 margin-right: auto;
 margin-left: auto;
}

#snsArea #insta .btn a {
 min-width: 320px;
 max-width: 410px;
 width: 100%;
 padding: 20px 0;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border-radius: 10px;
 border: solid 1px #67b3cc;
 background: url(../img/bg_blue_dark.jpg);
}

#snsArea #insta .btn a::after {
 display: none;
}

#snsArea #insta .btn a:hover {
 opacity: .7;
 background: url(../img/bg_blue_dark.jpg);
 color: #fefefe;
}

#bnrArea ul {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -ms-flex-flow: wrap;
 flex-flow: wrap;
}

#bnrArea li {
 height: 50px;
 margin-right: 0.6em;
 margin-left: 0.6em;
}

#bnrArea li a {
 border-radius: 10px;
 border: solid 1px #67b3cc;
 background: url(../img/bg_blue_dark.jpg);
}

#bnrArea li a:hover {
 opacity: .7;
 background: url(../img/bg_blue_dark.jpg);
 color: #fefefe;
}
/*# sourceMappingURL=index.css.map */