@charset "utf-8";
/* volks 50th anniversary project _ contents PJ09 css - update: 2022.09.12-01 */

.cont-title_pj {
  font-size: calc(var(--rs) * 4);
}
.cont-title-read {
  padding: 0 calc(var(--rs) * 1);
}
.cont-read > b {
  font-size: calc(var(--fs) * 2);
}
/*-------------------------------
 pj09 image
---------------------------------*/
.pj09-img-220912 {
  max-width: calc(var(--rs) * 96);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.pj09-img-220912 img:nth-child(1) {
  width: min(100%, calc(var(--rs) * 40));
  flex: 1 1 67.5%;
}
.pj09-img-220912 img:nth-child(2) {
  width: min(100%, calc(var(--rs) * 24));
  max-width: calc(var(--rs) * 64);
  flex: 1 1 32.5%;
}
/*-------------------------------
 pj09 contents
---------------------------------*/
.pj09-cont {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.pj09-cont_text-block {
  width: min(100%, 32rem);
  margin-bottom: calc(var(--rs) * 4);
  flex: 1 1 auto;
}
.pj09-cont_img-block {
  width: min(100%, 34rem);
  padding-bottom: calc(var(--fs) * 2);
  flex: 1 1 auto;
  text-align: center;
}
.pj09-cont_img-block > figcaption > a {
  padding: 0.2em 1em;
  margin: 0 auto;
  background: #966f1e;
  color: #fff;
  display: inline-block;
}
/*-------------------------------
 pj09 main
---------------------------------*/
.pj09-main {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
}
.pj09-main_img {
  width: min(100%, 52rem);
  margin-top: calc(var(--rs) * -4);
  flex: 1 1 auto;
}
.pj09-main_text {
  width: min(100%, 26rem);
  padding: 0 calc(var(--rs) * 2);
  flex: 1 1 45%;
}
/* honey baer official link */
.pj09-link-honeybaer {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.pj09-link-honeybaer img {
  width: 20%;
  margin: 0 calc(var(--fs) * 1);
}
.pj09-link-honeybaer a {
  padding: 0.2rem 1em;
  margin: 0 auto;
  background: #966f1e;
  color: #fff;
  font-size: calc(var(--rs) * 1.4);
  display: inline-block;
}
/*-------------------------------
 pj09 honeybear
---------------------------------*/
.pj09-title-honeybear {
  padding: 0 calc(var(--rs) * 2) 1px 0;
  margin-top: calc(var(--rs) * 4);
  background: linear-gradient(90deg, #8d000f 0%, #b1091c 30%, #c30d23 40%, #c30d23 35%, #b1091c 50%, #8d000f 100%);
  color: #fff;
  font-size: calc(var(--rs) * 2.8);
  line-height: 1.2;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.pj09-title-honeybear img {
  width: min(30%, 18rem);
  margin: -3rem 1rem 0 calc(var(--rs) * 1);  
}
.pj09-title-honeybear span {
  padding: 0.5em 0;
  display: inline-block;
  align-self: center;
}
.pj09-title-honeybear b {
  font-size: 125%;
}
/* honeybear lineup */
.sks-honeybear {
  width: 100%;
  padding: 2%;
  background: #fff;
  margin: calc(var(--rs) * 1) auto;
  display: flex;
  flex-flow: row wrap;
  gap: calc(var(--fs) * 1);
}
.sks-honeybear::before,
.sks-honeybear::after {
  content: "";
  height: 0;
  order: 2;
}
.sks-honeybear::before,
.sks-honeybear::after,
.sks-honeybear_item {
  width: min(100%, calc(var(--fs) * 36));
  flex: 1 1 auto;
}
/* goods image */
.sks-honeybear-img {
  margin: 0 calc(var(--rs) * 0.5);
  border: calc(var(--rs) * 0.5) solid #fff;
  border-radius: calc(var(--rs) * 1);
  overflow: hidden;
}
/* goods spec */
.sks-honeybear-spec {
  width: 100%;
  border-collapse: separate;
  border-spacing: calc(var(--rs) * 1);
}
.sks-honeybear-spec_name {
  padding: calc(var(--rs) * 1);
  padding-bottom: 0;
  font-size: calc(var(--fs) * 1.7);
  font-weight: bold;
  line-height: 1.3;
}
.sks-honeybear-spec th,
.sks-honeybear-spec td {
  font-size: calc(var(--fs) * 1.4);
  vertical-align: middle;
}
.sks-honeybear-spec th {
  width: min(10%, calc(var(--fs) * 4));
  padding: calc(var(--rs) * 0.5) 0.8em;
  background: #555;
  border-radius: calc(var(--rs) * 0.5);
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.sks-honeybear-spec td {
  width: 80%;
  padding: calc(var(--rs) * 0.5) 0.5em;
  font-weight: normal;
}
.price-tax {
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
}
.price-hontai {
  display: none;
}
.sks-honeybear-spec_datalist > li ~ li {
  margin-top: 0.5em;
}
/*-------------------------------
 pj09 honeybear point
---------------------------------*/
/* secret */
.pj09-secret {
  width: min(92%, 67rem);
  padding: calc(var(--rs) * 2.56);
  margin: 0 auto;
  background-color: #f3fbfe;
  background-image: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 97%, #e6e5d9 100%);
  background-size: 100% 2em;
  box-shadow: 0 calc(var(--rs) * 0.5) calc(var(--rs) * 1) rgb(50 50 50 / 20%);
  font-family: "wf-tegaki";
  font-size: calc(var(--fs) * 2);
  line-height: 2;
  position: relative;
}
.pj09-secret figure {
  text-align: center;
}
.pj09-secret-title {
  padding: calc(var(--rs) * 0.4) calc(var(--rs) * 2) calc(var(--rs) * 0.4) calc(var(--rs) * 1);
  margin-left: calc(var(--rs) * -1);
  background: var(--c-mc);
  color: #fff;
  font-size: calc(var(--fs) * 2.6);
  line-height: 1.2;
  display: inline-block;
}
.pj09-secret-img03 {
  margin: calc(var(--rs) * 2) auto 0;
  text-align: center;
}
.pj09-secret-text {
  margin-bottom: 1.5em;
  font-weight: bold;
}
.pj09-secret-text b {
  margin-top: calc(var(--rs) * 1);
  color: var(--c-l-pc-red);
  font-size: calc(var(--fs) * 3);
  display: inline-block;
  position: relative;
  left: -0.3em;
}
/* point */
.pj09-point {
  padding: calc(var(--fs) * 3);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  flex: 1 1 auto;
}
.pj09-point_block {
  max-width: 32rem;
}
.pj09-point01 {
  position: relative;
  z-index: 1;
}
.pj09-point02 {
padding-left: calc(var(--fs) * 1);
margin-top: calc(var(--fs) * -4);
position: relative;
right: calc(var(--fs) * -3);
}
.pj09-point03 {
  margin-top: calc(var(--fs) * -2);
  margin-right: -16%;
  position: relative;
  left: -8%;
  z-index: 1;
}
.pj09-point04 {
  margin-top: calc(var(--fs) * -8);
  position: relative;
  right: calc(var(--fs) * 2);
}
@media screen and (min-width: 540px) {
.pj09-secret-text {
  max-width: 46rem;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  font-weight: bold;
}
  .pj09-secret-img01,
  .pj09-secret-img02 {
    margin: calc(var(--rs) * -3) calc(var(--rs) * -3) calc(var(--rs) * 2) calc(var(--rs) * 4);
    float: right;
  }
}
@media screen and (min-width: 950px) {
  .pj09-point-wrap {
    margin-top: calc(var(--rs) * 4);;
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: flex-start;;
  }
  .pj09-secret-wrap {
    width: min(100%, 60rem);
    padding-left: calc(var(--rs) * 1);
    overflow: hidden;
  }
  .pj09-secret {
    width: 100%;
    margin: 0 calc(var(--rs) * -1.8) calc(var(--rs) * 3) auto;
    transform: rotate(-2deg);
  }
  .pj09-secret-img02 {
    border-radius: 100%;
    shape-outside: circle();
  }
  .pj09-point {
    width: min(86%, 28rem);
  }
}
/*-------------------------------
 pj09 comment
---------------------------------*/
.pj09-comment {
  width: 94%;
  margin: calc(var(--rs) * 4) auto;

}
.pj09-comment p {
  margin-top: 0.5em;
  font-size: calc(var(--fs) * 2.2);
  font-weight: bold;
}
.pj09-comment p:nth-child(2) {
  color: var(--c-mc);
}
.pj09-comment p:nth-child(2) b {
  font-size: 125%;
}
.pj09-comment-sign {
  width: min(20%, 15rem);
  margin-left: 1em;
  float: right;
}
/*-------------------------------
 pj09 shcedule
---------------------------------*/
.pj09-schedule-wrap {
  width: 98%;
  padding: calc(var(--fs) * 1) 0;
  margin: calc(var(--rs) * 2) auto;
  border-radius: var(--border-r);
  font-weight: bold;
  position: relative;
}
.pj09-schedule-head {
  width: 96%;
  padding: 0 0.5em;
  margin: 0 auto;
  color: var(--c-l-pc-red);
  font-size: calc(var(--fs) * 1.8);
}
.pj09-schedule {
  width: 96%;
  padding: calc(var(--fs) * 1);
  padding-left: calc(var(--fs) * 3);
  margin: calc(var(--fs) * 1) auto;
  background: rgb(255 255 255 / 80%);
  border: 1px solid #ebe6e0;
  font-weight: bold;
}
.pj09-schedule_title {
  font-size: calc(var(--fs) * 1.8);
}
.pj09-schedule_title::before {
  content: "";
  width: 0.5em;
  height: 1.2em;
  background: #555;
  margin-right: 0.5em;
  margin-left: -1em;
  margin-bottom: -0.2em;
  display: inline-block;
  position: relative;
}
.pj09-schedule_text {
  margin-top: 0.3em;
  line-height: 1.4;
}
.pj09-schedule_text + .pj09-schedule_text  {
  margin-top: 0.6em;
}
.pj09-schedule_text > span {
  margin-right: 0.5em;
  display: inline-block;
}
/* shcedule end */
.pj09-schedule-end {
  padding: 0.5em;
  margin-top: 1em;
  background: #ccc;
  color: #777;
  filter: brightness(0.6);
}