@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP');

/* general */
.kaiming2023 img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline;
}

@media screen and (min-width:641px) {
  a {
    transition: 0.3s ease;
  }

  a:hover {
    opacity: 0.6;
  }
}

/* base */
.kaiming2023 {
  color: #333;
  background-color: #00002a;
  font-feature-settings: "palt";
}

.kaiming2023 .container {
  margin-left: auto;
  margin-right: auto;
}

.none {
  display: none;
}

.font-bold {
  font-weight: bold;
}

@media screen and (min-width:641px) {
  .kaiming2023 {
    padding-bottom: 20rem;
    font-size: 1.6rem;
  }

  .kaiming2023 .sp {
    display: none;
  }

  .kaiming2023 .container {
    width: 110rem;
  }

  .kaiming2023 .goods-list .container {
    width: 120rem;
  }

  .flex-box {
    display: flex;
  }

  .flex-box.col-2 {
    flex-wrap: wrap;
  }

  .flex-box.col-2 > .flex-box-item {
    width: 50%;
  }
}

@media screen and (max-width:640px) {
  .kaiming2023 {
    padding-bottom: calc(230 / 750 * 100vw);
    font-size: calc(25 / 750 * 100vw);
  }

  .kaiming2023 .pc {
    display: none;
  }
}

/* intro */
.mv-wrap {
  margin-left: auto;
  margin-right: auto;
}

.mv {
  text-align: center;
  margin: 0;
}

.award-block {
  background-color: #fff;
  border: .1rem solid #ddd;
  border-radius: 1.2rem;
  padding: 2rem;
  max-width: 42rem;
  margin: 3rem auto;
  box-shadow: 0 .4rem 1rem rgba(0, 0, 0, 0.05);
  text-align: center;
}

.award-message {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 1.6rem;
  line-height: 1.5;
}

.award-images {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: nowrap;
}

img.product-img {
  width: 17rem;
  height: auto;
}

img.award-img {
  width: 13rem;
  height: auto;
  margin-bottom:3rem;
}

@media (max-width: 640px) {
  .award-block {
    padding: 1.6rem;
    max-width: 90%;
  }

  .award-message {
    font-size: 0.95em;
  }

  .award-images {
    flex-direction: row;
    gap: 1.6rem;
  }

  img.product-img {
    width: 13rem;
  }

  img.award-img {
    width: 10rem;
  }
}


.catch-area .inner {
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  text-align: center;
}

.catch-area .inner .catch {
  margin: 0 auto;
  font-family: 'Noto Serif Japanese', serif;
  letter-spacing: 0.28em;
}

.intro-box .flex-box-item {
  border: .1rem solid #fff;
  border-radius: 2rem;
  box-shadow: 0 0 2rem 0 rgba(255, 255, 255, 0.8),inset 0 0 3rem 0 rgba(240, 228, 249, 0.004);
  text-align: center;
}

.intro-box .flex-box-item.intro-item01 {
  background-color: rgb(222, 216, 227);
}

.intro-box .flex-box-item.intro-item02 {
  background-color: rgb(250, 242, 237);
}

.intro-box .flex-box-item .title {
  margin: 0 auto 2rem;
}

.intro-box .flex-box-item .text {
  text-align: left;
}

.method-detail .flex-box-item {
  text-align: center;
}

.method-detail .flex-box-item .box-title + p {
  color: #fff;
}

