@charset "UTF-8";
/* CSS Document */
/*-------------------------------*/

* {
  text-align: left;
  list-style: none outside;
  font-size: 100%;
}
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #595757;
  font-size: 1rem;
  font-weight: 500;
  background: #ffffff;
  -webkit-text-size-adjust: 100%;
  line-height: 1.6;

  /*	letter-spacing: 0.03em;
    line-height: 1;
	overflow-x: hidden;*/
}
@media screen and (min-width:768px) {
  body {
    min-width: 1280px;
  }
}
header, footer, main, nav, section, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, table, thead, tbody, tr, th, td, em, img, span, a, input {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}
header, footer, main, nav, section, picture {
  display: block;
}
table, tr, td, th {
  border-collapse: collapse;
  border-spacing: 0;
}
sup {
  font-size: 50%;
}
/*img{
  max-width: 100%;
}*/
/*-------------------------------*/
/*-----全体-----*/
dd {
  margin: 0;
}
ul {
  list-style: none;
}
.contents_wrapper {
  width: 1200px;
  margin: 0 auto;
}
img.nomal_pic {
  display: block;
  margin: 0 auto;
}
.txtWN {
  white-space: nowrap;
}
.spOnly {
  display: none;
}
.pcOnly {
  display: block;
}
@media screen and (max-width:767px) {
  .contents_wrapper {
    width: 100%;
    padding: 0 20px;
  }
  img.nomal_pic {
    width: 100%;
    height: auto;
  }
  .adjSp100 {
    margin: 0 -20px;
  }
  .spOnly {
    display: block;
  }
  .pcOnly {
    display: none;
  }
}
/*-----メインビジュアル-----*/
#plex_mv {
  background:#abacb2 url("../img/bleach-plex/mv_bg.jpg") no-repeat 50% 0 / auto 843px;
}
#plex_mv picture {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
#plex_mv img {
  display: block;
  width: 100%;
  max-width: 1600px;
  height: auto;
}
.annotation_mv {
  display: flex;
  justify-content: center;
  margin: 10px auto 0;
}
.annotation_mv li {
  width: 100%;
  max-width: 1600px;
  text-align: right;
}
.annotation_mv li {
  font-size: 0.8em;
  line-height: 1.2;
}
@media screen and (max-width:767px) {
  .annotation_mv {
    display: none;
  }
}
/*-----プロダクト-----*/

.bleach-plex {
  padding-bottom: 80px;
}

