@charset "UTF-8";
/*none*/
#area-Contents .show_sp {display: none !important}
#area-Contents .show_pc {display: block !important}
#area-Contents .margin_none p {margin: 0;}
@media only screen and (max-width: 1024px) {
.opt-md-w90p {width: 96%;}
}
@media only screen and (max-width: 640px) {
/*none*/
#area-Contents .show_sp {display: block !important}
#area-Contents .show_pc {display: none !important}
.opt-sm-w80p {width: 80%;}
}

/*font family*/
#area-Contents .font-fm01{font-family: 'FP-HiraginoUDSansStdN-W6', sans-serif}
#area-Contents .font-fm02{font-family: 'FP-HiraginoUDSansStdN-W3', sans-serif}
#area-Contents .font-fm03{font-family: 'FP-HiraginoUDSansStdN-W4', sans-serif}

/*font size*/
#area-Contents .font-64 {font-size: 64px;line-height: 1.4;}
#area-Contents .font-40 {font-size: 40px;line-height: 1.4;}
#area-Contents .font-37 {font-size: 37px;line-height: 1.4;}
#area-Contents .font-33 {font-size: 33px;line-height: 1.25;}
#area-Contents .font-32 {font-size: 46px;line-height: 1.25;}
#area-Contents .font-30 {font-size: 30px;line-height: 1.4;}
#area-Contents .font-26 {font-size: 26px;line-height: 1.4;}
#area-Contents .font-24 {font-size: 24px;line-height: 1.4;}
#area-Contents .font-20 {font-size: 20px;line-height: 1.4;}
#area-Contents .font-12 {font-size: 16px;line-height: 1.4;}
@media only screen and (max-width: 1024px) {
#area-Contents .font-64 {font-size: 48px;line-height: 1.4;}
#area-Contents .font-40 {font-size: 30px;line-height: 1.4;}
#area-Contents .font-37 {font-size: 29px;line-height: 1.4;}
#area-Contents .font-33 {font-size: 24px;line-height: 1.25;}
#area-Contents .font-32 {font-size: 32px;line-height: 1.25;}
#area-Contents .font-30 {font-size: 24px;line-height: 1.4;}
#area-Contents .font-26 {font-size: 22px;line-height: 1.4;}
#area-Contents .font-24 {font-size: 20px;line-height: 1.4;}
#area-Contents .font-20 {font-size: 18px;line-height: 1.4;}
#area-Contents .font-12 {font-size: 13px;line-height: 1.4;}
}
@media only screen and (max-width: 640px) {
#area-Contents .font-64 {font-size: 32px;line-height: 1.4;}
#area-Contents .font-40 {font-size: 20px;line-height: 1.4;}
#area-Contents .font-37 {font-size: 22px;line-height: 1.4;}
#area-Contents .font-33 {font-size: 16px;line-height: 1.25;}
#area-Contents .font-32 {font-size: 24px;line-height: 1.25;}
#area-Contents .font-30 {font-size: 16px;line-height: 1.4;}
#area-Contents .font-26 {font-size: 16px;line-height: 1.4;}
#area-Contents .font-24 {font-size: 18px;line-height: 1.4;}
#area-Contents .font-20 {font-size: 16px;line-height: 1.4;}
#area-Contents .font-12 {font-size: 10px;line-height: 1.4;}
}

/*color*/
#area-Contents .color01{color: #2d2d2d}
#area-Contents .color02{color: #00903d}
#area-Contents .color03{color: #FFF}

/*midashi*/
#area-Contents .midashi01{background-color: #ffff00;color: #2d2d2d;border-radius: 4px;padding: 5px;width: 90%;margin: 0 auto;}
#area-Contents .midashi02{background-color: #189c4b;color: #FFF;border-radius: 4px;padding: 5px;width: 90%;margin: 0 auto;}

/*float*/
#area-Contents .stickyColumn{position: relative;z-index: 100;bottom: 0;margin-top: 0;pointer-events: none;}
#area-Contents .shop_float {
width: 100%;
max-width: 120px!important;
right: 0!important;
margin: 0 0 0 auto;
position: relative;
bottom: 0;
}
#area-Contents .shop_float .btn_shop {
width: 100% !important;
}
#area-Contents .shop_float .btn_shop ul {
display: flex;
justify-content: space-between;
}
#area-Contents .shop_float .btn_shop li {
width: 100%;
margin: 0 0 0 auto;
pointer-events: auto;
}
@media only screen and (max-width: 1024px) {
#area-Contents .shop_float {
max-width: 100px!important;
}
}
@media only screen and (max-width: 640px) {
#area-Contents .shop_float {
max-width: 70px!important;
}
}