.method-detail .info-box {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

.method-detail .info-box .title {
  font-weight: bold;
}

.method-detail .info-box .inner {
  align-items: center;
}

.method-detail .info-box .inner .text {
  flex: 1;
  text-align: left;
}

.method-item01 .info-box .title {
  background-color: #f7eee2;
}

.method-item02 .info-box .title {
  background-color: #eee2f7;
}

.supervision-box {
  color: #fff;
}

.method-detail .img-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width:641px) {
  .catch-area .inner {
    max-width: 160rem;
    height: 56.2rem;
    background: url(../../../../img/usr/freepage/kaiming2023/bg-top2.jpg) no-repeat top center;
  }

  .catch-area .inner .catch {
    padding-top: 23rem;
    font-size: 1.9rem;
    line-height: calc(38 / 19);
  }

  .intro-2 {
    margin-top: -13rem;
  }

  .intro-box .flex-box-item {
    padding: 3rem 0 4rem;
    width: 53rem;
  }

  .intro-box .flex-box-item:nth-child(2n) {
    margin-left: auto;
  }

  .intro-box .flex-box-item.intro-item01 .graph {
    width: 39rem;
  }

  .intro-box .flex-box-item.intro-item02 .graph {
    width: 39.8rem;
  }

  .intro-box .flex-box-item .text {
    margin-top: 2rem;
    padding: 0 3.5rem;
  }

  .intro-box .flex-box-item .text .font-bold {
    font-size: 1.7rem;
  }

  .intro-box .flex-box-item .text .small {
    margin-top: 1rem;
    font-size: 1.3rem;
  }

  .method {
    margin: 6.5rem auto 0;
    padding-bottom: 9rem;
    width: 121.6rem;
    background: url(../../../../img/usr/freepage/kaiming2023/bg-method.png) no-repeat top -2rem left -2rem;
  }

  .method-detail .flex-box-item {
    display: flex;
    flex-direction: column;
    width: 56.7rem;
  }

  .method-detail .flex-box-item:nth-child(2n) {
    margin-left: 2.5rem;
  }

  .method-detail .flex-box-item .box-title {
    margin: 0 auto 2rem;
    padding-top: 2rem;
    height: 8.9rem;
  }

  .method-detail .flex-box-item.method-item01 .box-title {
    width: 26.9rem;
  }

  .method-detail .flex-box-item.method-item02 .box-title {
    width: 27rem;
  }

  .method-detail .flex-box-item .box-title + p {
    margin: auto;
  }

  .method-detail .img-wrap {
    height: 22.2rem;
  }

  .method-item01 .img-wrap img {
    margin: 0 -.7rem;
    width: 17.4rem;
  }

  .method-item02 .img-wrap img {
    width: 36.4rem;
  }

  .method-detail .info-box .title {
    padding: 1rem;
    font-size: 2rem;
  }

  .method-detail .info-box .inner {
    padding: 2rem;
  }

  .method-detail .info-box .inner .image {
    width: 16rem;
  }

  .method-item01 .info-box .img-wrap img {
    width: 17.4rem;
  }

  .method-supervision {
    margin: 6rem auto 0;
    width: 103.8rem;
    height: 26.9rem;
    background: url(../../../../img/usr/freepage/kaiming2023/ttl-method.png) no-repeat;
  }

  .method-supervision .title {
    margin: 0;
  }

  .supervision-box {
    padding: 8rem 4rem 0;
  }

  .supervision-box .flex-box-item {
    display: flex;
    align-items: center;
  }

  .supervision-box .image {
    padding-left: 1.5rem;
    width: 13rem;
  }

  .supervision-box .text {
    flex: 1;
    padding: 0 2.5rem;
  }
}