.product_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
}
.product_wrapper h2 {
  margin-top: 90px;
  font-size: 3.6rem;
  font-family: "游明朝", 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
  color: #000;
  font-weight: 400;
  line-height: 1;
  width: 250px;
}
@media screen and (max-width:767px) {
  .product_wrapper h2 {
    text-align: center;
  }
}
.item_wrapper {
  width: 860px;
}
.product_name_01 {
  margin: 0 0 24px 0;
}
.product_name_02 {
  margin: 0 0 24px 0;
}
.product_text01 {
  font-weight: bold;
  font-size: 1em;
  line-height: 1;
}
.product_text02 {
  font-weight: bold;
  line-height: 1.6;
  font-size: 1.2em;
  margin: 2px 0 15px 0;
}
.product_text03 {
  font-size: 1em;
  line-height: 1.4;
  margin: 0;

}
.product_text03 ul {
  margin: 0;
  padding: 0;
}
.product_text03 li{
line-break: strict;
}
.item_inner {
  display: flex;
  align-items: center;
  margin-top: 90px;
}
.product_item_01 {
  width: 180px;
}
.product_item_02 {
  margin-left: 50px;
}
.annotation {
  margin: 10px 0;
}
.annotation li {
  margin: 3px 0;
  font-size: 0.8em;
  line-height: 1.2;
}
@media screen and (max-width:767px) {
  .product_wrapper h2 {
    width: auto;
  }
  .product_name_01 img, .product_name_02 img {
    width: 100%;
    height: auto;
  }
  .product_wrapper {
    display: block;
  }
  .item_wrapper {
    width: 100%;
  }
  .item_inner {
    justify-content: space-between;
    margin-top: 40px;
  }
  .product_name_01 {
    margin: 0 0 20px 0;
  }
  .product_name_02 {
    margin: 0 0 20px 0;
    width: 70%;
  }
  .item_inner .product_item_01 {
    width: 33%;
  }
  .item_inner .product_item_01 img {
    width: 100%;
    height: auto;
  }
  .item_inner .product_item_02 {
    width: 64%;
  }
  .product_text02 {
    margin: 2px 0 8px 0;
    font-size: clamp(16px, 4vw, 18px);
  }
  .product_text03 {
    margin: 2px 0 8px 0;
    font-size: clamp(14px, 2.93vw, 16px);
  }
  .product_item_02 {
    margin-left: 20px;
  }
}
/*-----横並び-----*/
.flexBox {
  display: flex;
  justify-content: space-between;
}
.flexBox2 {
  display: flex;
  align-items: center;
}
.flexBox3 {
  display: flex;
}
.flexItem2 {
  margin: 10px 0 40px;
}
.flexItem3 {
  width: 360px;
}
@media screen and (max-width:767px) {
  .flexItem3 {
    width: 100%;
  }
  .flexItem3 img {
    width: 100%;
    height: auto;
  }
  .flexBox, .flexBox2, .flexBox3 {
    display: block;
  }
}
/*-----画像-----*/
/*-----帯-----*/
.layBorder {
  display: flex;
  justify-content: center;
  /*height: 40px;*/
  margin: 90px 0 60px;
}
.layBorder.pb_band_border {
  background: url("../img/bleach-plex/pb_border_01.jpg") no-repeat 50% 0 / cover;
}
.layBorder.cp_band_border_01 {
  background: url("../img/bleach-plex/cp_border_01.jpg") no-repeat 50% 0 / cover;
}
.layBorder.cp_band_border_02 {
  background: url("../img/bleach-plex/cp_border_02.jpg") no-repeat 50% 0 / cover;
}
.layBorder .contents_wrapper {
  display: flex;
  align-items: center;
  height: 40px;
}
@media screen and (max-width:767px) {
  .layBorder {
    margin-top: 40px;
  }
  .layBorder.pb_band_border {
    background-image: url("../img/bleach-plex/pb_border_01_sp.jpg");
  }
  .layBorder.cp_band_border_01 {
    background-image: url("../img/bleach-plex/cp_border_01_sp.jpg");
  }
  .layBorder.cp_band_border_02 {
    background-image: url("../img/bleach-plex/cp_border_02_sp.jpg");
  }
}
.pb_band .pb_band_item, .cp_band .cp_band_item_01, .cp_band .cp_band_item_02 {
  position: relative;
  margin: 0 auto;
  width: 1200px;
}
.pb_band .pb_band_item img, .cp_band .cp_band_item_01 img, .cp_band .cp_band_item_02 img {
  position: absolute;
  top: -150px;
  right: 0;
  height: auto;
}
.pb_band .pb_band_item img {
  width: 130px;
}
.cp_band .cp_band_item_01 img, .cp_band .cp_band_item_02 img {
  width: 75px;
}
@media screen and (max-width:767px) {
  .pb_band .pb_band_item, .cp_band .cp_band_item_01, .cp_band .cp_band_item_02 {
    width: 100%;
  }
  .pb_band .pb_band_item img, .cp_band .cp_band_item_01 img, .cp_band .cp_band_item_02 img {
    top: -130px;
  }
  .pb_band .pb_band_item img {
    width: 133px;
  }
  .cp_band .cp_band_item_01 img, .cp_band .cp_band_item_02 img {
    width: 90px;
  }
}
.pb_01_title, .cp_01_title {
  text-align: center;
  margin: 60px 0;
}
@media screen and (max-width:767px) {
  .pb_01_title {
    margin: 60px auto 40px;
  }
  .cp_01_title {
    width: 75%;
    margin: 0 auto 40px;
  }
}
/*-----パワーブリーチ-----*/
.pb_text_02 {
  margin: 20px 150px 20px 0;
  color: #ee7347;
  font-family: "游明朝", 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
  font-weight: 300;
  font-size: 1.6em;
  letter-spacing: 5px;
}



