@charset "UTF-8";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
  display:block;
}
ul,ol{
  list-style:none;
}
blockquote, q{
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content:'';
  content:none;
}
a{
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
/* change colours to suit your needs */
ins{
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}
/* change colours to suit your needs */
mark{
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}
del{
  text-decoration: line-through;
}
abbr[title], dfn[title]{
  border-bottom:1px dotted;
  cursor:help;
}
table{
  border-collapse:collapse;
  border-spacing:0;
}
/* change border colour to suit your needs */
hr{
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select{
  vertical-align:middle;
}
/* reset end */

/* init */
*, *:before, *:after{
  box-sizing: border-box;
}
img{
  vertical-align: bottom;
}
/* font */
#main{
  font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
}
.font-mincho{
  font-family: "ヒラギノ明朝 ProN W6",HiraMinProN-W6,"HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}
input, select, option, textarea{
  font-family: inherit;
  font-size: 100%;
}
/* clearfix */
.cf:after{
  content:'';
  display:block;
  clear:both;
}
.cb{
  clear: both;
}
.ht{
  white-space: nowrap;
  text-indent: 120%;
  overflow: hidden;
}
.hb{
  width: 0;
  height: 0;
  overflow: hidden;
}
.mb0{
  margin-bottom: 0 !important;
}
/* Link */
a:link,a:visited{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
a:active{
  text-decoration: underline;
}
@media print, screen and (min-width: 641px){
  a:hover{
    opacity: 0.8;
    transition: 0.2s ease-out;
  }
  a:active{
    opacity: 0.8;
  }
}
#main img {
  display: block;
  max-width: 100%;
  height: auto;
}
.brandSiteFooter {
  margin-top: 0;
}
.brandSiteFooter .inner {
  max-width: initial;
}
.brandSiteFooter .link a {
  white-space: nowrap;
}
.pageTop > a {
  z-index: 999;
  background: url(/ph/coccoapo/common/img/pagetop.png) no-repeat 0 0;
  background-size: cover;
}

/* pc sp */
@media print, screen and (min-width: 641px){
  .sp{
    display: none !important;
  }
}
@media screen and (max-width: 640px){
  .pc{
    display: none !important;
  }
  .brandSiteFooter .link {
    padding: 0;
  }
  .brandSiteFooter .link .policy {
    display: block;
    margin-bottom: 0;
  }
  .brandSiteFooter .link .policy li {
    border: none;
  }
}

/* main */
@media print, screen and (min-width: 641px){
  #main{
    position: relative;
    padding-bottom: 123px;
    background: url(../img_detox/detox_bg01.png) center bottom no-repeat;
    background-size: 100% auto;
  }
  #main::after{
    content: '';
    position: absolute;
    bottom: 96px;
    left: 0;
    display: block;
    width: 100%;
    height: 52px;
    background: url(../img_detox/line_grass.png) center 0 repeat-x;
    z-index: 2000;
  }
}
@media screen and (max-width: 640px){
  #main{
    position: relative;
    padding-bottom: 10vw;
    background: url(../img_detox/detox_bg01.png) center bottom no-repeat;
    background-size: 100% auto;
  }
  #main::after{
    content: '';
    position: absolute;
    bottom: 8vw;
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    background: url(../img_detox/line_grass.png) center 0 repeat-x;
    background-size: auto 100%;
    z-index: 2000;
  }
}