/*btn_onkan*/
#area-Contents .btn_onkan .is-colorset--1 .l-ButtonUnit__link{color:#2d2d2d;background-color: #FFF;border: 2px solid;border-image: linear-gradient(to right, #ff9600, #e73828) 1;}
#area-Contents .btn_onkan .l-ButtonUnit__link .cmn-icon {content: "";width: 26px;height: 26px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_arrow.svg") center center no-repeat;background-size: 100% auto;margin: 0;padding: 0;position: absolute;right: 0;top: 50%;transform: translate(-50%,-50%);}
#area-Contents .btn_onkan .cmn-icon--right:before, #area-Contents .btn_onkan .cmn-icon--bullet:before,#area-Contents .btn_onkan .cmn-icon--external:before {content: none!important;}

/*sec01*/
#area-Contents .sec01_bg{background: #EFF5E7;
background: linear-gradient(90deg,rgba(163, 210, 159, 1) 0%, rgba(213, 231, 188, 1) 15%, rgba(239, 245, 231, 1) 65%, rgba(201, 226, 181, 1) 100%);}
#area-Contents .catch_wrap {width:65%; margin: 0 auto;}
#area-Contents .catch_wrap img {width: 100%;height: auto;}
#area-Contents .catch_wrap .catch_inner{position: relative;padding: 0 11.2%;}
#area-Contents .catch_wrap .catch_inner::before {content: "";display: block;width: 10%;height: 100%; background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_line_l.svg") bottom left no-repeat;background-size: 100% auto;position: absolute;bottom: 0;left: 0;}
#area-Contents .catch_wrap .catch_inner::after {content: "";display: block;width: 10%;height: 100%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_line_r.svg") bottom left no-repeat;background-size: 100% auto;position: absolute;bottom: 0;right: 0;}
#area-Contents .catch_wrap .catch_inner p {display: flex;flex-wrap: wrap; margin: 0 auto;justify-content: center;}
#area-Contents .catch01 {background-image: linear-gradient(0deg,rgba(255, 255, 255, 0) 10%,rgba(255, 239, 0, 1) 10%, rgba(255, 239, 0, 1) 32%, rgba(255, 255, 255, 0) 32%);
  background-size: 0 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  padding-bottom: 0;
  transition: background-size 0.8s ease-out;}
#area-Contents .catch01 {width: 61.3%;}
#area-Contents .catch02 {width: 26%;}
#area-Contents .catch03 {width: 100%;margin-top: -10%;}
#area-Contents .catch01.on {background-size: 100% 100%;background-position: bottom left;}
@media only screen and (max-width: 1024px) {
#area-Contents .catch_wrap {width:94%; margin: 0 auto;}
}
@media only screen and (max-width: 640px) {
#area-Contents .catch_wrap {width:94%; margin: 0 auto;}
#area-Contents .catch_wrap .catch_inner{padding: 0 11.2%;}
#area-Contents .catch_wrap .catch_inner::before {width: 10.5%;}
#area-Contents .catch_wrap .catch_inner::after {width: 10.5%;}
#area-Contents .catch01 {width: 61.3%;}
#area-Contents .catch02 {width: 26%;}
#area-Contents .catch03 {width: 100%;margin-top: 0;}
#area-Contents .catch_wrap .catch_inner p {flex-wrap: wrap; margin: 0 auto;justify-content: center;}
}