@media screen and (max-width:640px) {
  .catch-area .inner .catch {
    margin: 5.33333333333vw auto 10.6666666667vw;
    font-size: calc(28 / 750 * 100vw);
    line-height: calc(52 / 28);
  }

  .intro-2 .container {
    width: calc(640 / 750 * 100vw);
  }

  .intro-box .flex-box-item {
    margin-bottom: calc(60 / 750 * 100vw);
    padding: calc(36 / 750 * 100vw) calc(30 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
  }

  .intro-box .flex-box-item.intro-item02 .small {
    margin-top: calc(20 / 750 * 100vw);
    display: flex;
  }

  .intro-box .flex-box-item.intro-item02 .small span {
    font-size: calc(19 / 750 * 100vw);
    letter-spacing: 0;
  }

  .intro-box .flex-box-item.intro-item02 .small span:last-child {
    margin-left: calc(20 / 750 * 100vw);
  }

  .method-detail > .flex-box-item {
    margin: 0 auto calc(30 / 750 * 100vw);
    width: calc(700 / 750 * 100vw);
  }

  .method-detail .flex-box-item .box-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(38 / 750 * 100vw);
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-method.png) no-repeat top center;
    background-size: cover;
    aspect-ratio: 713 / 292;
  }

  .method-detail .flex-box-item .box-title img {
    margin-top: calc(-80 / 750 * 100vw);
    width: calc(361 / 750 * 100vw);
  }

  .method-detail .flex-box-item .box-title + p {
    margin-top: calc(-120 / 750 * 100vw);
    font-size: calc(25 / 750 * 100vw);;
    letter-spacing: 0.05em;
    line-height: calc(44 / 25);
  }

  .method-detail .method-item01 .img-wrap {
    margin: calc(40 / 750 * 100vw) auto;
  }

  .method-detail .method-item02 .img-wrap {
    margin: 0 auto calc(40 / 750 * 100vw);
  }

  .method-detail .method-item01 .img-wrap img {
    margin: 0 calc(-10 / 750 * 100vw);
    width: calc(243 / 750 * 100vw);
  }

  .method-detail .info-box .inner {
    display: flex;
    padding: calc(30 / 750 * 100vw);
  }

  .method-detail .info-box .title {
    padding: calc(15 / 750 * 100vw);
    font-size: calc(28 / 750 * 100vw);
  }

  .method-detail .info-box .inner .image {
    margin-right: calc(20 / 750 * 100vw);
    width: calc(208 / 750 * 100vw);
  }

  .method-detail .info-box .inner .text p {
    font-size: calc(22 / 750 * 100vw);
    line-height: calc(38 / 22);
  }

  .method-supervision {
    margin: calc(60 / 750 * 100vw) auto;
    width: calc(736 / 750 * 100vw);
  }

  .supervision-box {
    display: flex;
    justify-content: center;
    background: url(../../../../img/usr/freepage/kaiming2023/sp/ttl-method_02.png) no-repeat top center;
    background-size: cover;
    aspect-ratio: 736 / 550;
  }

  .supervision-box .flex-box-item {
    padding-left: calc(10 / 750 * 100vw);
    width: calc(333 / 750 * 100vw);
    box-sizing: border-box;
  }

  .supervision-box .flex-box-item:nth-child(2n) {
    margin-left: calc(40 / 750 * 100vw);
  }

  .supervision-box .flex-box-item .image {
    margin-bottom: calc(30 / 750 * 100vw);
    padding-top: calc(30 / 750 * 100vw);
    text-align: center;
  }

  .supervision-box .flex-box-item .image img {
    width: calc(230 / 750 * 100vw);
  }

  .supervision-box .flex-box-item .text {
    font-size: calc(25 / 750 * 100vw);
    line-height: calc(40 / 25);
  }
}

/* questionnaire */
.questionnaire {
  position: relative;
  background-color: #f2f0fc;
}

.questionnaire-group {
  background-color: #fff;
  border-radius: 2rem;
}

.questionnaire-group .title-wrap {
  display: flex;
  align-items: center;
  color: #271e58;
}

.questionnaire-group .title-wrap .num {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50vh;
  background-color: #cea9d9;
}

.questionnaire-group .group-item + .small {
  padding: 1rem;
  border: .1rem solid #bcbcbc;
  text-align: center;
  border-radius: .8rem;
  color: #666;
}

.questionnaire-group .title-wrap {
  border-bottom: .4rem dotted #271e58;
  font-weight: 500;
}

@media screen and (min-width:641px) {
  .questionnaire {
    padding: 10rem 0;
  }

  .questionnaire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 94rem;
    height: 126.5rem;
    background: url(../../../../img/usr/freepage/kaiming2023/bg-section01.png) no-repeat;
    z-index: 0;
  }

  .questionnaire .container {
    position: relative;
    z-index: 1;
  }

  .questionnaire-group {
    margin-top: 4rem;
    padding: 3rem 8rem 5rem;
  }

  .questionnaire-group .title-wrap {
    margin-bottom: 3rem;
    padding: 0 0 2rem 7rem;
    font-size: 2.8rem;
  }

  .questionnaire-group .title-wrap .num {
    margin-right: 2rem;
    width: 6.6rem;
    height: 6.6rem;
  }

  .questionnaire-group .title-wrap .num img {
    width: 3.2rem;
  }

  .questionnaire-group .flex-box-item:not(:last-child) {
    margin-bottom: 3rem;
  }

  .questionnaire-group .flex-box-item:nth-child(2n) {
    margin-left: auto;
  }
}

