@charset "Shift_JIS"; /**/
/* BASE */
.pB1{padding-bottom: 1%;}
.pB3{padding-bottom: 3%;}
.body_sph .pB3{padding-bottom: 5%;}
.pB5{padding-bottom: 5%;}
.pB7{padding-bottom: 7%;}
.body_sph .pB7{padding-bottom: 5%;}
.body_sph .w60{width: 60%;}
.body_sph .w85{width: 85%;}
.body_sph .w90{width: 90%;}

/**********************
診断結果共通 
**********************/
div[id^="skintype_p_"]{
    padding: 5% 3%;
    margin-bottom: 7%;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}

.body_sph div[id^="skintype_p_"] {
    margin: 0 -2%;
    background-size: 70%;
}
#skintype_top{
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.body_sph #skintype_top {
    margin: 0 -2%;
}


/**********************
質問ページ
**********************/
#skintype_question{
    padding: 5%;
    background-image: url("image/bg_all.png");
    color: #333;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
}
.body_sph #skintype_question{
    padding: 5% 3%;
    margin: 0 -2%;
    background-size: contain;
}
.skintype_question_inner{
    padding: 7% 0 10%;
    background: rgba(255,255,255,0.9);
    box-shadow: 3px 3px 20px #eee;
}
.body_sph .skintype_question_inner{
    box-shadow: 3px 3px 7px #eee;
}
.skintype_question_inner p {
    font-size: 3.5em;
    font-weight: lighter;
    margin-bottom: 0;
}
.body_sph .skintype_question_inner p {
    font-size: 1.5em;
}
.skintype_question_inner img{
    display: block;
    margin: 3% auto 0;
}
.body_sph .skintype_question_inner img{
    width: 93%;
    margin: 3% auto 0;
}
.skintype_question_inner button{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-radius: 100%;
    background-color: transparent;
    font-size: 1.5em;
    color: #333;
    width: calc(70%/2);
}
.body_sph .skintype_question_inner button{
    font-size: 1.0em;
    width: calc(85%/2);
}
.skintype_question_inner button:first-child{
    margin-right: 3%;
    border: 1px solid #d7535f;
    transition: 0.3s;
}
.skintype_question_inner button:first-child:hover{
    background: rgba(235,74,89,0.8);
    opacity: 0.8;
    color: #fff;
    cursor: pointer;
}
.skintype_question_inner button:last-child{
    border: 1px solid #448fcd;
    transition: 0.3s;
}
.skintype_question_inner button:last-child:hover{
    background: rgba(68,143,205,0.8);
    opacity: 0.8;
    color: #fff;
    cursor: pointer;
}
.skintype_question_inner button:before{
    display: block;
    content: '';
    padding-top: 100%;
}
.skintype_question_button{
    display: flex;
    justify-content: center;
    margin: 5% 0;
}
.skintype_question_button.q1{
    font-size: 1.5em;
}
.body_sph .skintype_question_button.q1{
    font-size: 1.2em;
}
/**********************
診断結果ページ
**********************/
#skintype_p_comb{
    color: #29164e;
    background-image: url("image/bg_c.png");
}
#skintype_p_dry{
    color: #4e1f16;
    background-image: url("image/bg_d.png");
}
#skintype_p_nomal{
    color: #33621d;
    background-image: url("image/bg_n.png");
}
#skintype_p_oily{
    color: #9e2f05;
    background-image: url("image/bg_o.png");
}
.skintype_contents{
    padding-top: 7%;
    background: rgba(255,255,255,0.8);
}