#area-Contents .photo_wrap{width: 70%;margin: 3.5% auto;}
#area-Contents .photo_wrap img {width: 100%;height: auto;}
#area-Contents .photo_inner{display: flex;justify-content: space-between;flex-wrap: nowrap; width: 100%;}
#area-Contents .photo01{width:48%; position: relative;}
#area-Contents .photo02{width:48%; position: relative;margin-top: 3%;}
#area-Contents .photo01_mark{width: 29%;position: absolute;top: 17%;right: 5%;transform: translate(-30%, 90%) scale(0) rotate(25deg) !important;transition: 0.8s cubic-bezier(.25,.25,.03,1.11) 0s !important;}
#area-Contents .on .photo01_mark{transform: translate(0, 0) scale(1) rotate(0) !important;}
#area-Contents .photo02_mark{width: 29%;position: absolute;top: 13%;left: 5%;transform: translate(30%, 90%) scale(0) rotate(-25deg) !important;transition: 0.8s cubic-bezier(.25,.25,.03,1.11) 0.3s !important;}
#area-Contents .on .photo02_mark{transform: translate(0, 0) scale(1) rotate(0) !important;}
@media only screen and (max-width: 1024px) {
#area-Contents .photo_wrap{width: 90%;margin: 3.5% auto;}
}
@media only screen and (max-width: 640px) {
#area-Contents .photo_wrap{width: 94%;margin: 3.5% auto;}
#area-Contents .photo_inner{display: flex;justify-content: center;flex-wrap: wrap; width: 100%;}
#area-Contents .photo01{width:98%; position: relative;margin-left: -5%; z-index: 10;}
#area-Contents .photo02{width:98%; position: relative;margin-top: -20%;margin-right: -19%; z-index: 1;}
}

#area-Contents .movie_wrap {width: 100%; margin: 20px auto 0;position: relative;}
#video_cont,#video_cont video {width: 100%;height: 100%;}
#area-Contents .movie_inner {width: 57vw;height: 57vw;margin: 0 auto;border-radius: 50%;overflow: hidden;position: relative;z-index: 10}
#area-Contents #video_cont video {object-fit: cover;object-position: center;position: absolute;top: 0;left: 0;}
#area-Contents .movie_wrap .btn_playmov {width: 100%;height: 100%;padding: 0;margin: 0;}
#area-Contents .movie_wrap .btn_playmov ul,.movie_wrap .btn_playmov li {width: 100%;height: 100%;padding: 0;margin: 0; list-style: none;}
#area-Contents .movie_wrap .btn_playmov a {display: block;width: 100%;height: 100%;position: relative;z-index: 10;}
#area-Contents .playmov_ico{position: absolute;top: 50%;left: 50%;width: 14%;height: 14%;max-width: 184px;max-height: 174px;min-width: 130px;min-height: 123px;transform: translate(-50%, -50%);z-index: 10;}
#area-Contents .movie_deco01 {width: 20.5%;padding-top: 20.5%;display: block;position: absolute;top: 11%;left: 7%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/cm_deco01.png") center center no-repeat;background-size: 100% auto;z-index: 1}
#area-Contents .movie_deco02 {width: 20.5%;padding-top: 20.5%;display: block;position: absolute;top: 62%;right: 8%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/cm_deco01.png") center center no-repeat;background-size: 100% auto;z-index: 1}
#area-Contents .movie_deco03 {width: 4.75%;padding-top: 4.75%;display: block;position: absolute;top: 42%;left: 4%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/cm_deco01.png") center center no-repeat;background-size: 100% auto;z-index: 1}
#area-Contents .movie_deco04 {width: 9.25%;padding-top: 9.25%;display: block;position: absolute;top: 53%;right: 2%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/cm_deco01.png") center center no-repeat;background-size: 100% auto;z-index: 1}
@media only screen and (max-width: 1024px) {
#area-Contents .movie_inner {width: 70vw;height: 70vw;margin: 0 auto;border-radius: 50%;overflow: hidden;position: relative;z-index: 10}
}
@media only screen and (max-width: 640px) {
#area-Contents .movie_wrap {margin: 10px auto 0;}
#area-Contents .movie_inner {width: 122vw;height: 122vw;margin: 0 auto 0 -11vw;}
#area-Contents .movie_deco01,
#area-Contents .movie_deco02,
#area-Contents .movie_deco03,
#area-Contents .movie_deco04{display: none;}
}

#area-Contents .movtxt_wrap .l-AccordionUnit__titleBlock__icon {color: #2d2d2d;font-size: 1.8em;}
#area-Contents .movtxt_wrap .g-AccordionUnit__titleBlock {padding: 0 4em 0 0;}
#area-Contents .movtxt_wrap .g-AccordionUnit__contentBlock {padding: 0;}