@media screen and (max-width:640px) {
  .questionnaire {
    padding: calc(50 / 750 * 100vw) 0 calc(100 / 750 * 100vw);
  }

  .questionnaire .title {
    margin-bottom: calc(30 / 750 * 100vw);
  }

  .questionnaire-group {
    position: relative;
    margin: calc(-148 / 750 * 100vw) auto 0;
    padding-bottom: calc(60 / 750 * 100vw);
    width: calc(640 / 750 * 100vw);
    z-index: 10;
  }

  .questionnaire-group .group-item {
    padding: calc(30 / 750 * 100vw);
  }

  .questionnaire-group .title-wrap {
    margin-bottom: calc(20 / 750 * 100vw);
    padding: 0 calc(5 / 750 * 100vw) calc(10 / 750 * 100vw);
  }

  .questionnaire-group .title-wrap p {
    font-size: calc(28 / 750 * 100vw);
  }

  .questionnaire-group .title-wrap .num {
    margin-right: calc(25 / 750 * 100vw);
    height: calc(78 / 750 * 100vw);
    width: calc(78 / 750 * 100vw);
  }

  .questionnaire-group .title-wrap .num img {
    width: calc(44 / 750 * 100vw);
  }

  .questionnaire-group .title-wrap .num + p {
    flex: 1;
  }

  .questionnaire-group dd .flex-box-item:not(:first-child) {
    margin-top: calc(20 / 750 * 100vw);
  }

  .questionnaire-group .group-item + .small {
    margin: 0 auto;
    width: calc(560 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
    text-align: left;
  }
}

/* goods-list */
.goods-list {
  color: #666;
  background-color: #faf8e6;
}

.goods-item-02 {
  background-color: #faf8e6;
}

.goods-item-03 {
  background-color: #edfaf6;
}

.goods-item-04 {
  background-color: #fcf7f7;
}

.goods-item-05 {
  background-color: #f0f9fc;
}

.goods-item {
  position: relative;
}

.goods-item::after {
  content: '';
  position: absolute;
  z-index: 10;
}

.goods-list .title-wrap.intro .main-title {
  color: #fff;
  background-color: #4a4aa8;
  /* background-color: #76673e; */
  font-weight: 600;
  text-align: center;
}

.goods-list .title-wrap.intro .main-title .em {
  color: #f9f29b;
}

.goods-item-title {
  text-align: center;
}

.goods-item-01 .goods-item-title,
.goods-item-01 .goods-name {
  color: #4f379a;
  background-color: #dbd0e4;
}

.goods-item-02 .goods-item-title,
.goods-item-02 .goods-name {
  color: #998656;
  background-color: #f7ebb2;
}

.goods-item-03 .goods-item-title,
.goods-item-03 .goods-name {
  color: #52afa4;
  background-color: #d1ebe7;
}

.goods-item-04 .goods-item-title,
.goods-item-04 .goods-name {
  color: #e88b83;
  background-color: #fcdedc;
}

.goods-item-05 .goods-item-title,
.goods-item-05 .goods-name {
  color: #568dcd;
  background-color: #cee0f5;
}

.goods-explanation {
  align-items: center;
  background-color: #fff;
  border-radius: 1.2rem;
  line-height: calc(34 / 19);
}

.goods-explanation.shadow {
  box-shadow: 0 .5rem .8rem 0 rgba(146, 128, 73, 0.1);
}

.goods-detail .goods-image {
  margin-right: auto;
}

.goods-image.image-with-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  max-height: 22.3rem; /* デスクトップでは商品画像と高さ合わせ */
}

.goods-image.award-badge {
  width: 6rem;
  height: auto;
}

.goods-image.main-image {
  width: 100%;
  height: auto;
  max-width: 18.8rem;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .goods-image.image-with-badge {
    max-height: none;
  }

  .goods-image.award-badge {
    width: 4rem; /* スマホで少し小さく */
  }

  .goods-image.main-image {
    max-width: 14rem; /* スマホで少し縮小 */
  }
}

.goods-name {
  text-align: center;
  border-radius: 50vh;
  font-weight: 700;
}

.goods-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  color: #00002a;
}

.goods-voice {
  position: relative;
  background-color: #fff;
  box-shadow: 0 .5rem .5rem 0 rgba(0, 0, 0, 0.05);
  border-radius: 1.5rem;
}

.goods-voice::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 .8rem 1.6rem .8rem;
  border-color: transparent transparent #fff transparent;
}

.goods-voice p {
  display: flex;
  align-items: center;
  font-weight: 700;
}

.goods-voice p::before {
  content: '';
}

.goods-voice p span {
  margin: 0 auto;
}

.goods-item-02 .goods-detail .detail-title {
  text-align: center;
}

