@charset "UTF-8";
/* Diamond
-------------------------------------------------- */
.m-diamonds {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.m-diamonds .m-diamond {
  margin: 0 .7em;
}

.m-diamond {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 3.7em;
  height: 3.7em;
  background: #df5189;
  color: #fff;
  transform: rotate(45deg);
}

.m-diamond span {
  font-size: .19rem;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
  transform: rotate(-45deg);
}

.m-diamond__brown {
  background-color: #9c7610;
}

@media screen and (max-width: 768px) {
  .m-diamond {
    font-size: .14rem;
  }
  .m-diamond span {
    font-size: .18rem;
  }
}

/* Lineup
-------------------------------------------------- */
.m-lineups {
  display: flex;
  flex-direction: row;
  margin: 0 -4em;
}

.m-lineups .m-lineup {
  max-width: none;
  width: 50%;
  padding: 0 4em;
}

.m-lineup {
  max-width: 500px;
}

.m-lineup-img {
  position: relative;
  margin-bottom: 3em;
}

.m-lineup-img-main {
  position: relative;
  top: 0;
  left: 0;
}

.m-lineup-img-main img {
  width: 100%;
}

.m-lineup-img-main figcaption {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-10%);
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: .40rem;
  font-family: "Alegreya", serif;
  color: #ba9224;
  letter-spacing: 2px;
}

.m-lineup-img-sub {
  position: absolute;
  bottom: -2em;
  right: -1.3em;
}

.m-lineup-img-sub-diamonds {
  position: relative;
  top: 2em;
  left: .7em;
  z-index: 10;
}

.m-lineup-img-sub-diamonds__type02 {
  position: absolute;
  top: -3em;
  left: 0;
  width: 32em;
  transform: translateX(10%);
}

.m-lineup-ttl {
  position: relative;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}

.m-lineup-ttl-heading {
  font-size: .18rem;
  font-weight: bold;
  line-height: 200%;
  color: #3a3a3a;
  text-align: center;
}

.m-lineup-ttl::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 2em;
  background: #ba9224;
}

.m-lineup-price {
  margin-bottom: 2em;
}

.m-lineup-price p {
  font-size: .20rem;
  font-weight: bold;
  color: #3a3a3a;
  letter-spacing: 2px;
  text-align: center;
  line-height: 140%;
}

.m-lineup-price p b {
  font-size: .35rem;
  color: #ba9224;
  letter-spacing: 1px;
  margin-left: .5em;
}

.m-lineup-fukidashi {
  background: url(../images/common/arrow-bottom01.png) no-repeat bottom center;
  padding-bottom: 1.2em;
  margin-bottom: 1.3em;
}

.m-lineup-fukidashi p {
  color: #fff;
  background: #df5189;
  padding: 1em;
  text-align: center;
  line-height: 200%;
  letter-spacing: 2px;
  font-weight: bold;
}

.m-lineup-fukidashi p b {
  font-size: .22rem;
}

.m-lineup-link p {
  text-align: center;
}

.m-lineup-link p a {
  display: inline-block;
  font-size: .20rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: #df5189;
  border: 2px solid #de4682;
  background: #fff url(../images/common/arrow-right01.png) no-repeat center right 1em;
  padding: .9em 5.3em .9em 2.3em;
}

.m-lineup-link p a.__pink, .m-lineup-link p a:hover {
  background-color: #df5189;
  background-image: url(../images/common/arrow-right02.png);
  color: #fff;
}

.m-lineup-link p a img {
  display: none;
}

@media screen and (max-width: 768px) {
  .m-lineups {
    flex-wrap: wrap;
    margin: 0;
    padding: 0 2em;
  }
  .m-lineups .m-lineup {
    width: 100%;
    padding: 0;
    margin-bottom: 4em;
  }
  .m-lineups .m-lineup:last-child {
    margin-bottom: 0;
  }
  .m-lineup-img-main figcaption {
    font-size: .35rem;
  }
  .m-lineup-img-sub {
    right: -4em;
  }
  .m-lineup-img-sub-img img {
    max-width: 70%;
  }
  .m-lineup-img-sub-diamonds {
    left: 0;
  }
  .m-lineup-img-sub-diamonds__type02 {
    width: 74vw;
    margin-left: 1.5vw;
  }
  .m-lineup-img-sub-diamonds__type02 .m-diamonds .m-diamond {
    width: calc( 73vw / 8);
    height: calc( 73vw / 8);
    margin-bottom: .3em;
  }
  .m-lineup-img-sub-diamonds__type02 .m-diamonds .m-diamond span {
    font-size: 2vw;
  }
  .m-lineup-ttl {
    margin-bottom: 1.2em;
    padding-bottom: 1.2em;
  }
  .m-lineup-ttl-heading {
    margin: 0 -1em;
    font-size: .17rem;
  }
  .m-lineup-price {
    margin: 0 -1em 2em;
  }
  .m-lineup-price p b {
    font-size: .30rem;
    margin-left: .3em;
  }
  .m-lineup-fukidashi {
    margin-bottom: .7em;
  }
  .m-lineup-fukidashi p {
    padding: .7em;
  }
  .m-lineup-link {
    margin: 0 -2em;
  }
  .m-lineup-link p a {
    display: block;
    background: none;
    padding: .8em 1em;
  }
  .m-lineup-link p a img {
    display: inline;
    width: 2.5em;
    vertical-align: middle;
  }
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
  .m-lineups .m-lineup {
    padding: 0 1.5em;
  }
  .m-lineup-ttl-heading {
    font-size: .16rem;
  }
  .m-lineup-price p b {
    font-size: .28rem;
  }
  .m-lineup-img-sub-diamonds__type02 {
    width: 42vw;
    margin-left: 0;
  }
  .m-lineup-img-sub-diamonds__type02 .m-diamonds .m-diamond {
    width: calc( 39vw / 8);
    height: calc( 39vw / 8);
    margin-bottom: .3em;
  }
  .m-lineup-img-sub-diamonds__type02 .m-diamonds .m-diamond span {
    font-size: 1vw;
  }
}

/* Ribbon
-------------------------------------------------- */
.m-ribbon {
  display: block;
  position: relative;
  line-height: 120%;
  text-align: center;
  font-size: .25rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: #FFF;
  background: url(../images/common/m-ribbon-bg01.png) no-repeat center center;
  background-size: 100% 100%;
  padding: .4em 0;
}

@media screen and (max-width: 768px) {
  .m-ribbon {
    font-size: .20rem;
  }
}

/* Title
-------------------------------------------------- */
.m-ttl {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.m-ttl-heading {
  font-size: .32rem;
  font-family: "Alegreya", serif;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ba9224;
  margin: 0 1em;
}

.m-ttl-heading img {
  max-width: 100%;
}

.m-ttl__white .m-ttl-heading {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .m-ttl-heading {
    margin: 0 .5em;
    font-size: .28rem;
  }
  .m-ttl-img {
    max-height: 3.7em;
  }
}