#area-Contents .column_parent_wrap {width: 84%;}
#area-Contents .column_wrap {background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/sec01_bg_col_middle.png") center center repeat-y;background-size: 100% auto;position: relative;margin: 0 auto;}
#area-Contents .column_inner {padding: 1% 6% 0 3%;display: flex;flex-wrap: nowrap;align-items: center;justify-content: center;}
#area-Contents .column_inner .font-30 {font-size: 2.1vw;line-height: 1.25;}
#area-Contents .column_inner .dot_border span {display: block;padding-bottom: 12px;margin-bottom: 12px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/border_dot.svg") bottom left repeat-x;background-size: 20px 4px;}
#area-Contents .column_inner .dot_border span u {text-decoration: none;background-image: linear-gradient(0deg,rgba(255, 239, 0, 1) 0%, rgba(255, 239, 0, 1) 55%, rgba(255, 255, 255, 0) 55%);
  background-size: 0 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
  padding-bottom: 0;
  transition: background-size 0.8s ease-out;}
#area-Contents .column_inner .on span u{background-size: 100% 100%;background-position: bottom left;}
@media only screen and (max-width: 1024px) {
#area-Contents .column_parent_wrap {width: 100%;}
#area-Contents .column_inner {padding: 4% 6% 0 3%;}
}
@media only screen and (max-width: 640px) {
#area-Contents .column_parent_wrap {width: 100%;}
#area-Contents .column_wrap {background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/sec01_bg_col_middle_sp.png") center center repeat-y;background-size: 100% auto;position: relative;}
#area-Contents .column_inner {padding: 4% 10% 0;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
#area-Contents .column_inner .font-30 {font-size: 4.25vw;}
}

/*sec02*/
#area-Contents .sec02_bg {background: #FF5514;
background: linear-gradient(0deg,rgba(255, 85, 20, 1) 50%, rgba(254, 88, 19, 1) 82%, rgba(242, 150, 0, 1) 100%);}
#area-Contents .products_wrap {background-color: rgba(255,255,255,0.8);border-radius: 10px;padding: 70px 0;}
#area-Contents .feature01 img {background-image: linear-gradient(0deg,rgba(255, 255, 255, 0) 10%,rgba(255, 239, 0, 1) 10%, rgba(255, 239, 0, 1) 32%, rgba(255, 255, 255, 0) 32%);
  background-size: 0 100%;
  background-position: bottom left 41.15%;
  background-repeat: no-repeat;
  padding-bottom: 0;
  transition: background-size 0.8s ease-out;}
#area-Contents .on.feature01 img {background-size: 41.15% 100%;background-position: bottom left 62.5%;}

#area-Contents .ripple_wrap {width: 90%;margin: 50px auto;position: relative;z-index: 1;}
#area-Contents .ripple_wrap img {width: 100%;height: auto;}
#area-Contents .ripple_inner {position: relative;}
#area-Contents .ripple_img01 {width: 27%;position: absolute;top: 0;right: 0;}
#area-Contents .ripple_img02 {width: 67%;margin: 0 auto;}
#area-Contents .ripple_cap {position: absolute;top: 57.8%;right: 21.5%;}
@media only screen and (max-width: 640px) {
#area-Contents .feature_parent_wrap {width: 94%;}
#area-Contents .products_wrap {border-radius: 8px;padding: 30px 0 10px;}
#area-Contents .ripple_wrap {margin: 18% auto;}
#area-Contents .ripple_img01 {width: 42%;position: absolute;top: -15%;right: -4%;}
#area-Contents .ripple_img02 {width: 100%;margin: 0 auto;}
#area-Contents .ripple_cap {position: absolute;top: 59%;right: 8.5%;}
}