@media screen and (max-width:767px) {
  .pb_text_02 {
    letter-spacing: 0px;
	margin: 20px 0;
	font-size: 1.4em;
  }
.flexItem2.layTyp03{
	margin-top: 60px;
}
}
.pb_icon_li {
  margin: 10px 0;
  font-size: 1.8rem;
  line-height: 1.4;
}
.pb_icon_li dt {
  position: relative;
  padding-left: 25px;
  color: #727171;
  font-size: 1.1rem;
  font-weight: bold;
}
.pb_icon_li dt::after {
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("../img/bleach-plex/pb_ico_001.png") no-repeat 0 0 / 15px auto;
}
.pb_icon_li dt.pb_underline {
  padding-bottom: 10px;
  border-bottom: 2px solid rgb(221, 136, 183);
  border-image: linear-gradient(-90deg, rgb(221, 136, 183) 0%, rgb(238, 153, 173) 17%, rgb(236, 164, 150) 29%, rgb(245, 178, 167) 48%, rgb(240, 139, 132) 72%, rgb(237, 122, 119) 100%);
  border-image: -moz-linear-gradient(-180deg, rgb(221, 136, 183) 0%, rgb(238, 153, 173) 17%, rgb(236, 164, 150) 29%, rgb(245, 178, 167) 48%, rgb(240, 139, 132) 72%, rgb(237, 122, 119) 100%);
  border-image: -webkit-linear-gradient(-180deg, rgb(221, 136, 183) 0%, rgb(238, 153, 173) 17%, rgb(236, 164, 150) 29%, rgb(245, 178, 167) 48%, rgb(240, 139, 132) 72%, rgb(237, 122, 119) 100%);
  border-image: -ms-linear-gradient(-180deg, rgb(221, 136, 183) 0%, rgb(238, 153, 173) 17%, rgb(236, 164, 150) 29%, rgb(245, 178, 167) 48%, rgb(240, 139, 132) 72%, rgb(237, 122, 119) 100%);
  border-image-slice: 1;
}
.pb_icon_li dd {
  margin: 20px 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.cp_title_01 {
  text-align: center;
  margin-bottom: 40px;
}
.howToUseText {
  margin: 100px 0 10px;
  font-family: "游明朝", 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
}
.howToUse h4 {
  font-size: 2.2rem;
  color: #000;
  font-weight: 700;
  text-align: center;
}
.howToUse p {
  text-align: center;
  color: #727171;
  font-size: 1.2rem;
  background-color: #fff;
}
.howToUse p span {
  position: relative;
}
.howToUse p span:before, .howToUse p span:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 15px;
  height: 1px;
  background: #727171;
}
.howToUse p span:before {
  left: -25px;
}
.howToUse p span:after {
  right: -25px;
}
.flexBox .howToUse {
  display: flex;
  justify-content: space-between;
}
.howToUseStep ol {
  display: flex;
  flex-wrap: wrap;
  margin: -5px -22.5px;
}
.howToUseStep ol li {
  margin: 10px 22.5px;
}
.howToUseStep ol li img {
  display: block;
}
@media screen and (max-width:767px) {
  .howToUseText {
    margin-top: 60px;
  }
  .howToUseStep ol {
    display: block;
    margin: 20px 0 0;
  }
  .howToUseStep ol li {
    margin: 10px 0;
  }
  .howToUseStep ol li img {
    width: 100%;
    height: auto;
  }
}
/*--------背景--------*/
.bg_001 {
  margin: 90px auto 0;
  background-color: #f9f9f9;
  padding: 24px 40px;
}
.bg_001 dt {
  font-weight: bold;
  font-size: 0.8rem;
}
.bg_001 dd {
  font-size: 0.7rem;
}
.bg_002 {
  margin: 80px 0 40px;
  background-color: #e0f1f4;
  padding: 90px 0;
}
@media screen and (max-width:767px) {
  .bg_001 {
    margin-top: 40px;
    padding: 20px;
  }
  .bg_001 dt {
    text-align: center;
  }
  .bg_002 .flexItem {
    display: flex;
    justify-content: center;
  }
  .bg_002 img {
    width: 100%;
    max-width: 285px;
    height: auto;
  }
  .bg_002 .cp_title_01 img {
    max-width: 335px;
  }
}
/*--------テキスト--------*/
.titleH3 {
  text-align: center;
  margin-top: 150px;
}
@media screen and (max-width:767px) {
  .titleH3 {
    margin-top: 80px;
  }
  .titleH3 img {
    width: 82%;
    margin: 0 auto;
  }
}
/*-----CAREPLEX-----*/
.cp_text_02 {
  margin: 20px 0;
  color: #556db3;
  font-family: "游明朝", 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
  font-weight: 300;
  font-size: 1.6em;
  letter-spacing: 5px;
}
@media screen and (max-width:767px) {
  .cp_text_02 {
    font-size: clamp(22px, 5.6vw, 26px);
	letter-spacing: 0px;
  }
}
.cp_icon_li {
  margin: 20px 0 0;
  font-size: 1.8rem;
  line-height: 1.4;
}
dl.cp_icon_li > dt {
  position: relative;
  padding-left: 25px;
  color: #727171;
  font-size: 1.1rem;
  font-weight: bold;
}
dl.cp_icon_li > dt::after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 0;
  width: 15px;
  height: 15px;
  background: url("../img/bleach-plex/cp_ico_01.png") no-repeat 0 0 / 15px auto;
}
.cp_icon_li dt.cp_underline {
  margin-top: 40px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgb(162, 171, 214);
  border-image: linear-gradient(-90deg, rgb(162, 171, 214) 0%, rgb(63, 82, 162) 17%, rgb(158, 162, 208) 59%, rgb(222, 211, 232) 73%, rgb(164, 174, 216) 87%, rgb(206, 208, 232) 100%);
  border-image: -moz-linear-gradient(180deg, rgb(162, 171, 214) 0%, rgb(63, 82, 162) 17%, rgb(158, 162, 208) 59%, rgb(222, 211, 232) 73%, rgb(164, 174, 216) 87%, rgb(206, 208, 232) 100%);
  border-image: -webkit-linear-gradient(180deg, rgb(162, 171, 214) 0%, rgb(63, 82, 162) 17%, rgb(158, 162, 208) 59%, rgb(222, 211, 232) 73%, rgb(164, 174, 216) 87%, rgb(206, 208, 232) 100%);
  border-image: -ms-linear-gradient(180deg, rgb(162, 171, 214) 0%, rgb(63, 82, 162) 17%, rgb(158, 162, 208) 59%, rgb(222, 211, 232) 73%, rgb(164, 174, 216) 87%, rgb(206, 208, 232) 100%);
  border-image-slice: 1;
}
.cp_icon_li dt.cp_underline.layTyp02{
	margin-top: 80px;
}
.cp_icon_li dd {
  margin: 20px 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
@media screen and (max-width:767px) {
  .cp_icon_li dt.cp_underline {
    margin-top: 30px;
  }
}
/*バッファー効果,軟化抑制,不染まり抑制*/
dl.cp_icon_li dt + dd, dl.cp_icon_li + .flexBox3 {
  margin-top: 20px;
}
/*軟化抑制内の表*/
dl.layTyp01 dt {
  display: block;
  background-color: #f9f9f9;
  padding: 12px;
  font-weight: bold;
  color: #727171;
}
dl.layTyp01 dd {
  padding: 0 12px;
  color: #727171;
}
.cp_img01 {
  text-align: center;
}
.flexItem02 .cp_img01 img {
  margin: 30px 0 60px;
}
.cp_text_03 {
  width: 600px;
  padding-right: 60px;
}
.annotationTop ul.annotation{
	margin-top: 40px;
}
@media screen and (max-width:767px) {
  .cp_text_03 {
    width: 100%;
    padding-right: 0;
  }
}
@media screen and (max-width:767px) {
  .laySp01 {
    width: 90%;
    margin: 0 auto;
  }
  .laySp01 img {
    margin: 10px 0;
  }
}
/*バッファー効果*/
.wrapCP01 {}
/*軟化抑制*/
.wrapCP02.flexBox2 .cp_icon_li {
  margin-top: 0;
}
/*不染まり抑制*/
.wrapCP03.flexBox3 .cp_icon_li {
  margin-top: 0;
}
.wrapCP03.flexBox3 .cp_icon_li dd {
  margin-top: 0;
}
@media screen and (max-width:767px) {
  .wrapCP01 img, .wrapCP02 img, .wrapCP03 img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/*--------------------------------------------------------*/
.font-yan {
  font-family: "Yantramanav", "游ゴシック体", "游ゴシック", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", "MSPGothic", sans-serif !important;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-top: 1px solid #dadada;
  margin: 0 auto 0;
  padding-bottom: 30px;
  width: 90vw;
  height: 140px;
}
footer::before, footer::after {
  display: block;
  content: "";
  position: absolute;
  top: -1px;
  width: 15px;
  height: 1px;
  background-color: black;
}
footer::before {
  left: 0;
}
footer::after {
  right: 0;
}
footer .links {
  display: flex;
  align-items: center;
  width: 45%;
}
footer .links li {
  margin-right: 30px;
  line-height: 1.4;
}
footer .links li:last-child, footer .links li:last-child a {
  display: flex;
  justify-content: center;
  text-align: center;
}
footer .links a {
  font-size: 14px;
  display: block;
  color: #555555;
  text-decoration: none;
}
footer .logo {
  width: 10%;
  text-align: center;
}
footer .logo img {
  width: 67px;
  height: auto;
}
footer .copy {
  text-align: right;
  font-size: 12px;
  width: 45%;
}
footer .footer_parts {
  display: flex;
  text-align: center;
  align-items: center;
  width: calc(50% - 35px);
}
footer .footer_parts ul {
  margin-right: 10px;
}
@media screen and (max-width:767px) {
  footer {
    display: block;
    padding: 30px 0 35px;
    width: 100%;
    height: auto;
  }
  footer::before, footer::after {
    display: block;
    content: "";
    position: absolute;
    top: -1px;
    width: 15px;
    height: 1px;
    background-color: black;
  }
  footer::before {
    left: 0;
  }
  footer::after {
    right: 0;
  }
  footer .links {
    justify-content: center;
    flex-wrap: wrap;
    width: auto;
  }
  footer .links li {
    margin: 0 20px 10px;
  }
  footer .links li:last-child {
    margin: 0 auto 10px;
    width: 100%;
  }
  footer .links a {
    font-size: 12px;
  }
  footer .logo {
    width: auto;
  }
  footer .copy {
    margin: 15px 0 0;
    width: auto;
    text-align: center;
  }
  footer .footer_parts {
    width: auto;
    display: block;
  }
  footer .footer_parts ul {
    margin: 0 0 15px;
  }
  .modal .modal-close {
    right: -30px;
  }
}
/*--------------------------------------------------------*/