@-webkit-keyframes slideUp {
  0% {
    opacity: 0;
    margin-top: 30px;
    margin-bottom: -30px;
  }
  70% {
    margin-top: 0;
    margin-bottom: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    margin-top: 30px;
    margin-bottom: -30px;
  }
  70% {
    margin-top: 0;
    margin-bottom: 0;
  }
  100% {
    opacity: 1;
  }
}
/* =========================================================
seasonal-common
========================================================= */
.sp-ui {
  display: none;
}
@media only screen and (max-width: 767px) {
  .sp-ui {
    display: block;
  }
}

@media only screen and (max-width: 767px) {
  .section {
    margin: 2.2vmin 2.6vmin 0;
  }
}

@media only screen and (max-width: 767px) {
  .section-conversion-area {
    margin: 12.8vmin 0 12.8vmin;
  }
}

.full-mv {
  width: 100%;
  height: auto;
  position: relative;
}
.full-mv-title {
  position: absolute;
  left: 220px;
  top: 33%;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .full-mv-title {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: 12vw;
    width: 60vw;
  }
}
.full-mv-fig {
  width: 100%;
  height: 100%;
  padding-top: 23.33334%;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .full-mv-fig {
    padding-top: 57.7465%;
  }
}
.full-mv-fig img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.full-mv-fig::after {
  content: "";
  display: block;
  width: 100%;
  height: 49px;
  background: url(../img/seasonal/common/mv_wave.svg) no-repeat left bottom;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .full-mv-fig::after {
    background: url(../img/seasonal/common/mv_wave_sp.svg) no-repeat center bottom;
    height: 6.533334vw;
    background-size: 102% auto;
    bottom: -4px;
    left: -1px;
  }
}

.meddle-title {
  font-size: 2.2rem;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .meddle-title {
    font-size: 4.8vw;
    text-align: center;
  }
}
.meddle-title + .text {
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  .meddle-title + .text {
    margin-top: 3vw;
  }
}

.text {
  font-size: 1.4rem;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .text {
    font-size: 3.4666666667vw;
  }
}

.see_more_link {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.see_more_link:not(:first-of-type) {
  margin-top: 5px;
}
.see_more_link .icon {
  margin-top: -3px;
  margin-left: 0.4em;
  display: block;
}

.media-box {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .media-box {
    display: block;
  }
}
.media-box.is-col-3 .media-box-item {
  width: 30.9091%;
  margin-top: 40px;
}
@media only screen and (max-width: 767px) {
  .media-box.is-col-3 .media-box-item {
    width: 100%;
    margin-top: 6vw;
  }
  .media-box.is-col-3 .media-box-item:not(:first-of-type) {
    margin-top: 6vw;
    padding-top: 8vw;
    border-top: solid 1px #e5e5e5;
  }
}
.media-box.is-col-3 .media-box-item:not(:nth-child(3n)) {
  margin-right: 3.63635%;
}
@media only screen and (max-width: 767px) {
  .media-box.is-col-3 .media-box-item:not(:nth-child(3n)) {
    margin-right: 0;
  }
}
.media-box-link {
  display: block;
}
.media-box-fig {
  line-height: 0;
  position: relative;
}
.media-box-fig-caption {
  font-size: 1rem;
  color: #999999;
  position: absolute;
  right: 0;
  bottom: -14px;
}
.media-box-content {
  margin-top: 20px;
}
@media only screen and (max-width: 767px) {
  .media-box-content {
    margin-top: 3vw;
  }
}
.media-box-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.media-box-tag-item {
  font-size: 1.3rem;
  padding: 0.4em 1em;
  color: #fff;
  background-color: #b79e45;
}
@media only screen and (max-width: 767px) {
  .media-box-tag-item {
    font-size: 3.2vw;
  }
}
.media-box-tag-item:not(:first-of-type) {
  margin-left: 4px;
}
.media-box-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  .media-box-title {
    font-size: 4.2666666667vw;
    margin-top: 2vw;
  }
}
.media-box-text {
  margin-top: 12px;
  font-size: 1.5rem;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .media-box-text {
    margin-top: 3vw;
    font-size: 3.4666666667vw;
  }
}
.media-box-clickpoint {
  margin-top: 14px;
}
@media only screen and (max-width: 767px) {
  .media-box-clickpoint {
    margin-top: 3vw;
  }
}