#area-Contents .point_wrap {width: 90%;margin: -10% auto 0;background: #FFFFFF;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.8) 58%, rgba(255, 244, 30, 0.8) 68%, rgba(255, 241, 0, 0.8) 100%);position: relative;z-index: 10;padding: 5% 0;}
#area-Contents .point_wrap::before {content: "";display: block;width: 24%;padding-top: 16.2%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_uparrow.png") center center no-repeat;background-size: 100% auto;position: absolute;top: 0;left: 50%;transform: translate(-50%,-99.5%);}
#area-Contents .point_wrap p {margin: 0 auto 5px;}
#area-Contents .point_wrap span {background-image: linear-gradient(0deg,rgba(255, 190, 0, 1) 0%, rgba(255, 190, 0, 1) 40%, rgba(255, 255, 255, 0) 40%);
background-size: 0 100%;
background-position: bottom right;
background-repeat: no-repeat;
padding-bottom: 0;
transition: background-size 0.8s ease-out;}
#area-Contents .point_wrap span.on {background-size: 100% 100%;background-position: bottom left;}
#area-Contents .point_wrap .font-37 span {background-image: linear-gradient(0deg,rgba(255, 255, 19, 1) 0%, rgba(255, 255, 19, 1) 40%, rgba(255, 255, 255, 0) 40%);
background-size: 0 100%;
background-position: bottom right;
background-repeat: no-repeat;
padding-bottom: 0;
transition: background-size 0.8s ease-out;}
#area-Contents .point_wrap .font-37 span.on {background-size: 100% 100%;background-position: bottom left;}
#area-Contents .point_wrap .font-40 {font-size: 2.928vw;}
#area-Contents .point_wrap .font-64 {font-size: 4.685vw;}
#area-Contents .point_wrap .font-26 {font-size: 1.903vw;}
#area-Contents .point_wrap .font-37 {font-size: 3.2vw;margin-top: 7%;}
@media only screen and (max-width: 1024px) {
#area-Contents .point_wrap .font-40 {font-size: 30px;}
#area-Contents .point_wrap .font-64 {font-size: 40px;}
#area-Contents .point_wrap .font-26 {font-size: 22px;}
#area-Contents .point_wrap .font-37 {font-size: 29px;}
}
@media only screen and (max-width: 640px) {
#area-Contents .point_wrap {width: 96%; margin: -27% auto 0;background: #FFFFFF;
background: linear-gradient(0deg,rgba(255, 255, 255, 0.8) 68%, rgba(255, 244, 30, 0.8) 78%, rgba(255, 241, 0, 0.8) 100%);position: relative;z-index: 10;padding: 5% 0;}
#area-Contents .point_wrap::before {width: 44%;padding-top: 19.5%;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_uparrow_sp.png") top center no-repeat;background-size: 100% auto;position: absolute;top: 0;left: 50%;transform: translate(-50%,-99.5%);}
#area-Contents .point_wrap .font-40 {font-size: 20px;}
#area-Contents .point_wrap .font-64 {font-size: 32px;}
#area-Contents .point_wrap .font-26 {font-size: 16px;}
#area-Contents .point_wrap .font-37 {font-size: 22px;}
}

/*sec03*/
#area-Contents .sec03_bg {background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/bg_yuzu_pc.jpg") top center no-repeat;background-size: cover;}
#area-Contents .scent_wrap {background-color: rgba(255,255,255,0.8);padding: 40px 0 20px;}
#area-Contents .scent_img_wrap {width: 90%;margin: -4% auto 0;}
#area-Contents .scent_fukidashi_inner {position: relative;}
#area-Contents .scent_fukidashi_inner img {width: 100%;height: auto;}
#area-Contents .fukidashi {width: 49%; position: absolute;top: -2%;right: 7%;transform: translate(-40%, 50%) scale(0);transition: 0.8s cubic-bezier(.25,.25,.03,1.11) 0s !important;}
#area-Contents .fukidashi.on {transform: translate(0, 0) scale(1) !important;}
@media only screen and (max-width: 640px) {
#area-Contents .scent_parent_wrap {width: 94%;margin: 0 auto;}
#area-Contents .scent_wrap {padding: 25px 0 10px;}
#area-Contents .scent_img_wrap {width: 100%;margin: -8% auto 0;}
#area-Contents .scent_cap {position: absolute;bottom: -5%;left: 5%;}
}

/*sec04*/
#area-Contents .sec04_bg{background: #EFF5E7;
background: linear-gradient(90deg,rgba(163, 210, 159, 1) 0%, rgba(213, 231, 188, 1) 15%, rgba(239, 245, 231, 1) 65%, rgba(201, 226, 181, 1) 100%);}
#area-Contents .buy_wrap {width: 90%;margin: 0 auto;}
#area-Contents .buy_wrap .l-ImageTextHP--v2__contentsBlock__text {display: flex;align-items: center;width: 90%;margin: 0 auto;}