/* detox */
/* sec01 */
#detox #sec01{
  position: relative;
  z-index: 2;
}
@media print, screen and (min-width: 641px){
  #detox #sec01{
    position: relative;
    background: url(../img_detox/detox_bg01.png) center 0 repeat-y;
    background-size: 100% auto;
  }
  #detox #sec01 h2{
    position: relative;
    z-index: 3;
  }
  #detox #sec01 img{
    margin: 0 auto;
  }
  #detox #sec01::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 45.462%;
    height: 0;
    padding-top: 55.5385%;
    font-size: 0;
    background: url(../img_detox/sec01_bg02_pc.png) right 0 no-repeat;
    background-size: cover;
    z-index: 2;
  }
  #detox #sec01::after{
    content: '';
    position: absolute;
    bottom: -32px;
    left: 0;
    display: block;
    width: 100%;
    height: 52px;
    background: url(../img_detox/line_grass.png) center 0 repeat-x;
    z-index: 1;
  }
}
@media print, screen and (min-width: 1301px){
  #detox #sec01::before{
    width: 591px;
    height: 722px;
    padding-top: 0;
  }
}
@media screen and (max-width: 640px){
}
/* sec02 */
#detox #sec02{
  position: relative;
  background-repeat: repeat;
  background-position: center 0;
  z-index: 1;
}
#detox #sec02 .question-list *{
  font-family: serif;
  font-weight: bold;
}
#detox #sec02 .question-list dd .error{
  margin-bottom: 0.5em;
  width: 100%;
  color: #d7005b;
}
#detox #sec02 .submit input{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  opacity: 0;
}
@media print, screen and (min-width: 641px){
  #detox #sec02{
    padding-top: 120px;
    background-image: url(../img_detox/detox_bg02.png);
  }
  #detox #sec02 form{
    position: relative;
    padding-bottom: 142px;
    background: url(../img_detox/sec02_bg02_pc.png) center bottom no-repeat;
    background-size: contain;
  }
  #detox #sec02 .question-list{
    width: 1000px;
    margin: 0 auto 150px;
  }
  #detox #sec02 .question-list dt{
    margin-bottom: 15px;
    font-size: 60px;
  }
  #detox #sec02 .question-list dt .q{
    margin-right: 0.8em;
    color: #40220f;
    font-size: 75px;
    border-bottom: 4px solid #40220f;
  }
  #detox #sec02 .question-list dd{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 165px;
    font-size: 28px;
  }
  #detox #sec02 .question-list dd + dt{
    margin-top: 50px;
  }
  #detox #sec02 .question-list dd input[type=radio]{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
  }
  #detox #sec02 .question-list dd label{
    display: flex;
    align-items: center;
    position: relative;
    height: 50px;
    margin: 15px 0;
    padding-left: 65px;
    cursor: pointer;
  }
  #detox #sec02 .question-list dd label::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background-color: #fff;
    border: 1px  solid #231815;
    border-radius: 50%;
  }
  #detox #sec02 .question-list dd input[type=radio]:checked + label::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 7px;
    display: block;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    background-color: #d7005b;
    border-radius: 50%;
  }
  #detox #sec02 .question-list dd.q1 label{
    width: 33%;
  }
  #detox #sec02 .question-list dd.q1 label:last-child{
    width: 66%;
  }
  #detox #sec02 .question-list dd.q2 label{
    width: 40%;
  }
  #detox #sec02 .question-list dd.q3 label{
    width: 50%;
  }
  #detox #sec02 .question-list dd.q4 label{
    width: 30%;
  }
  #detox #sec02 .question-list dd.q4 label:nth-of-type(even){
    width: 50%;
  }
  #detox #sec02 .question-list dd.q5 label{
    width: 30%;
  }
  #detox #sec02 .question-list dd.q5 label:nth-of-type(even){
    width: 50%;
  }
  #detox #sec02 .question-list dd.q6 label{
    width: 50%;
  }
  #detox #sec02 .question-list dd.q7 label{
    margin-right: .5em;
  }
  #detox #sec02 .question-list dd.q8 label{
    margin-right: .5em;
  }
  #detox #sec02 .question-list dd.q8 label:first-of-type{
    margin-right: 1.5em;
  }
  #detox #sec02 .submit{
    position: relative;
    width: 410px;
    height: 89px;
    margin: 0 auto;
    background: url(../img_detox/sec02_btn01_pc.png) 0 0 no-repeat;
  }
  #detox #sec02 .submit:hover{
    opacity: 0.8;
  }
  #detox #sec02 .submit input{
    cursor: pointer;
  }
}
@media print, screen and (min-width: 1194px){
  #detox #sec02 form{
    background-size: auto;
  }
}
@media screen and (max-width: 640px){
  #detox #sec02{
    margin-top: -10.2667%;
    padding: 8.6667vw 5vw 10vw;
    background-image: url(../img_detox/detox_bg02.png);
  }
  #detox #sec02::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 28.5334vw;
    background: url(../img_detox/sec02_bg02_sp.png) center bottom no-repeat;
    background-size: contain;
  }
  #detox #sec02 .question-list{
    width: 100%;
    margin: 0 auto 14vw;
  }
  #detox #sec02 .question-list dt{
    margin-bottom: 6px;
    font-size: 4.5vw;
  }
  #detox #sec02 .question-list dt .q{
    margin-right: 4vw;
    color: #40220f;
    font-size: 6vw;
    border-bottom: 2px solid #40220f;
  }
  #detox #sec02 .question-list dd{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 12vw;
    font-size: 2.7vw;
  }
  #detox #sec02 .question-list dd + dt{
    margin-top: 11px;
  }
  #detox #sec02 .question-list dd input[type=radio]{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
  }
  #detox #sec02 .question-list dd label{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 4vw;
    margin: 4px 0;
    padding-left: 4.8vw;
    line-height: 1.1;
    vertical-align: middle;
    cursor: pointer;
  }
  #detox #sec02 .question-list dd label::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 4vw;
    height: 4vw;
    margin-top: -2vw;
    background-color: #fff;
    border: 1px  solid #231815;
    border-radius: 50%;
  }
  #detox #sec02 .question-list dd input[type=radio]:checked + label::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 1vw;
    display: block;
    width: 2vw;
    height: 2vw;
    margin-top: -1vw;
    background-color: #d7005b;
    border-radius: 50%;
  }
  #detox #sec02 .question-list dd.q1 label{
    width: 33%;
  }
  #detox #sec02 .question-list dd.q1 label:last-child{
    width: 66%;
  }
  #detox #sec02 .question-list dd.q2 label{
    width: 40%;
  }
  #detox #sec02 .question-list dd.q3 label{
    width: 50%;
  }
  #detox #sec02 .question-list dd.q4 label{
    width: 30%;
  }
  #detox #sec02 .question-list dd.q4 label:nth-of-type(even){
    width: 50%;
  }
  #detox #sec02 .question-list dd.q5 label{
    width: 30%;
  }
  #detox #sec02 .question-list dd.q5 label:nth-of-type(even){
    width: 50%;
  }
  #detox #sec02 .question-list dd.q6 label{
    width: 50%;
  }
  #detox #sec02 .question-list dd.q7 label{
    margin-right: 1em;
  }
  #detox #sec02 .question-list dd.q8 label{
    margin-right: 1em;
  }
  #detox #sec02 .question-list dd.q8 label:first-of-type{
    margin-right: 1.5em;
  }
  #detox #sec02 .submit{
    position: relative;
    width: 31.7334vw;
    height: 6.8vw;
    margin: 0 auto;
    background: url(../img_detox/sec02_btn01_sp.png) center center no-repeat;
    background-size: contain;
  }
}
@media screen and (max-width: 374px){
  #detox #sec02 .question-list dd label{
    padding-right: .5em;
  }
}