a.media-box-link {
  -webkit-transition: opacity 0.3s 0.2s ease-out;
  transition: opacity 0.3s 0.2s ease-out;
}
a.media-box-link:hover {
  opacity: 0.7;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

.media-opposite {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .media-opposite {
    display: block;
  }
}
.media-opposite.is-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.media-opposite:not(:first-of-type) {
  margin-top: 60px;
}
@media only screen and (max-width: 767px) {
  .media-opposite:not(:first-of-type) {
    margin-top: 10vw;
  }
}
.media-opposite-fig {
  width: calc(505 / 1100 * 100%);
}
@media only screen and (max-width: 767px) {
  .media-opposite-fig {
    width: 100%;
  }
}
.media-opposite-content {
  width: calc(536 / 1100 * 100%);
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .media-opposite-content {
    width: 100%;
    padding-top: 4vw;
  }
}
.media-opposite.is-over-half .media-opposite-fig {
  width: calc(630 / 1100 * 100%);
}
@media only screen and (max-width: 767px) {
  .media-opposite.is-over-half .media-opposite-fig {
    width: 100%;
  }
}
.media-opposite.is-over-half .media-opposite-content {
  width: calc(410 / 1100 * 100%);
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .media-opposite.is-over-half .media-opposite-content {
    width: 100%;
    padding-top: 4vw;
  }
}
.media-opposite.is-other-half .media-opposite-fig {
  width: calc(600 / 1100 * 100%);
}
@media only screen and (max-width: 767px) {
  .media-opposite.is-other-half .media-opposite-fig {
    width: 100%;
  }
}
.media-opposite.is-other-half .media-opposite-content {
  width: calc(450 / 1100 * 100%);
  padding-top: 15px;
}
@media only screen and (max-width: 767px) {
  .media-opposite.is-other-half .media-opposite-content {
    width: 100%;
    padding-top: 4vw;
  }
}
.media-opposite-heading-title {
  font-size: 2rem;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .media-opposite-heading-title {
    font-size: 4.2666666667vw;
  }
}
.media-opposite-heading-person {
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: 10px;
}
@media only screen and (max-width: 767px) {
  .media-opposite-heading-person {
    font-size: 3.4666666667vw;
    margin-top: 2vw;
  }
}
.media-opposite-heading + .media-opposite-text {
  margin-top: 25px;
}
@media only screen and (max-width: 767px) {
  .media-opposite-heading + .media-opposite-text {
    margin-top: 4vw;
  }
}
.media-opposite-text {
  font-size: 1.4rem;
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .media-opposite-text {
    font-size: 3.4666666667vw;
  }
}
.media-opposite-text:not(:first-of-type) {
  margin-top: 25px;
}
@media only screen and (max-width: 767px) {
  .media-opposite-text:not(:first-of-type) {
    margin-top: 4vw;
  }
}

.bottom-cv-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
}
@media only screen and (max-width: 767px) {
  .bottom-cv-col {
    display: block;
    margin-top: 4vw;
  }
}
.bottom-cv-col-item {
  margin: 0 20px;
}
@media only screen and (max-width: 767px) {
  .bottom-cv-col-item {
    margin: 0;
  }
  .bottom-cv-col-item:not(:first-of-type) {
    margin-top: 3vw;
  }
}

.media-hr {
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .media-hr:not(:first-of-type) {
    margin-top: 1px;
  }
}
.media-hr-fig {
  line-height: 0;
  position: relative;
  z-index: 1;
}
.media-hr-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(577 / 1100 * 100%);
  height: 100%;
  padding: 0 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 1200px) {
  .media-hr-content {
    width: calc(540 / 1100 * 100%);
    padding: 0 30px;
  }
}
@media only screen and (max-width: 767px) {
  .media-hr-content {
    position: relative;
    width: 100%;
    display: block;
    padding: 5vw;
  }
}
.media-hr.is-reverse .media-hr-content {
  right: 0;
  left: auto;
}
.media-hr-heading-title {
  font-size: 2.6rem;
  line-height: 1.4;
  letter-spacing: normal;
}
@media only screen and (max-width: 1200px) {
  .media-hr-heading-title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .media-hr-heading-title {
    font-size: 4.2666666667vw;
  }
}
.media-hr-text {
  font-size: 1.4rem;
  line-height: 1.6;
  margin-top: 20px;
  text-align: justify;
}
@media only screen and (max-width: 767px) {
  .media-hr-text {
    font-size: 3.4666666667vw;
    margin-top: 3vw;
  }
}
.media-hr-caption {
  font-size: 1.2rem;
  margin-top: 1em;
  color: #999;
}

.about-anchor {
  width: 100%;
  padding-top: 25px;
}
@media only screen and (max-width: 767px) {
  .about-anchor {
    padding-top: 6vw;
    position: relative;
  }
  .about-anchor:after {
    content: "";
    display: block;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff));
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
  }
}

.anchor-label {
  text-align: center;
  text-indent: -9999px;
  overflow: hidden;
  height: 25px;
  background: url(/propose/assets/img/aboutiprimo/icon_contents.png) no-repeat center center;
  background-size: auto 25px;
}
@media only screen and (max-width: 767px) {
  .anchor-label {
    height: 7vw;
    background: url(/propose/assets/img/aboutiprimo/icon_contents.png) no-repeat center center;
    background-size: auto 7vw;
  }
}

.about-anchor-list {
  width: 100%;
  padding: 20px 0;
  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;
}
@media only screen and (max-width: 767px) {
  .about-anchor-list {
    padding: 5vw 9vw 5vw;
    overflow: scroll;
    border-bottom: 1px solid #ccc;
  }
}