/*qa*/
#area-Contents .onkan_qa {width:90%;margin:30px auto;}
#area-Contents .onkan_qa .l-AccordionUnit__titleBlock {border: none;background-color: transparent;display: flex;flex-wrap: nowrap;justify-content:space-between;padding: 18px 1.875em 5px 10px;}
#area-Contents .onkan_qa .g-AccordionUnit--qa__titleBlock__abbr {display: block;padding: 0;margin: 0;text-indent: -9999px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_q.svg") center center no-repeat;background-size: 100% auto;width: 33px;height: 33px;color: #2d2d2d;}
#area-Contents .onkan_qa .g-AccordionUnit--qa__titleBlock__abbr+.g-HeadingTitle {display: block;width: calc(100% - 50px);padding: 0;}
#area-Contents .onkan_qa .is-abbr .g-AccordionUnit--qa__contentBlock__abbr {display: block;padding: 0;margin: 0;text-indent: -9999px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_a.svg") center center no-repeat;background-size: 100% auto;width: 33px;height: 33px;position: static;float: left;}
#area-Contents .onkan_qa .g-AccordionUnit__contentBlock {border: none;background-color: transparent;padding: 5px 1.875em 15px 10px;/*display: flex;flex-wrap: nowrap;justify-content:space-between;*/}
#area-Contents .onkan_qa .g-AccordionMenu--qa__item {border-bottom: 1px solid #9d9d9d;}
#area-Contents .onkan_qa .g-AccordionUnit__contentBlock::after {content: "";display: block;clear: both;}
#area-Contents .onkan_qa .g-Text {display: block;width: calc(100% - 50px);padding: 0;float: right;}
#area-Contents .onkan_qa .g-Text p {margin: 0 auto;}
#area-Contents .onkan_qa .g-AccordionUnit__contentBlock.is-close {display:none;}
#area-Contents .onkan_qa .cmn-icon--up:before {content: ""; display: block;width: 15px;height: 15px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_minus.svg") center center no-repeat;background-size: 100% auto;}
#area-Contents .onkan_qa .cmn-icon--down:before {content: ""; display: block;width: 15px;height: 15px;background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_plus.svg") center center no-repeat;background-size: 100% auto;}
@media only screen and (max-width: 640px) {
#area-Contents .onkan_qa .l-AccordionUnit__titleBlock {padding: 12px 2.5em 5px 0;}
#area-Contents .onkan_qa .g-AccordionUnit__contentBlock {padding: 5px 1.875em 12px 0;}
}

/*modal*/
#modal {
position: fixed;
width: 100%;
height: 100%;
height: 100dvh;
background: #ed6e2a;
z-index: 500;
top: 0;
left: 0;
display: none;
}
#modal.active {
display: block;
}
#modal .modal_wrapper {
width: 100%;
height: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#modal .mov_wrap {
width: 100%;
aspect-ratio: 16 / 9;
max-width: 1080px;
margin: 0 auto;
}
@media only screen and (min-width:1024px) and (max-height: 768px) {
#modal .mov_wrap {
width: 65%;
}
}
#modal .mov_wrap iframe {
width: 100%;
height: 100%;
}
#modal .btn_close {
position: absolute;
bottom: 10%;
left: 50%;
width: 160px;
height: 52px;
cursor: pointer;
z-index: 200;
transform: translate(-50%,-50%);
}
#modal .btn_close ul,
#modal .btn_close li {
list-style: none;
padding: 0;
margin: 0 auto;
}
#modal .btn_close a {
display: flex;
align-items: center;
height: 52px;
background: url("/content/dam/sites/kao/www-kao-co-jp/deepclean/products/onkan/ico_close.svg") center left no-repeat;
background-size: 52px auto;
padding-left: 70px;
color: #FFF;
font-size: 30px;
text-decoration: none;
}
@media only screen and (min-width:1024px) and (max-height: 768px) {
#modal .btn_close {
position: absolute;
bottom: 0;
transform: translate(-50%,-20%) scale(0.6);
}
}
@media only screen and (max-width: 640px) {
#modal .btn_close {
position: absolute;
transform: translate(-50%,-50%) scale(0.75);
}
}