/* detox result */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&text=0123456789&display=swap');

/* sec01 */
#detox_result #sec01 .box .percent span{
  font-family: 'Roboto', sans-serif;
}
#detox_result #sec01{
  position: relative;
}
@media print, screen and (min-width: 641px){
  #detox_result #sec01{
    background: url(../img_detox/detox_bg01.png) center 0 repeat-y;
    background-size: 100% auto;
  }
  #detox_result #sec01::after{
    content: '';
    position: absolute;
    bottom: -32px;
    left: 0;
    display: block;
    width: 100%;
    height: 52px;
    background: url(../img_detox/line_grass.png) center 0 repeat-x;
    z-index: 1;
  }
  #detox_result #sec01 .box{
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
  }
  #detox_result #sec01 .box .result{
    position: relative;
    z-index: 1;
  }
  #detox_result #sec01 .box .percent{
    position: absolute;
    top: 19.827583%;
    left: 6.769231%;
    display: block;
    width: 31.846154%;
    height: 25.492611%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 2;
  }
  #detox_result #sec01 .box .percent span{
    position: absolute;
    bottom: -8px;
    left: 0;
    display: block;
    width: 100%;
    padding-right: .5em;
    font-size: 76px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
  }
  #detox_result #sec01 .box .percent-0{background-image: url(../img_detox/result/percent_0_pc.png);}
  #detox_result #sec01 .box .percent-3{background-image: url(../img_detox/result/percent_3_pc.png);}
  #detox_result #sec01 .box .percent-4{background-image: url(../img_detox/result/percent_4_pc.png);}
  #detox_result #sec01 .box .percent-5{background-image: url(../img_detox/result/percent_5_pc.png);}
  #detox_result #sec01 .box .percent-6{background-image: url(../img_detox/result/percent_6_pc.png);}
  #detox_result #sec01 .box .percent-7{background-image: url(../img_detox/result/percent_7_pc.png);}
  #detox_result #sec01 .box .percent-8{background-image: url(../img_detox/result/percent_8_pc.png);}
  #detox_result #sec01 .box .sns{
    position: absolute;
    right: 23.461539%;
    bottom: 7.758621%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    align-content: space-between;
    width: 31.230769%;
    height: 20.566503%;
    z-index: 3;
  }
  #detox_result #sec01 .box .sns .title{
    width: 100%;
  }
  #detox_result #sec01 .box .sns .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  #detox_result #sec01 .box .sns .list li{
    width: 23.6454%;
  }
}
@media print, screen and (min-width: 1301px){
  #detox_result #sec01 .box .percent span{
    bottom: -10px;
    font-size: 94px;
  }
}
@media screen and (max-width: 640px){
  #detox_result #sec01::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    display: block;
    width: 100%;
    height: 20px;
    background: url(../img_detox/line_grass.png) center 0 repeat-x;
    background-size: auto 100%;
    z-index: 1;
  }
  #detox_result #sec01 .box{
    position: relative;
  }
  #detox_result #sec01 .box .percent{
    position: absolute;
    top: 12.8vw;
    left: 0;
    display: block;
    width: 100%;
    height: 27.6vw;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 2;
  }
  #detox_result #sec01 .box .percent span{
    position: absolute;
    left: 0;
    bottom: -5%;
    display: block;
    width: 100%;
    padding-right: 0.5em;
    font-size: 12vw;
    font-weight: bold;
    text-align: center;
    line-height: 1;
  }
  #detox_result #sec01 .box .sns{
    position: absolute;
    left: 12.1vw;
    bottom: 4.5vw;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    align-content: space-between;
    width: 39.7vw;
    height: 16.4vw;
    z-index: 3;
  }
  #detox_result #sec01 .box .sns .title{
    width: 100%;
  }
  #detox_result #sec01 .box .sns .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  #detox_result #sec01 .box .sns .list li{
    width: 23.489933%;
  }
}
/* sec02 */
#detox_result #sec02 .box{
  background-color: rgba(255,255,255,0.5);
}
@media print, screen and (min-width: 641px){
  #detox_result #sec02{
    padding: 75px 10px 70px;
    background-image: url(../img_detox/detox_bg02.png);
  }
  #detox_result #sec02 .box{
    max-width: 1040px;
    margin: 0 auto 90px;
    padding: 40px 20px;
    border-radius: 40px;
  }
  #detox_result #sec02 .box .wrap{
    max-width: 897px;
    margin: 0 auto;
  }
  #detox_result #sec02 .advice{
    margin: 0 7px 30px;
  }
  #detox_result #sec02 .advice .sub_title{
    margin-bottom: 25px;
  }
  #detox_result #sec02 .advice .text{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
  }
  #detox_result #sec02 .point{
    position: relative;
    min-height: 277px;
    margin: 0 7px 45px;
  }
  #detox_result #sec02 .point .sub_title{
    margin-bottom: 15px;
  }
  #detox_result #sec02 .point .img{
    position: absolute;
    right: 0;
    top: 47px;
  }
  #detox_result #sec02 .point .text{
    padding-right: 250px;
  }
  #detox_result #sec02 .point .text .subject{
    margin-bottom: 10px;
    font-size: 27px;
    font-weight: bold;
    line-height: 1;
  }
  #detox_result #sec02 .point .text .body{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
  }
  #detox_result #sec02 .item .btn01{
    width: 416px;
    margin: -50px auto 0;
  }
  #detox_result #sec02 .bn01{
    max-width: 1040px;
    margin: 0 auto 75px;
    background-color: #fff;
  }
  #detox_result #sec02 .btn02{
    width: 328px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 640px){
  #detox_result #sec02{
    padding: 6.4vw 6.4vw 8vw;
    background-image: url(../img_detox/detox_bg02.png);
  }
  #detox_result #sec02 .box{
    margin-bottom: 13vw;
    padding: 4.5vw;
    border-radius: 5vw;
  }
  #detox_result #sec02 .advice{
    margin-bottom: 4.4vw;
  }
  #detox_result #sec02 .advice .sub_title{
    width: 41.3334vw;
    margin-bottom: 2.6vw;
  }
  #detox_result #sec02 .advice .text{
    font-size: 3.6vw;
    font-weight: bold;
    line-height: 1.6;
  }
  #detox_result #sec02 .point{
    margin-bottom: 6vw;
  }
  #detox_result #sec02 .point .sub_title{
    width: 40.04vw;
    margin-bottom: 2.6vw;
  }
  #detox_result #sec02 .point .img{
    float: right;
    width: 30.6667vw;
    margin-left: 3.2vw;
    margin-bottom: 3.2vw;
  }
  #detox_result #sec02 .point .text{
    font-size: 3.6vw;
    font-weight: bold;
  }
  #detox_result #sec02 .point .text .subject{
    margin-bottom: 10px;
    display: inline-block;
    line-height: 1;
    border-bottom: 2px dotted #e60012;
  }
  #detox_result #sec02 .point .text .body{
    line-height: 1.6;
  }
  #detox_result #sec02 .item .btn01{
    width: 55.46667vw;
    margin: 8vw auto 0;
  }
  #detox_result #sec02 .bn01{
    margin: 0 auto 10vw;
  }
  #detox_result #sec02 .btn02{
    width: 43.7334vw;
    margin: 0 auto;
  }
}