@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap");
/* kv 
================================================== */
.kv {
  padding: 30px 0 0 0;
}
.kv__innner {
  padding: 0 !important;
}
@media only screen and (max-width: 767px) {
  .kv {
    padding: 0;
  }
}

/* section 
================================================== */
.section__inner {
  position: relative;
  width: 1240px;
  margin: 0 auto;
  padding-top: 80px;
  padding-bottom: 80px;
}
.section__notes > li {
  display: table-row;
  font-size: 14px;
}
.section__notes > li > span {
  display: table-cell;
  vertical-align: top;
}
.section__notes > li > span:nth-child(1) {
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .section__inner {
    width: auto;
    padding: 10.66667vw 2.66667vw;
  }
  .section__notes > li {
    font-size: 3.2vw !important;
  }
}

/* intro 
================================================== */
.intro__lead {
  font-size: 26px;
  line-height: 1.6;
  text-align: center;
}
.intro__ill {
  position: absolute;
}
.intro__ill--01 {
  left: 120px;
  top: 65px;
}
.intro__ill--02 {
  right: 173px;
  top: -50px;
}
.intro__ill--03 {
  right: 120px;
  bottom: 70px;
}
.intro__ill--04 {
  left: 160px;
  bottom: -50px;
}
@media only screen and (max-width: 767px) {
  .intro__lead {
    font-size: 5.33333vw;
  }
  .intro__ill {
    height: auto;
  }
  .intro__ill--01 {
    width: 16.4vw;
    left: 2.66667vw;
    top: -8.93333vw;
  }
  .intro__ill--02 {
    width: 12.66667vw;
    right: 2.66667vw;
    top: -6.13333vw;
  }
  .intro__ill--03 {
    width: 16.26667vw;
    right: 2.66667vw;
    bottom: 21.73333vw;
  }
  .intro__ill--04 {
    width: 18.4vw;
    left: 2.66667vw;
    bottom: -8.8vw;
  }
}

/* item 
================================================== */
.item {
  background: #dccefe;
}
.item__title {
  margin-bottom: 50px;
  text-align: center;
}
.item__panel {
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  width: 1200px;
  padding: 38px 38px 52px;
  border-width: 2px;
  border-color: #374151;
  border-style: solid;
  border-radius: 20px;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(to bottom, transparent 20px, rgba(252, 197, 225, 0.4) 21px, rgba(252, 197, 225, 0.4) 21px, transparent 22px, transparent 41px, rgba(252, 197, 225, 0.4) 42px, rgba(252, 197, 225, 0.4) 42px, transparent 43px, transparent 62px, rgba(252, 197, 225, 0.4) 63px, rgba(252, 197, 225, 0.4) 63px, transparent 64px, transparent 83px, rgba(252, 197, 225, 0.4) 84px, rgba(252, 197, 225, 0.4) 84px, transparent 85px, transparent 104px, rgba(252, 197, 225, 0.4) 105px, rgba(252, 197, 225, 0.4) 105px), repeating-linear-gradient(to right, transparent 20px, rgba(252, 197, 225, 0.4) 21px, rgba(252, 197, 225, 0.4) 21px, transparent 22px, transparent 41px, rgba(252, 197, 225, 0.4) 42px, rgba(252, 197, 225, 0.4) 42px, transparent 43px, transparent 62px, rgba(252, 197, 225, 0.4) 63px, rgba(252, 197, 225, 0.4) 63px, transparent 64px, transparent 83px, rgba(252, 197, 225, 0.4) 84px, rgba(252, 197, 225, 0.4) 84px, transparent 85px, transparent 104px, rgba(252, 197, 225, 0.4) 105px, rgba(252, 197, 225, 0.4) 105px);
}
.item__panel + .item__panel {
  margin-top: 90px;
}
.item__panel__tagline {
  position: absolute;
  top: -53px;
  right: -22px;
}
.item__panel__inner {
  display: flex;
  flex-direction: row-reverse;
  gap: 60px;
  margin-bottom: 50px;
}
.item__panel__image {
  flex: 0 0 540px;
}
.item__panel__image img {
  border-radius: 20px;
  overflow: hidden;
}
.item__panel__body {
  flex: 1 0 0%;
}
.item__panel__title {
  position: relative;
  margin-left: -60px;
  margin-bottom: 30px;
}
.item__panel__title i {
  position: absolute;
  right: 0;
  top: 5px;
}
.item__panel__lead {
  padding-left: 30px;
  font-size: 22px;
  line-height: 1.8;
}
.item__panel__btn {
  margin: 30px 0 0 0;
  padding-left: 30px;
}
.item__panel__btn a {
  display: inline-block;
}
.item__panel__bnr {
  text-align: center;
}
.item__panel__bnr a {
  display: inline-block;
}
.item__panel--03 .item__panel__inner {
  margin-bottom: 0;
}
@media only screen and (max-width: 767px) {
  .item__title {
    margin-bottom: 12vw;
  }
  .item__title img {
    width: 91.73333vw;
    height: auto;
  }
  .item__panel {
    border-width: 0.26667vw;
    border-radius: 2.66667vw;
    width: 89.33333vw;
    margin: 0 auto;
    padding: 1.6vw 1.6vw 6.66667vw;
  }
  .item__panel + .item__panel {
    margin-top: 12vw;
  }
  .item__panel__tagline {
    top: -8.53333vw;
    right: -2.93333vw;
  }
  .item__panel__tagline img {
    height: auto;
  }
  .item__panel__inner {
    flex-direction: column;
    gap: 5.06667vw;
    margin-bottom: 0;
  }
  .item__panel__image {
    flex: 0 0 auto;
  }
  .item__panel__image img {
    border-radius: 2.66667vw;
  }
  .item__panel__title {
    margin: 0 -4.53333vw 3.73333vw;
  }
  .item__panel__title img {
    height: auto;
  }
  .item__panel__lead {
    margin-bottom: 1em;
    padding: 0 4vw;
    font-size: 4.26667vw;
    line-height: 1.625;
  }
  .item__panel__btn {
    margin-top: 4vw;
    padding-left: 0;
    text-align: center;
  }
  .item__panel__btn a {
    width: 78.93333vw;
  }
  .item__panel--01 .item__panel__tagline img {
    width: 33.73333vw;
  }
  .item__panel--01 .item__panel__title > img {
    width: 100%;
  }
  .item__panel--01 .item__panel__bnr a {
    width: 82.8vw;
  }
  .item__panel--02 .item__panel__tagline img {
    width: 34vw;
  }
  .item__panel--02 .item__panel__title > img {
    width: 78.4vw;
  }
  .item__panel--02 .item__panel__title > i {
    top: 0.53333vw;
  }
  .item__panel--02 .item__panel__title > i img {
    width: 14.93333vw;
  }
  .item__panel--02 .item__panel__bnr a {
    width: 80.93333vw;
  }
  .item__panel--03 .item__panel__tagline img {
    width: 36.93333vw;
  }
  .item__panel--03 .item__panel__title > img {
    width: 61.86667vw;
  }
  .item__panel--03 .item__panel__title > i {
    top: 4vw;
    right: 6vw;
  }
  .item__panel--03 .item__panel__title > i img {
    width: 23.2vw;
  }
}