.goods-item-02 .goods-explanation .title {
  color: #b39a59;
  font-weight: 600;
}

.goods-item-02 .goods-detail .left + .goods .goods-name {
  color: #f18383;
  background-color: #fae2e1;
}

.goods-item-03 .intro .goods-explanation .title {
  color: #52afa4;
  font-weight: 600;
}

.goods-price .comingsoon {
  display: block;
  font-size: 1.2rem;
  color: #d02a51;
  line-height: 1.2;
}

@media screen and (min-width:641px) {
  .goods-list {
    padding: 7rem 0 0;
  }

  .goods-item {
    padding: 12rem 0 5rem;
  }

  .goods-item::after {
    height: 10.9rem;
    width: 100%;
  }

  .goods-item-02 {
    padding-top: 0;
  }

  .goods-item-01::after {
    background: url(../../../../img/usr/freepage/kaiming2023/bg-wave_purple.png) repeat-x;
  }

  .goods-item-02::after {
    background: url(../../../../img/usr/freepage/kaiming2023/bg-wave_yellow.png) repeat-x;
  }

  .goods-item-03::after {
    background: url(../../../../img/usr/freepage/kaiming2023/bg-wave_green.png) repeat-x;
  }

  .goods-item-04::after {
    background: url(../../../../img/usr/freepage/kaiming2023/bg-wave_pink.png) repeat-x;
  }

  .goods-item-05::after {
    background: url(../../../../img/usr/freepage/kaiming2023/bg-wave_blue.png) repeat-x #00002a;
  }

  .goods-list .title-wrap.intro {
    margin: 0 auto 2.5rem;
    width: 120rem;
  }

  .goods-list .title-wrap.intro .main-title {
    padding: 2rem;
    font-size: 3.4rem;
    border-radius: 1rem;
  }

  .goods-item-title {
    margin-bottom: 3rem;
    padding: 1.5rem;
    font-size: 2.5rem;
    font-weight: 600;
    border-radius: .4rem;
  }

  .goods-item-01 .goods-explanation {
    margin: 0 auto 4rem;
    width: 66rem;
  }

  .goods-item-01 .goods-explanation .image {
    width: 20rem;
  }

  .goods-item-01 .goods-explanation .text p {
    letter-spacing: 0;
    line-height: calc(30 / 16);
  }

  .goods-item-01 .goods-detail {
    flex-direction: row-reverse;
  }

  .goods-item-01 .goods-detail .image {
    margin-left: 2.8rem;
    width: 46.5rem;
  }

  .goods-item .goods-detail .goods {
    flex: 1;
  }

  .goods-item-01 .detail-title {
    margin-bottom: 3.5rem;
    text-align: center;
  }

  .goods-item-01 .detail-title img {
    width: 66.2rem;
  }

  .goods-item-01 .flex-box-item.goods-image img {
    width: 18.9rem;
  }

  .goods-item .goods-text.middle {
    width: 37.2rem;
  }

  .goods-item .goods-text.middle .goods-name {
    font-size: 1.7rem;
  }

  .goods-item .goods-text.large {
    margin-left: 3rem;
    width: 48.2rem;
  }

  .goods-box-item:not(:first-child) {
    margin-top: 3.5rem;
  }

  .goods-name {
    margin-bottom: 1rem;
    padding: .5rem;
    font-size: 1.8rem;
  }

  .goods-desc {
    margin-bottom: 2rem;
    font-size: 1.5rem;
    line-height: calc(26 / 15);
  }

  .goods-price {
    font-size: 3.2rem;
    font-weight: 500;
  }

  .goods-price .small {
    font-size: 1.6rem;
  }

  .goods-voice {
    margin-top: 2.5rem;
    padding: .7rem 2rem;
  }

  .goods-voice p {
    font-size: 1.3rem;
  }

  .goods-voice p::before {
    width: 4.6rem;
    height: 4.6rem;
    background: url(../../../../img/usr/freepage/kaiming2023/icon-voice.png) no-repeat;
  }

  .goods-voice + .small {
    margin-top: 1rem;
    font-size: 1.2rem;
    text-align: right;
  }

  .goods-item-02 .intro {
    margin-bottom: 4.5rem;
    align-items: center;
  }

  .goods-item-02 .intro > .flex-box-item:nth-child(1) {
    padding-left: 1rem;
  }

  .goods-item-02 .intro > .flex-box-item:nth-child(1) p {
    color: #5f5435;
    font-size: 1.8rem;
    line-height: calc(34 / 18);
  }

  .goods-item-02 .intro .flex-box-item:nth-child(2n) {
    margin-left: auto;
  }

  .goods-item-02 .intro .goods-explanation .image {
    width: 20rem;
  }

  .goods-item-02 .goods-detail > .image {
    margin-right: calc(100% - 46.5rem - 70.6rem);
    width: 46.5rem;
  }

  .goods-item-02 .goods-detail > .goods {
    width: 70.6rem;
  }

  .goods-item-02 .goods-detail .detail-title {
    margin-bottom: 3rem;
  }

  .goods-item-02 .goods-detail .detail-title img {
    width: 65.5rem;
  }

  .goods-item-02 .goods-detail .goods-explanation {
    padding: 3rem;
  }

  .goods-item-02 .goods-detail .goods-explanation .image img {
    width: 11.8rem;
    height: 10.7rem;
  }

  .goods-item-02 .goods-explanation .text {
    flex: 1;
    margin-left: 3rem;
  }

  .goods-item-02 .goods-explanation .title {
    margin-bottom: .5rem;
    font-size: 2.2rem;
  }

  .goods-item-02 .goods-detail + .goods-detail {
    position: relative;
    margin-top: 6rem;
    padding-top: 6rem;
    border-top: .1rem solid #fff;
  }

  .goods-item-02 .goods-detail + .goods-detail::before {
    content: '';
    position: absolute;
    top: -.7rem;
    left: 0;
    right: 0;
    width: 100%;
    height: .1rem;
    background-color: #fff;
  }

  .goods-item-02 .goods-detail .left {
    margin-right: calc(100% - 58.3rem - 58.7rem);
    width: 58.3rem;
  }

  .goods-item-02 .goods-detail .left + .goods {
    width: 58.7rem;
  }

  .goods-item-02 .goods-detail .left .detail-title img {
    width: 52.2rem;
  }

  .goods-item-02 .goods-detail .left .goods-explanation {
    padding: 2rem;
  }

  .goods-text.middle .goods-info {
    align-items: flex-end;
    flex-direction: column;
  }

  .goods-item-03 .title-box {
    margin-bottom: 4.5rem;
    align-items: center;
  }

  .goods-item-03 .intro {
    margin-bottom: 6rem;
  }

  .goods-item-03 .intro .flex-box-item:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
  }

  .goods-item-03 .intro .goods-explanation {
    padding: 2rem;
  }

  .goods-item-03 .intro .goods-explanation .image img {
    width: 11.1rem;
  }

  .goods-item-03 .intro .goods-explanation .text {
    flex: 1;
    margin-left: 2.5rem;
    font-size: 1.5rem;
  }

  .goods-item-03 .intro .goods-explanation .title {
    font-size: 2.2rem;
    line-height: calc(34 / 22);
  }

  .flex-box.col-2 .goods-box-item {
    flex-wrap: wrap;
    margin-top: 0;
    width: 58rem;
  }

  .flex-box.col-2 .goods-box-item:nth-child(2n) {
    margin-left: auto;
  }

  .flex-box.col-2 .goods-box-item:not(:nth-child(-n + 2)) {
    margin-top: 4.5rem;
  }

  .flex-box.col-2 .goods-box-item .goods-image {
    text-align: center;
    width: 20rem;
  }

  .flex-box.col-2 .goods-box-item .goods-image img {
    max-height: 19.3rem;
    max-width: 16.4rem;
  }

  .flex-box.col-2 .goods-box-item .goods-text {
    margin-left: auto;
    width: 36.3rem;
  }

  .flex-box.col-2 .goods-box-item .wrap {
    margin: 0 auto;
    width: 48.2rem;
  }

  .goods-item .intro-text {
    margin-bottom: 4rem;
    text-align: center;
    font-size: 1.9rem;
  }

  .goods-item-04 .container {
    position: relative;
    padding-bottom: 20rem;
  }

  .goods-item-04 .container::after {
    content: '';
    position: absolute;
    bottom: -27rem;
    left: 50%;
    width: 76.2rem;
    height: 39.7rem;
    background: url(../../../../img/usr/freepage/kaiming2023/img-photo_04.png) no-repeat;
    transform: translateX(-50%);
    z-index: 20;
  }

  /* .goods-item-05 {
    padding-top: 28rem;
  } */

  .goods-item-05 .detail-title {
    margin-bottom: 3rem;
    text-align: center;
  }
}