.skintype_contents .txt01 p{
    margin: 2% 7% 7%;
    font-size: 1.1em;
    line-height: 1.7;
    text-align: left;
}
.body_sph .skintype_contents .txt01 p{
    margin: 2% 6% 7% 7%;
    font-size: 0.8em;
}
.skintype_contents .txt02 {
    margin: 0 5%;
    text-align: right;
}
.body_sph .skintype_contents .txt02 {
    margin: 0 3%;
}
.skintype_contents .txt02 img{
    text-align: right;
}
.body_sph .skintype_contents .txt02 img{
    width: 95%;
}
.skintype_contents .txt02 p{
    padding: 4% 4% 5%;
    border-radius: 0 0 7px 7px;
    line-height: 1.7;
    font-size: 1.1em;
    text-align: left;
}
.body_sph .skintype_contents .txt02 p{
    font-size: 0.8em;
}
#skintype_p_comb .txt02 p{background: rgba(231,231,244,0.7);}
#skintype_p_dry .txt02 p{background: rgba(244,233,231,0.7);}
#skintype_p_nomal .txt02 p{background: rgba(236,245,233,0.7);}
#skintype_p_oily .txt02 p{background: rgba(255,235,213,0.7);}
.skintype_contents .txt02 p span {
    display: block;
    border-bottom: 2px solid #fff;
    margin-bottom: 2%;
    padding-bottom: 2%;
}
.body_sph .skintype_contents .txt02 p span {
    margin-bottom: 3%;
    padding: 1% 0 3%;
}
.skintype_contents .txt02 p span img {
    width: 70%;
}
.body_sph .skintype_contents .txt02 p span img {
    width: 95%;
}
/* シリーズ一覧 */
.skintype_contents img.series_title {
    padding: 10% 0% 5%;
}
#skintype_p_dry img.series_title {
    filter: hue-rotate(110deg);
}
#skintype_p_nomal img.series_title {
    filter: hue-rotate(245deg);
}
#skintype_p_oily img.series_title {
    filter: hue-rotate(80deg);
}
.skintype_contents div[class^="series0"] {
    padding-bottom: 12%;
}
.body_sph .skintype_contents div[class^="series0"] {
    padding-bottom: 15%;
}
.skintype_contents div[class^="series0"] h4{
    padding-top: 3%;
    font-size: 1.5em;
}
.body_sph .skintype_contents div[class^="series0"] h4{
    padding-top: 0%;
    margin-bottom: 1%;
    font-size: 1.1em;
}
.skintype_contents div[class^="series0"] p{
    line-height: 1.7;
}
.skintype_contents div[class^="series0"] .attention{
    padding-right: 7em;
    margin: -2% 0 3%;
    text-align: right;
}
.body_sph .skintype_contents div[class^="series0"] .attention{
    font-size: 0.6em;
}
.body_sph .skintype_contents div[class^="series0"] p{
    font-size: 0.8em;
    padding: 0 7%;
}
.skintype_contents div[class^="series0"] button,
#skintype_top button{
    position: relative;
    padding: 2% 12% 2% 8%;
    border: none;
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
}
#skintype_top button{
    display: block;
    padding: 3% 17% 3% 13%;
    margin: 5% auto 2%;
    font-size: 1.5em;
}
.body_sph .skintype_contents div[class^="series0"] button {
    padding: 3% 15% 3% 10%;
    font-size: 1.0em;
}

.body_sph #skintype_top button {
    padding: 4% 15% 4% 10%;
    width: 70%;
    font-size: 1.2em;
}
.skintype_contents span.icon-navi_right{
    position: absolute;
    top: 35%;
    right: 5%;
}
#skintype_top span.icon-navi_right{
    position: absolute;
    top: 32%;
    right: 5%;
}
#skintype_p_comb  div[class^="series0"] button {background-color: #7d6e9d;}
#skintype_p_dry  div[class^="series0"] button {background-color: #a26c61;}
#skintype_p_nomal  div[class^="series0"] button {background-color: #74a360;}
#skintype_p_oily  div[class^="series0"] button {background-color: #e36d3e;}
#skintype_top button {
    background-image: radial-gradient(circle at 100% 0%, rgba(162, 139, 202, 1) 7%, rgba(100, 113, 197, 1));
  box-shadow: 3px 3px 5px 3px rgba(219, 212, 239, 0.7);
    border-radius: 7px;
}
.body_sph #skintype_top button {
    margin: 7% auto 3%;
    background-image: radial-gradient(circle at 100% 0%, rgba(162, 139, 202, 1) 7%, rgba(100, 113, 197, 1));
  box-shadow: 3px 3px 5px 3px rgba(219, 212, 239, 0.7);
    border-radius: 7px;
}
/* フッター */
.skintype_footer {
    text-align: center;
}
.body_sph .skintype_footer{
    margin-top: 10%;
}
.skintype_footer p{
    font-size: 1.3em;
}
.body_sph .skintype_footer p{
    font-size: 1.0em;
}
.skintype_footer  button {
    position: relative;
    padding: 2% 10%;
    margin-top: 5%;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    font-size: 1.3em;
    cursor: pointer;
}
.body_sph .skintype_footer  button {
    padding: 3% 15% 3% 10%;
    margin-top: 10%;
    font-size: 1.0em;
}
.skintype_footer span.icon-navi_right {
    position: absolute;
    top: 35%;
    right: 5%;
}
.skintype_other{
    display: flex;
    justify-content: space-around;
}

.snsarea {
	background-color: #eee;
    padding: 5% 0;
    margin-top: 10%;
	text-align:center;
}
.body_sph .snsarea {
    margin: 10% -2% 0;
}
.snsarea p {
	font-size: 1.1em;
	margin-bottom: 3%;
}

.body_pc .snsarea p {
	font-size: 1.4em;
}
.snsbtn {
    margin: 0 auto;
}

.snsbtn p {
	margin-right: 4%;
	display: inline-block;
}

.body_sph .snsbtn p {
	width: 15%;
}

.snsbtn p:last-child {
	margin-right: 0;
}
.snsbtn img {
    width: 82px;
}