@charset "UTF-8";
@media screen and (max-width: 767px) {
  .only-pc {
    display: none !important;
  }
}
@media print, screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}
/*共通*/
.nakagawa_grandopen {
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP", serif;
  font-weight: 500;
  color: #000;
  line-height: 1.4;
}
.nakagawa_grandopen a {
  transition: all 0.3s;
  text-decoration: none;
  color: #000;
  line-height: 1.4;
}
.nakagawa_grandopen a:hover {
  opacity: 0.8;
}
.nakagawa_grandopen p {
  line-height: 1.4;
}
.nakagawa_grandopen ul {
  list-style: none;
}
.nakagawa_grandopen img {
  vertical-align: bottom;
}

/* -------------------------------------
        FV
------------------------------------- */
.fv__wrap {
  position: relative;
  padding-top: 40px;
  background: #BAE2F4;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .fv__wrap {
    padding-bottom: 10px;
  }
}
.fv__wrap::before {
  content: "";
  position: absolute;
  width: 8%;
  height: 30%;
  background: url(../img/fv-left.png) no-repeat;
  background-size: contain;
  left: 6%;
  top: 40%;
  animation: floating 2s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 767px) {
  .fv__wrap::before {
    left: 4%;
    bottom: auto;
    top: 30%;
  }
}
.fv__wrap::after {
  content: "";
  position: absolute;
  width: 8%;
  height: 30%;
  background: url(../img/fv-right.png) no-repeat;
  background-size: contain;
  right: 6%;
  top: 40%;
  animation: floating 1.8s ease-in-out infinite alternate-reverse;
}
@media screen and (max-width: 767px) {
  .fv__wrap::after {
    right: 4%;
    bottom: auto;
    top: 25%;
  }
}
.fv__mall {
  position: relative;
  width: 60%;
  margin: 0 auto;
  max-width: 600px;
  margin-bottom: 20px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fv__mall {
    margin-bottom: 10px;
    width: 70%;
  }
}
.fv__day {
  position: relative;
  width: 40%;
  margin: 0 auto;
  max-width: 440px;
  margin-bottom: 20px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fv__day {
    margin-bottom: 10px;
    width: 50%;
  }
}
.fv__mainttl {
  position: relative;
  width: 85%;
  margin: 0 auto;
  max-width: 1100px;
  margin-bottom: 20px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fv__mainttl {
    width: 95%;
    margin-bottom: 0;
  }
}
.fv__subttl {
  position: relative;
  width: 75%;
  margin: 0 auto;
  max-width: 880px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .fv__subttl {
    width: 85%;
  }
}
.fv__mainimg {
  width: 100%;
  margin-top: -1px;
}
.fv__mainimg img {
  width: 100%;
}

@keyframes floating {
  0% {
    transform: translateY(-4%);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4%);
  }
}
.about {
  text-align: center;
  padding-bottom: 100px;
}
@media screen and (max-width: 767px) {
  .about {
    padding-bottom: 60px;
  }
}
.about__img {
  width: 32%;
  margin: 0 auto;
  transform-origin: center bottom;
  animation: shakeLR 3s infinite ease-in-out;
}
@media screen and (max-width: 767px) {
  .about__img {
    margin-top: 20px;
  }
}
.about__txt {
  width: 90%;
  max-width: 900px;
  margin: 10px auto 20px;
}
@media screen and (max-width: 767px) {
  .about__txt {
    margin-bottom: 10px;
  }
}
.about__parking {
  width: 70%;
  margin: 0 auto;
}

@keyframes shakeLR {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0);
  }
  80% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* -------------------------------------
        一覧