.about-anchor-item {
  font-size: 14px;
}
.about-anchor-item + .about-anchor-item {
  padding-left: 38px;
}
.about-anchor-item a {
  display: inline-block;
  position: relative;
  padding-right: 1.3em;
}
.about-anchor-item a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 4px;
  width: 4px;
  height: 4px;
  border-right: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  -webkit-transform: rotate(45deg) translateY(-2px);
          transform: rotate(45deg) translateY(-2px);
  -webkit-transform-origin: right 50% 0;
          transform-origin: right 50% 0;
}
.about-anchor-item a:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: #1a1a1a;
  -webkit-transition: width ease 0.4s;
  transition: width ease 0.4s;
}
.about-anchor-item a:hover:after {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .about-anchor-item {
    font-size: 3.3vw;
    padding-left: 35vw;
  }
  .about-anchor-item + .about-anchor-item {
    padding-left: 6vw;
  }
  .about-anchor-item a {
    white-space: nowrap;
  }
  .about-anchor-item a:after {
    display: none;
  }
}

/* =========================================================
aboutiprimo-head
========================================================= */
.about-head {
  margin: 0 auto;
  padding: 0 0 60px;
}
@media only screen and (max-width: 767px) {
  .about-head {
    margin: 2.6vmin 2.6vmin 0;
    padding-bottom: 9.6vmin;
  }
}
.about-head-title {
  left: 240px;
  top: 18%;
}
@media only screen and (max-width: 767px) {
  .about-head-title {
    left: 5vw;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    top: 24%;
  }
}
.about-head-title-image {
  display: block;
}
@media only screen and (max-width: 767px) {
  .about-head-title-image {
    width: 37.466665vw;
  }
}
.about-head-title-text {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  margin: 20px 0 0 10px;
}
@media only screen and (max-width: 767px) {
  .about-head-title-text {
    font-size: 3.4666666667vw;
    margin: 3vw 0 0 2vw;
  }
}

.about-head-content {
  padding: 30px 20px 0;
}
.about-head-content-title {
  font-size: 3.2rem;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .about-head-content-title {
    font-size: 6.1333333333vw;
    line-height: 1.5;
  }
}
.about-head-content-text {
  width: 100%;
  max-width: 860px;
  margin: 25px auto 0;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .about-head-content-text {
    margin-top: 4vw;
    text-align: justify;
    font-size: 3.4666666667vw;
  }
}

.about-head-bnr {
  margin: 50px auto 0;
  width: 100%;
  max-width: 780px;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .about-head-bnr {
    margin: 6vw auto 0;
  }
}
.about-head-bnr-link {
  display: block;
  position: relative;
  -webkit-transition: opacity 0.3s 0.2s ease-out;
  transition: opacity 0.3s 0.2s ease-out;
}
@media only screen and (min-width: 991px) {
  .about-head-bnr-link:hover {
    -webkit-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    opacity: 0.8;
  }
  .about-head-bnr-link:hover .about-head-bnr-btn {
    background-color: #1a1a1a;
    color: #fff;
    -webkit-transition: background-color 0.3s ease-out, color 0.3s ease-out;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
  }
}
.about-head-bnr-image {
  position: relative;
  z-index: 1;
  line-height: 0;
}
.about-head-bnr-content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 55px 0 0 60px;
  z-index: 2;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 767px) {
  .about-head-bnr-content {
    padding: 8vw 0 0;
  }
}
.about-head-bnr-title {
  font-size: 1.8rem;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .about-head-bnr-title {
    font-size: 3.7333333333vw;
    text-align: center;
  }
}
.about-head-bnr-btn {
  margin-top: 20px;
  width: 140px;
  height: 36px;
  border: solid 1px #1a1a1a;
  border-radius: 40px;
  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;
  font-size: 1.3rem;
  -webkit-transition: background-color 0.3s ease-out, color 0.3s ease-out;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
@media only screen and (max-width: 767px) {
  .about-head-bnr-btn {
    margin: 4vw auto 0;
    width: 29.866667vw;
    height: 7.74vw;
    font-size: 3.2vw;
  }
}

/* =========================================================
aboutiprimo-variation
========================================================= */
.variation-content {
  margin-top: 50px;
}
@media only screen and (max-width: 767px) {
  .variation-content {
    margin-top: 8vw;
  }
}

@media only screen and (max-width: 767px) {
  .media-hr.is-cut .media-hr-content {
    background-color: #f7f5f6;
  }
}
@media only screen and (max-width: 767px) {
  .media-hr.is-variation .media-hr-content {
    background-color: #f8f5e8;
  }
}

.info-content {
  margin-top: 50px;
}
@media only screen and (max-width: 767px) {
  .info-content {
    margin-top: 8vw;
  }
}

@media only screen and (max-width: 767px) {
  .about-info {
    margin-top: 12vw;
  }
}