@media screen and (max-width:640px) {
  .goods-item-01::after {
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-wave_purple.png) no-repeat;
  }

  .goods-item-02::after {
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-wave_yellow.png) no-repeat;
  }

  .goods-item-03::after {
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-wave_green.png) no-repeat;
  }

  .goods-item-04::after {
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-wave_pink.png) no-repeat;
  }

  .goods-item-05::after {
    background: url(../../../../img/usr/freepage/kaiming2023/sp/bg-wave_blue.png) no-repeat #00002a;
  }

  .goods-item::after {
    aspect-ratio: 750 / 63;
    width: 100%;
    background-size: cover;
  }

  .goods-list .title-wrap.intro .main-title {
    padding: calc(35 / 750 * 100vw) 0;
    font-size: calc(36 / 750 * 100vw);
  }

  .goods-list .title-wrap.intro .main-title .em {
    font-size: calc(36 / 750 * 100vw);
  }

  .intro-box .flex-box-item .text .font-bold {
    font-size: calc(25 / 750 * 100vw);
  }

  .intro-box .flex-box-item .text .small {
    margin-top: calc(10 / 750 * 100vw);
    font-size: calc(19 / 750 * 100vw);
  }

  .goods-item .container {
    padding: calc(120 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
    width: calc(700 / 750 * 100vw);
  }

  .goods-item-02 .container {
    padding-top: calc(50 / 750 * 100vw);
  }

  .goods-item-title {
    margin-bottom: calc(30 / 750 * 100vw);
    padding: calc(10 / 750 * 100vw);
    border-radius: calc(20 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
  }

  .goods-item-01 .goods-explanation,
  .goods-item-02 .intro .goods-explanation {
    display: flex;
    background-color: transparent;
  }

  .goods-item-01 .goods-explanation .image,
  .goods-item-02 .intro .goods-explanation .image {
    width: calc(250 / 750 * 100vw);
  }

  .goods-item-01 .goods-explanation .text,
  .goods-item-02 .intro .goods-explanation .text {
    margin-left: auto;
    width: calc(440 / 750 * 100vw);
    font-size: calc(25 / 750 * 100vw);
    line-height: calc(40 / 25);
  }

  .goods-item-01 .goods-explanation .text p,
  .goods-item-02 .intro .goods-explanation .text p {
    font-size: calc(25 / 750 * 100vw);
  }

  .goods-item-01 .goods-detail .detail-title,
  .goods-item-02 .intro .goods-detail .detail-title {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }

  .goods-item-01 .goods-detail .image,
  .goods-item-02 .intro .goods-detail .image {
    margin: 0 auto calc(50 / 750 * 100vw);
    width: calc(586 / 750 * 100vw);
  }

  .goods-box-item {
    display: flex;
    flex-wrap: wrap;
  }

  .goods-box-item:not(:first-child) {
    margin-top: calc(45 / 750 * 100vw);
  }

  .goods-box-item .goods-image {
    margin-right: auto;
    width: calc(200 / 750 * 100vw);
    text-align: center;
  }

  .goods-box-item .goods-image img {
    max-height: calc(240 / 750 * 100vw);
  }

  .goods-box-item .goods-text {
    width: calc(460 / 750 * 100vw);
  }

  .goods-name {
    margin-bottom: calc(20 / 750 * 100vw);
    padding: calc(15 / 750 * 100vw);
    font-size: calc(25 / 750 * 100vw);
    letter-spacing: 0;
  }

  .middle .goods-name {
    font-size: calc(22 / 750 * 100vw);
  }

  .goods-info {
    margin-top: calc(20 / 750 * 100vw);
  }

  .goods-info a img {
    width: calc(223 / 750 * 100vw);
  }

  .goods-price {
    font-size: calc(36 / 750 * 100vw);
    font-weight: 600;
  }

  .goods-price .small {
    font-size: calc(23 / 750 * 100vw);
  }

  .goods-box-item .wrap {
    margin : calc(40 / 750 * 100vw) auto;
  }

  .goods-voice {
    padding: calc(15 / 750 * 100vw) calc(15 / 750 * 100vw) calc(10 / 750 * 100vw);
    width: calc(640 / 750 * 100vw);
    border-radius: 50vh;
  }

  .goods-voice p::before {
    width: calc(100 / 750 * 100vw);
    height: calc(97 / 750 * 100vw);
    background: url(../../../../img/usr/freepage/kaiming2023/sp/icon-voice.png) no-repeat;
    background-size: cover;
  }

  .goods-voice p span {
    font-size: calc(23 / 750 * 100vw);
  }

  .goods-voice + .small {
    margin-top: calc(10 / 750 * 100vw);
    font-size: calc(18 / 750 * 100vw);
    text-align: center;
  }

  .goods-item-02 .goods-explanation + img.sp {
    display: block;
    margin: 0 auto calc(60 / 750 * 100vw);
    width: calc(594 / 750 * 100vw);
  }

  .flex-box:not(.intro) .goods-explanation,
  .goods-item-03 .goods-explanation {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: calc(50 / 750 * 100vw);
    padding: calc(30 / 750 * 100vw);
  }

  .flex-box:not(.intro) .goods-explanation .image,
  .goods-item-03 .goods-explanation .image {
    margin-right: calc(20 / 750 * 100vw);
    width: calc(130 / 750 * 100vw);
  }

  .flex-box:not(.intro) .goods-explanation .text,
  .goods-item-03 .goods-explanation .text {
    flex: 1;
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(32 /20);
  }

  .flex-box:not(.intro) .goods-explanation .title,
  .goods-item-03 .goods-explanation .title {
    margin-bottom: calc(20 / 750 * 100vw);
    font-size: calc(26 / 750 * 100vw);
    width: 100%;
    text-align: center;
    letter-spacing: 0;
  }

  .goods-item-02 .goods-detail + .goods-detail {
    position: relative;
    margin-top: calc(80 / 750 * 100vw);
    border-top: .1rem solid #fff;
  }

  .goods-item-02 .goods-detail + .goods-detail::before {
    content: '';
    position: absolute;
    top: -.7rem;
    left: 0;
    right: 0;
    width: 100%;
    height: .1rem;
    background-color: #fff;
  }

  .goods-item-03 .title-box {
    display: flex;
    flex-direction: column-reverse;
  }

  .goods-item-03 .title-box .flex-box-item:first-child {
    margin: calc(50 / 750 * 100vw) auto;
    width: calc(580 / 750 * 100vw);
  }

  .goods-item-03 .title-box .flex-box-item:nth-child(2) {
    margin: calc(40 / 750 * 100vw) auto 0;
  }

  .goods-item-03 .intro {
    margin: 0 auto calc(60 / 750 * 100vw);
    width: calc(640 / 750 * 100vw);
  }

  .goods-item-03 .intro .flex-box-item:first-child {
    margin-bottom: calc(50 / 750 * 100vw);
  }

  .goods-item-03 .intro .flex-box-item:first-child p {
    font-size: calc(25 / 750 * 100vw);
  }

  .intro-text {
    margin: 0 auto;
    width: calc(640 / 750 * 100vw);
  }

  .goods-item-04 .container {
    position: relative;
    padding-bottom: calc((387 + 70) / 2 / 750 * 100vw);
  }

  .goods-item-04 .container::after {
    content: '';
    position: absolute;
    bottom: calc((-387 - 63) / 2 / 750 * 100vw);
    left: 50%;
    width: calc(580 / 750 * 100vw);
    height: calc(387 / 750 * 100vw);
    background: url(../../../../img/usr/freepage/kaiming2023/img-photo_03.png) no-repeat;
    background-size: cover;
    transform: translateX(-50%);
    z-index: 20;
  }

  .goods-item-05 {
    /* padding-top: calc((387 + 70) / 2 / 750 * 100vw); */
    background-color: #e6f0fa;
  }

  .goods-item-03 .goods-name,
  .goods-item-05 .goods-name {
    font-size: calc(22 / 750 * 100vw);
  }
}

.badge-image {
    position: absolute;
    top: -1rem;
    left: -1rem;
    width: 12rem !important;
    height: auto;
}

@media (max-width: 640px) {
    .badge-image {
        top: -.5rem;
        left: -.5rem;
        width: 7rem!important;
    }
}

.main-goods-image{
  margin-top: 10rem;
}

@media (max-width: 640px) {
    .main-goods-image {
        margin-top:6rem;
    }
}