------------------------------------- */
.con {
  margin-top: -20px;
}
.con__ttl {
  position: relative;
  text-align: center;
  background: #F29600;
  border-radius: 20px 20px 0 0;
  padding: 15px 0;
  color: #fff;
  font-size: 3em;
  font-weight: 900;
  letter-spacing: 2px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .con__ttl {
    font-size: 1.8em;
  }
}
.con__ttl::before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: #F29600;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -0.3em;
  transform: rotate(45deg);
  z-index: -1;
}
.con__wrap {
  position: relative;
  background: #FDF1DD;
  padding: 80px 0 100px;
}
@media screen and (max-width: 767px) {
  .con__wrap {
    padding: 20px 0 60px;
  }
}
.con__wrap::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  background: url(../img/con-left.png) repeat-y;
  background-size: 100% auto;
  left: 0;
  top: 0;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .con__wrap::before {
    width: 100%;
    background: url(../img/con-bg-sp.png) repeat-y;
    background-size: contain;
  }
}
.con__wrap::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 100%;
  background: url(../img/con-right.png) repeat-y;
  background-size: 100% auto;
  background-position: right;
  right: 0;
  top: 0;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .con__wrap::after {
    content: none;
  }
}
.con__list {
  position: relative;
  width: 95%;
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .con__list {
    justify-content: space-between;
  }
}
.con__list .item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 30%;
  margin: 20px 8px;
  padding-bottom: 1.5em;
  border: 2px solid #E8528D;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  max-width: 340px;
  min-width: 240px;
}
@media screen and (max-width: 767px) {
  .con__list .item {
    width: 49%;
    margin: 15px 0;
    padding-bottom: 1em;
    min-width: auto;
  }
}
.con__list .item__ttl {
  background: #F8D4E0;
  padding: 14px 0 12px;
  border-radius: 20px 20px 0 0;
}
@media screen and (max-width: 767px) {
  .con__list .item__ttl {
    border-radius: 18px 18px 0 0;
  }
}
.con__list .item__ttl .sub {
  font-size: 0.9em;
}
@media screen and (max-width: 767px) {
  .con__list .item__ttl .sub {
    font-size: 0.85em;
  }
}
.con__list .item__ttl .main {
  width: 95%;
  margin: 0 auto;
  font-weight: 700;
  font-size: 1.2em;
}
@media screen and (max-width: 767px) {
  .con__list .item__ttl .main {
    font-size: 1em;
    line-height: 1.2;
  }
}
.con__list .item__logo {
  width: 90%;
  margin: 8px auto;
}
.con__list .item__btn {
  width: 90%;
  margin: 0 auto;
  margin-top: auto;
}
@media screen and (max-width: 767px) {
  .con__list .item__btn {
    width: 95%;
  }
}
.con__list .item__btn a {
  display: block;
  padding: 16px 0;
  background: #FFF002;
  border-radius: 50px;
  box-shadow: 0 5px 0 #FFBA40;
  color: #C60079;
  font-size: 1.1em;
}
@media screen and (max-width: 767px) {
  .con__list .item__btn a {
    font-size: 0.8em;
    box-shadow: 0 3px 0 #FFBA40;
    padding: 8px 0;
  }
}
.con__list .item__btn a span {
  position: relative;
  display: inline-block;
}
.con__list .item__btn a span::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: url(../img/arrow_pink.svg) no-repeat;
  background-size: contain;
  top: 16%;
  right: -15%;
  transition: all 0.3s;
}
.con__list .item__btn a:hover {
  transform: translateY(4px);
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  .con__list .item__btn a:hover {
    transform: translateY(3px);
  }
}
.con__list .item__btn a:hover span::after {
  right: -20%;
}
.con__list .item__dec {
  border: none;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.con__list .item__dec-item {
  width: 100%;
}
.con__list .item--megane::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  background: url(../img/con1-dec3.png) no-repeat;
  background-size: contain;
  left: 4%;
  top: -6%;
}
.con__list .item--coppe::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  background: url(../img/con1-dec4.png) no-repeat;
  background-size: contain;
  right: 4%;
  top: -6%;
}
.con__list .item--tullys::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  background: url(../img/con2-dec3.png) no-repeat;
  background-size: contain;
  background-position: right;
  right: 4%;
  top: -6%;
}
.con__list .item--sushi::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  background: url(../img/con2-dec4.png) no-repeat;
  background-size: contain;
  left: 4%;
  top: -6%;
}
.con__list .item--cleaning::before {
  content: "";
  position: absolute;
  width: 18%;
  height: 20%;
  background: url(../img/con3-dec3.png) no-repeat;
  background-size: contain;
  right: 6%;
  top: -10%;
}
@media screen and (max-width: 767px) {
  .con__list .item--cleaning::before {
    width: 22%;
    top: -12%;
  }
}
.con__list .item--color::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  background: url(../img/con3-dec4.png) no-repeat;
  background-size: contain;
  left: 4%;
  top: -6%;
}
.con__con2 .con__ttl {
  background: #E50012;
}
.con__con2 .con__ttl::before {
  background: #E50012;
}
.con__con2 .con__wrap {
  background: #FDEEEF;
}
.con__con3 .con__ttl {
  background: #8DC21F;
}
.con__con3 .con__ttl::before {
  background: #8DC21F;
}
.con__con3 .con__wrap {
  background: #EDF5DB;
}

/*アニメーション*/
.anime-l {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateX(-40px);
}

.anime-b {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
  transform: translateY(30px);
}

.anime-o {
  opacity: 0;
  visibility: hidden;
  transition: 2.5s;
}

.anime-o2 {
  opacity: 0;
  visibility: hidden;
  transition: 3.5s;
  transition-delay: 0.4s;
}

.anime-o3 {
  opacity: 0;
  visibility: hidden;
  transition: 3.5s;
  transition-delay: 1.6s;
}

.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}