/* merit 
================================================== */
.merit {
  background: #c0f9ee;
}
.merit__title {
  margin-bottom: 50px;
  text-align: center;
}
.merit__row {
  display: flex;
  align-items: center;
  gap: 80px;
}
.merit__image {
  flex: 0 0 600px;
}
.merit__image img {
  border-radius: 20px;
  border-width: 2px;
  border-color: #374151;
  border-style: solid;
}
.merit__body {
  position: relative;
  flex: 1 0 0%;
  background: #ffe2ed;
  border-radius: 20px;
  border-width: 2px;
  border-color: #374151;
  border-style: solid;
}
.merit__body ul {
  position: relative;
  left: -10px;
  top: -10px;
  background: #fff;
  border-radius: 20px;
  border-width: 2px;
  border-color: #374151;
  border-style: solid;
  padding: 35px 30px;
  font-size: 24px;
  line-height: 1.5;
}
.merit__body ul > li {
  position: relative;
  padding-left: 37px;
}
.merit__body ul > li::before {
  position: absolute;
  left: 0;
  top: .3em;
  content: "";
  display: block;
  width: 28px;
  height: 26px;
  background: url("/products/colorio/oshikatsu/images/merit_icn_check.svg") no-repeat;
  background-size: 28px 26px;
}
.merit__body ul > li + li {
  margin-top: .25em;
}
.merit__body span {
  display: inline-block;
  background: linear-gradient(transparent 0.95em, #fffa12 0, #fffa12 1.3em, transparent 0);
  color: #f24c8a;
}
@media (min-width: 768px) {
  .merit__inner {
    padding-bottom: 120px;
  }
}
@media only screen and (max-width: 767px) {
  .merit__inner {
    padding-left: 4vw;
    padding-right: 4vw;
    padding-bottom: 14.66667vw;
  }
  .merit__title {
    margin-bottom: 7.46667vw;
  }
  .merit__title img {
    width: 92vw;
    height: auto;
  }
  .merit__row {
    flex-direction: column;
    gap: 6.13333vw;
  }
  .merit__image {
    flex: 0 0 auto;
  }
  .merit__image img {
    border-radius: 2.66667vw;
    border-width: 0.26667vw;
  }
  .merit__body {
    margin-left: 1.6vw;
    border-radius: 2.66667vw;
    border-width: 0.26667vw;
  }
  .merit__body ul {
    left: -1.6vw;
    top: -1.6vw;
    padding: 6vw 4.66667vw;
    border-radius: 2.66667vw;
    border-width: 0.26667vw;
    font-size: 4.26667vw;
  }
  .merit__body ul > li {
    padding-left: 7.33333vw;
  }
  .merit__body ul > li::before {
    top: .3em;
    width: 5.2vw;
    height: 4.93333vw;
    background-size: 5.2vw 4.93333vw;
  }
  .merit__body ul > li + li {
    margin-top: .4em;
  }
}

/* prod 
================================================== */
.prod {
  background: #ffe2ed;
}
.prod__inner {
  padding-bottom: 100px;
}
.prod__ill {
  position: absolute;
  left: 0;
  top: -72px;
}
.prod__ttl {
  margin-bottom: 80px;
  text-align: center;
}
.prod__row {
  display: flex;
  flex-direction: row-reverse;
  gap: 80px;
}
.prod__image {
  flex: 0 0 600px;
}
.prod__image img {
  border-radius: 20px;
  border-width: 2px;
  border-color: #374151;
  border-style: solid;
}
.prod__body {
  flex: 1 0 0%;
}
.prod__body h3 {
  display: flex;
  flex-direction: column;
  font-size: 40px;
  line-height: 1;
  gap: .2em;
  margin-bottom: 1em;
}
.prod__body h3 small {
  font-size: 22px;
}
.prod__body p {
  margin-bottom: 1.5em;
  font-size: 22px;
  line-height: 1.8;
}
.prod__body div {
  margin-top: 2em;
  font-size: 22px;
}
.prod__body div a {
  display: inline-block;
}
.prod__subttl {
  margin: 100px 0 50px;
  font-size: 40px;
  text-align: center;
}
.prod__subttl span {
  display: inline-block;
  padding: 0 .2em;
  background: url("/products/colorio/oshikatsu/images/prod_bg_h3.png") repeat-x center bottom;
}
.prod__spec__table td {
  background: #fff;
}
.prod__spec__table .prod__spec__more.show {
  display: table-row-group;
}
.prod__spec__more {
  display: none;
}
.prod__spec__btn {
  margin-top: 50px;
  text-align: center;
}
.prod__spec__btn a {
  display: inline-block;
  background: linear-gradient(transparent 0.95em, #c0f9ee 0, #c0f9ee 1.3em, transparent 0);
  font-size: 20px;
  color: #333;
  text-decoration: none;
}
.prod__spec__btn a span {
  display: inline-block;
  padding-right: 32px;
  background: url("/products/colorio/oshikatsu/images/prod_icn_more.svg") no-repeat right center;
  background-size: 25px 25px;
}
.prod__spec .listCaution.show {
  display: block;
}
.prod--pf81 {
  margin-bottom: 80px;
  background: #fdf3bd;
}
.prod--pf81 .prod__ill {
  left: auto;
  right: 0;
  top: -45px;
}
.prod--pf81 .prod__spec__btn a {
  background: linear-gradient(transparent 0.95em, #fcc5e1 0, #fcc5e1 1.3em, transparent 0);
}
@media only screen and (max-width: 767px) {
  .prod__inner {
    padding-left: 6vw;
    padding-right: 6vw;
    padding-bottom: 13.33333vw;
  }
  .prod__ill {
    left: 2.66667vw;
    top: -11.2vw;
    width: 24.66667vw;
    height: auto;
  }
  .prod__ttl {
    margin-bottom: 4.66667vw;
  }
  .prod__ttl img {
    width: 64.93333vw;
    height: auto;
  }
  .prod__row {
    flex-direction: column;
    gap: 8vw;
  }
  .prod__image {
    flex: 0 0 auto;
  }
  .prod__image img {
    border-radius: 2.66667vw;
    border-width: 0.26667vw;
  }
  .prod__body h3 {
    font-size: 5.86667vw;
  }
  .prod__body h3 small {
    font-size: 4.26667vw;
  }
  .prod__body p {
    font-size: 4.26667vw;
    line-height: 1.625;
  }
  .prod__body div {
    font-size: 4.26667vw;
    text-align: center;
  }
  .prod__body div a {
    width: 78.93333vw;
  }
  .prod__subttl {
    margin: 14.66667vw 0 6.66667vw;
    font-size: 6.66667vw;
  }
  .prod__spec__btn {
    margin-top: 10.66667vw;
  }
  .prod__spec__btn a {
    font-size: 4.26667vw;
  }
  .prod__spec__btn a span {
    padding-right: 7.46667vw;
    background-size: 5.33333vw 5.33333vw;
  }
  .prod--pf81 {
    margin-bottom: 4vw;
  }
}

/* Utility
================================================== */
@media (min-width: 768px) {
  #contents.responsive .u-forsp {
    display: none !important;
  }
}
@media print {
  #contents.responsive .u-forsp {
    display: none !important;
  }
}
@media only screen and (max-width: 767px) {
  #contents.responsive .u-forpc {
    display: none !important;
  }
}
#contents.responsive .u-oro {
  transition: opacity .3s ease;
}
#contents.responsive .u-oro:hover {
  opacity: .7;
}
#contents.responsive img.u-liquid {
  width: 100%;
  height: auto;
}
#contents.responsive img.u-liquid--mw {
  width: auto;
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  #contents.responsive img.u-liquid--sp {
    width: 100%;
    height: auto;
  }
}
#contents.responsive .u-mplus {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* adjust
================================================== */
.purchase_list ul > li:nth-child(2) h3 {
  display: none;
}
.purchase_list ul > li:nth-child(3) {
  display: none !important;
}

.support_list ul > li:nth-child(1), .support_list ul > li:nth-child(2), .support_list ul > li:nth-child(3) {
  display: none !important;
}