@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* CSS Document */
body{margin-top: 0;}

#pccp{
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
	text-align: center;
}
#pccp img.max{
	width: 100%;
}
#pccp .yugo{
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
#pccp a:hover{
	opacity: .7;
}
#pccp .txt_l{
	text-align: left;
}
#pccp .fl_l{
	float: left;
}

/* section */
#pccp section{
	position: relative;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

/* sec_1 */
#pccp .sec_1 .logo{
    margin: 50px auto 40px;
    max-width: 321px;
}
/* sec_2 */
#pccp .sec_2 h3{
    position: absolute;
    top: 95px;
    left: 80px;
    font-size: 24px;
	font-weight:bold;
    letter-spacing: 2px;
}
#pccp .sec_2 p{
    position: absolute;
    top: 150px;
    left: 80px;
    font-size: 16px;
    line-height: 2.6;
    letter-spacing: 2px;
}
#pccp .sec_2 p span{
    vertical-align: top;
	font-size: 12px;
    font-weight: bold;
}
#pccp .sec_2 p.tip{
    position: absolute;
    top: 380px;
    left: 80px;
    font-size: 13px;
}

/* item_cart */
#pccp .item_cart{
    width: 100%;
    margin: 50px auto 100px;
    padding: 50px 0;
    background: #f4f4f4;
}
#pccp .item_cart section{
    max-width: 680px;
	/*max-width: 800px;*/
    display: flex;
    align-items: flex-start;
}
#pccp .item_cart section img{
    max-width: 250px;
}
#pccp .item_cart div{
    margin-left: 40px;
}
#pccp .item_cart p{
    line-height: 1.8;
    font-size: 16px;
}
#pccp .item_cart .item_name{
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0 0;
}
#pccp .item_cart .item_spec{
    font-size: 16px;    
}
#pccp .item_cart .item_btn{
    margin-top: 50px;
}
#pccp .item_cart .item_btn a{
    display: block;
    width: 300px;
    padding: 12px 0 10px;
    background: #000;
    color: #fff;
}
#pccp .item_cart .pre .item_name{
	margin: 0;
}
#pccp .item_cart .pre .item_shop{
	margin-top: 5px;
}
#pccp .item_cart .pre .item_cap{
	font-size: 14px;

}
#pccp .item_cart .pre dl{
	display: flex;
	margin-top: 15px;
}
#pccp .item_cart .pre dt{
    width: 40%;
    padding: 3px 0;
	background: #000;
    color: #fff;
}
#pccp .item_cart .pre dd{
	position: relative;
    width: 60%;
    padding: 3px 0;
	background: #fff;
}
#pccp .item_cart .pre dd span{
	position: absolute;
    top: 0;
    left: 218px;
	font-size: 10px;
    font-weight: bold;
}

/* sec_3 */
#pccp .sec_3 h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 95px 0 30px;
}
#pccp .sec_3 ul{
	max-width: 500px;
    margin: 0 auto;
}
#pccp .sec_3 li{
	position: relative;
	display: flex;
	margin: 33px 0;
	padding-left: 43px;
}
#pccp .sec_3 li div{
	margin-right: 32px;
    transform: skewX(-15deg);
    font-weight: bold;
}
#pccp .sec_3 li p{
    font-size: 18px;
    letter-spacing: 1px;
}
#pccp .sec_3 li p span{
	vertical-align: text-top;
    font-size: 13px;
	font-weight: bold;
}
#pccp .sec_3 li::after{
    content: "";
	background: url("https://goodnature.itembox.design/item/f/img/deepgel_lp/deepgel_pc_03.png") no-repeat;
    position: absolute;
    background-size: 100%;
    top: -6px;
    left: 0;
    width: 33px;
    height: 30px;
}
#pccp .sec_3 .cap{
	max-width: 500px;
    margin: 0 auto;
	font-size: 13px;
}

/* sec_3-2 */    
#pccp .sec_3-2{
}
#pccp .sec_3-2 h3 {
	font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 95px 0 30px;
}
#pccp .sec_3-2 ul {
	display: flex;	
}
#pccp .sec_3-2 li {
	width: 100%;
	margin: 0 1px;
	padding: 40px 25px 30px;
	background: #f4f4f4;
}
#pccp .sec_3-2 li div {
    font-size: 20px;
	font-weight: bold;
    letter-spacing: 2px;
}
#pccp .sec_3-2 li div span{
	margin-top: 10px;
	display: block;
	color: #e08761;
	font-size: 14px;
    letter-spacing: 0.5px;
	transform: skewX(-15deg);
}
#pccp .sec_3-2 li p{
	margin-top: 30px;
	line-height: 1.8;
}

/* possible */   
#pccp .possible{
	position: relative;
	margin: 100px auto 0;
}
#pccp .possible h3 {
	position: absolute;
    top: 47px;
    left: 110px;
    font-size: 24px;
	font-weight: bold;
}
#pccp .possible .txt_small {
	display: block;
    margin-bottom: 10px;
    font-size: 17px;
    color: #fff;
	letter-spacing: 1px;
}    
#pccp .possible ul{
	display: flex;
	padding: 95px 70px 65px;
	background: #f8f6ef;
}
#pccp .possible li{
	width: 100%;
	padding: 0 30px;
}
#pccp .possible li p{
	margin-top: 27px;
    line-height: 1.8;
}
#pccp .possible li p span{
	font-size: 20px;
    font-weight: bold;
}
#pccp .possible li .cap{
	margin-top: 10px;
}

/* eva */   
#pccp .eva{}
#pccp .eva h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 95px 0 30px;
}
#pccp .eva ul{
	display: flex;
	max-width: 950px;
	margin: auto;	
}
#pccp .eva li{
	position: relative;
	width: 100%;
	padding: 0 25px;
}
#pccp .eva li .qno{
	width: 70px;
	float: left;
}
#pccp .eva li p{
	padding-left: 90px;
}
#pccp .eva li .crc{
	padding: 35px 0 0;
    text-align: center;
    max-width: 326px;
    margin: auto;
}
#pccp .eva .notes{
    margin-top: 30px;
    padding-right: 100px;
    font-size: 14px;
	text-align: right;
}

/* sec_4 */
#pccp .sec_4{
	margin: 85px auto 100px;
    background: #f8f6ef;
}
#pccp .sec_4 h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    position: absolute;
    top: 45px;
    left: 100px;
}
#pccp .sec_4 .txt_small{
    display: block;
    font-size: 17px;
    color: #fff;
    margin-bottom: 10px;
	letter-spacing: 1px;
}
#pccp .sec_4 .sec4_inner{
    display: block;
    width: 900px;
    margin: 0 auto;
    padding: 0 0 100px;
    overflow: hidden;
}
#pccp .sec_4 dl{
	display: flex;
	margin-top: 60px;
}
#pccp .sec_4 dt{
	width: 430px;
	margin-right: 20px;
}
#pccp .sec_4 dd{
	width: 430px;
    margin-left: 20px;
}
#pccp .sec_4 p{
	font-size: 16px;
	line-height: 2;
}
#pccp .sec_4 .sec4_p{
	margin-top: 30px;
}
#pccp .sec_4 h4{
    position: relative;
    display: flex;
	align-items: center;
}
#pccp .sec_4 h4 p{
    padding: 0 0 0 35px;    
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
}
#pccp .sec_4 h4 p span{
    font-size: 14px;
    vertical-align: top;
}
#pccp .sec_4 h4 p.nmb{
    padding: 0;
    font-size: 60px;
    border-bottom: 2px solid #000;
    line-height: 1.2;
    letter-spacing: 0;
}
#pccp .sec_4 h4 p.cap{
    position: absolute;
    top: 80px;
    left: 75px;
    font-size: 14px;
    font-weight: normal;
}
#pccp .sec_4 .mt_adj{
	margin-top: 100px;
}

/* sec_5 */
#pccp .sec_5{
	max-width: 1000px;
}
#pccp .sec_5 h3 {
    position: absolute;
    top: 100px;
	width: 100%;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}
#pccp .sec_5 p {
    position: absolute;
    top: 175px;
    left: 80px;
    font-size: 16px;
    line-height: 2;
}
#pccp .sec_5 .img_gh{
    position: absolute;
    top: 370px;
    left: 122px;
    width: 360px;
}

/* point3 */
#pccp .point3{}
#pccp .point3 h3 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 95px 0 40px;
}
#pccp .point3 ul{
	display: flex;
}
#pccp .point3 li{
	width: 100%;
	margin: 0 30px;
}
#pccp .point3 li p{
	line-height: 1.8;
}
#pccp .point3 li .ttl{
	margin: 15px auto;
	font-size: 20px;
	font-weight: bold;
}

/* component */
#pccp .component{
	margin-bottom: 95px;
}
#pccp .component div {
	position: relative;
    margin: 105px 0 0;
    padding: 52px;
    border: 1px solid #000;
}
#pccp .component h3 {
    position: absolute;
    bottom: 260px;
    left: 400px;
    width: 300px;
    padding: 15px;
    background: #fff;
    z-index: 100;
    font-size: 20px;
    font-weight: bold;
	line-height: 1;
    letter-spacing: 2px;
}
#pccp .component h3 span{
	font-size: 14px;
	vertical-align: text-top;
}
#pccp .component .exp{
    margin-top: 8px;
	font-size: 14px;
    font-weight: normal;
    letter-spacing: 0;
}
#pccp .component ul {
    display: flex;
	max-width: 936px;
    margin: auto;
}
#pccp .component li {
	width: 100%;
	padding: 0 18px;
	line-height: 2;
}
#pccp .component .notes{
	text-align: right;
    font-size: 16px;
    margin-top: 10px;
}

/* sec_6 */
#pccp .sec_6{
}
#pccp .sec_6 h3{
    margin-bottom: 43px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}
#pccp .sec_6 ul{
    display: flex;
    margin: 43px 0 60px;
}
#pccp .sec_6 li{
    position: relative;
    margin: 0 6px;
}
#pccp .sec_6 li img{
    max-width: 175px;
}
#pccp .sec_6 li p{
    position: absolute;
    top: 88%;
    width: 100%;
    font-size: 16px;
}
#pccp .sec_6 li .white{
	color: #fff;
}

/* sec_7 */
#pccp .sec_7{
}
#pccp .sec_7 h3{
	font-size: 24px;
    font-weight: bold;
    line-height: 1.8;
    margin: 95px 0 40px;
}
#pccp .sec_7 ul{
    display: flex;
	justify-content: space-between;	
}
#pccp .sec_7 li{
	width: 340px;
}
#pccp .sec_7 p{
	line-height: 1.8;
	margin-top: 15px;
}
#pccp .sec_7 p span{
	display: block;
	padding-bottom: 8px;
	font-size: 20px;
	font-weight: bold;
}


/* sec_8 */
#pccp .sec_8{
    margin: 80px auto 0;
}
#pccp .sec_8 h3{
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
}
#pccp .sec_8 .sub{
    width: 680px;
    margin: 30px auto;
    line-height: 2;
}
#pccp .sec_8 ul{
	display: flex;
    margin: 4% auto 7%;
    overflow: hidden;
}
#pccp .sec_8 li{
    width: 100%;
    margin-bottom: 4%;
    padding: 0 5px;
}
#pccp .sec_8 li p{
    margin-top: 5px;
	font-size: 14px;
    line-height: 1.5;
}

/* footer */
#pccp #footer{
	margin: 100px 0 0;
	padding: 30px 0;
	font-size: 14px;
    background: #333;
}
#pccp #footer{
	line-height: 2;
	color: #fff;
}
#pccp #footer a{
	color: #fff;
}

#pccp .pc_none{display: none;}
#pccp .sp_none{display: block;}

/* ==============================================
 SP
============================================== */
@media screen and (max-width: 959px) {
#pccp .pc_none{display: block;}
#pccp .sp_none{display: none;}    

#pccp img{width: 100%;}    

#pccp .btn_mini{
	width: 45%;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 9999;	
}
#fixedBox{
	width: 45%;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 9999;	

}
#pccp .fixed{
	width: 45%;
    position: fixed;
    bottom: 5px;
	top:88%;
    right: 5px;
    z-index: 9999;	
}

/* sec_1 */
#pccp .sec_1 .logo{
    margin: 10% auto;
	width: 50%;
}
    
/* sec_2 */
#pccp .sec_2 h3{
    top: 10%;
    left: 13%;
    font-size: 4.8vw;
    text-align: left;
    line-height: 1.5;
}
#pccp .sec_2 p{
    top: 22%;
    left: 0;
    font-size: 3.7vw;
    padding: 0 13%;
    line-height: 2;
    letter-spacing: 0;
}
#pccp .sec_2 p span{
	font-size: 2.2vw;
    margin-left: -2%;
}
#pccp .sec_2 p.tip{
	top: 56%;
    left: 0;
    font-size: 2.6vw;
}
#pccp .sec_2 p.btn_mini{
	top: -5%;
    left: 52%;
    font-size: 3.7vw;
    padding: 0;
    line-height: 0;
    letter-spacing: 0;
    width: 45%;
}

/* item_cart */
#pccp .item_cart{
    margin: 20% auto;
    padding: 13%;
}    
#pccp .item_cart section {
    display: block;
}
#pccp .item_cart div {
    margin-left: 0;
}
#pccp .item_cart img{
    width: 80%;
    margin: auto;
}     
#pccp .item_cart p {
    font-size: 3.8vw;
    margin-top: 8%;
}
#pccp .item_cart .pre .item_cap {
    font-size: 2.8vw;
    margin: 0 0 8%;
}
#pccp .item_cart .item_name {
    font-size: 5.5vw;
    margin: 3% 0;
}    
#pccp .item_cart .item_spec {
    font-size: 3.8vw;
}    
#pccp .item_cart .item_btn {
    margin-top: 5%;
}
#pccp .item_cart .item_btn a {
    width: 100%;
    padding: 5% 0;
}    
#pccp .item_cart .pre .item_name{
	margin-top: 5%;
}
#pccp .item_cart .pre .item_spec{
	margin-top: 2%;
}
#pccp .item_cart .pre .item_shop{
	margin-top: 5px;
}
#pccp .item_cart .pre dl{
	margin-top: 4%;
}
#pccp .item_cart .pre dt{
    padding: 1% 0;
	font-size: 2.8vw;
}
#pccp .item_cart .pre dd{
    padding: 1% 0;
	font-size: 2.8vw;
	text-align: left;
    text-indent: 10%;
}
#pccp .item_cart .pre dd span{
	font-size: 2.2vw;
    left: 60%;
	width: 20%;
}

/* sec_3 */    
#pccp .sec_3 h3 {
    font-size: 5.5vw;
    margin: 20% 0 10%;
}
#pccp .sec_3 div {
}
#pccp .sec_3 ul {
	width: 74%;
}
#pccp .sec_3 li {
	margin: 5% 0;
    padding-left: 10%;
    align-items: center;
}
#pccp .sec_3 li div{
	margin-right: 8%;
    font-size: 2.8vw;
}
#pccp .sec_3 li p {
    font-size: 3.4vw;
    line-height: 1.5;
}
#pccp .sec_3 li p span{
    font-size: 2.2vw;
}
#pccp .sec_3 li::after{
	top: 26%;
    left: 0;
    width: 7%;
    height: 100%;
}
#pccp .sec_3 .cap{
	font-size: 2.8vw;
    padding-left: 13%;
    margin-top: 7%;
}

/* sec_3-2 */    
#pccp .sec_3-2{}
#pccp .sec_3-2 h3 {
    font-size: 5vw;
    margin: 20% 0 10%;
}
#pccp .sec_3-2 div {
	font-size: 4.2vw;
}
#pccp .sec_3-2 ul {
	flex-wrap: wrap;
}
#pccp .sec_3-2 li {
	width: 49%;
    margin: 0.5%;
	padding: 6% 4% 5%;
}
#pccp .sec_3-2 li:last-child{
	width: 100%;
}
#pccp .sec_3-2 li div {
}
#pccp .sec_3-2 li div span{
	font-size: 2.8vw;
    margin-top: 3px;
}
#pccp .sec_3-2 li p{
	margin-top: 15px;
	font-size: 3.8vw;
}

/* possible */   
#pccp .possible{
}
#pccp .possible h3 {
    font-size: 5.5vw;
    top: 3%;
    left: 10%;
}
#pccp .possible .txt_small {
    font-size: 3.2vw;
}    
#pccp .possible ul{
	padding: 15% 5% 10%;
    flex-wrap: wrap;
}
#pccp .possible li{
}
#pccp .possible li p{
	margin-top: 7%;
	margin-bottom: 10%;
}
#pccp .possible li p span{
    font-size: 4.8vw;
    font-weight: bold;
}
#pccp .possible li .cap{
	margin-top: -8%;
}

/* eva */   
#pccp .eva{}
#pccp .eva h3 {
    font-size: 5.5vw;
    margin: 20% 0 10%;
	line-height: 1.5;
}
#pccp .eva ul{
	flex-wrap: wrap;
}
#pccp .eva li{
	padding: 0 13%;
}
#pccp .eva li .qno{
	width: 18%;
	padding-top: 1%;
}
#pccp .eva li p{
	padding-left: 24%;
}
#pccp .eva li .crc{
	width: 100%;
    padding: 8% 4% 15%;
}
#pccp .eva .notes {
    margin-top: -5%;
    padding-right: 6%;
    font-size: 2.8vw;
}

/* sec_4 */
#pccp .sec_4{
	margin: 20% auto;
}
#pccp .sec_4 h3 {
    font-size: 5.5vw;
    top: 1.7%;
    left: 10%;
    line-height: 1.2;
}
#pccp .sec_4 .txt_small {
    font-size: 3.2vw;
}    
#pccp .sec_4 .sec4_inner {
    width: 74%;
    padding: 0 0 15%;
}
#pccp .sec_4 .sec4_inner img{
}
#pccp .sec_4 dl{
	flex-wrap: wrap;
}
#pccp .sec_4 dt{
	width: 100%;
    margin: 0;
}
#pccp .sec_4 dd{
	width: 100%;
    margin: 5% 0 0;
}
#pccp .sec_4 p{
	font-size: 3.7vw;
}
#pccp .sec_4 .sec4_p{
	margin-top: 5%;
	line-height: 1.8;
}
#pccp .sec_4 h4 {
    width: 100%;
    margin: 0 auto 5%;
    flex-wrap: wrap;
}
#pccp .sec_4 h4 p {
	width: 100%;
    padding: 8% 0 0 0;
    font-size: 4.8vw;
	letter-spacing: -0.5px;
}
#pccp .sec_4 h4 p span{
    font-size: 2.2vw;
    vertical-align: top;
}
#pccp .sec_4 h4 p.nmb {
    font-size: 10vw;
    width: 18%;
}
#pccp .sec_4 h4 p.cap {
    top: 83%;
    left: 0;
    font-size: 2.2vw;
}
#pccp .sec_4 .mt_adj {
    margin-top: 20%;
}

/* sec_5 */
#pccp .sec_5{}
#pccp .sec_5 h3{
    top: 7%;
    left: 0;
    padding: 0 13%;
    font-size: 4.8vw;
	line-height: 1.3;
}    
#pccp .sec_5 p{
    top: 17%;
    left: 0;
    font-size: 3.8vw;
    padding: 0 13%;
    line-height: 2;
    letter-spacing: 0;
}    

/* point3 */
#pccp .point3{}
#pccp .point3 h3 {
	font-size: 5vw;
    font-weight: bold;
    line-height: 1.5;
    margin: 20% 0 0;
}
#pccp .point3 ul{
	flex-wrap: wrap;
}
#pccp .point3 li{
	margin: 0 13%;
}
#pccp .point3 li img{
	width: 80%;
	margin-top: 15%;
}

#pccp .point3 li p{
}
#pccp .point3 li .ttl{
	font-size: 4vw;
}

/* component */
#pccp .component{}
#pccp .component div {
    margin: 15% 10% 0;
    padding: 13% 3% 3%;
}
#pccp .component h3 {
    bottom: 94.5%;
    left: 15%;
    width: 70%;
    padding: 1% 3%;
    font-size: 4.2vw;
    line-height: 1;
    letter-spacing: 0px;
}
#pccp .component h3 span{
	font-size: 14px;
	vertical-align: text-top;
}
#pccp .component .exp{
    margin-top: 8px;
	font-size: 2.2vw;
    font-weight: normal;
    letter-spacing: 0;
}
#pccp .component ul {
    flex-wrap: wrap;
}
#pccp .component li {
	width: 50%;
    padding: 0 4% 5%;
	font-size: 2.8vw;
    line-height: 1.5;
	letter-spacing: 0;
}
#pccp .component .notes{
	font-size: 2.8vw;
    margin-top: 8px;
    padding-right: 10%;
}

/* sec_6 */
#pccp .sec_6{
}
#pccp .sec_6 h3{
    margin-bottom: 5%;
    font-size: 5vw;
    line-height: 1.8;
}
#pccp .sec_6 p.sub{
    font-size: 3.8vw;
    padding: 0 10%;
    line-height: 2.2;
}
#pccp .sec_6 ul{
    flex-wrap: wrap;
    margin: 5% 0 15%;
	padding: 0 1%;
    overflow: hidden;
}
#pccp .sec_6 li{
    width: calc(100% / 3);
    margin: 1.5% 0;
    padding: 0 1.5%;
}
#pccp .sec_6 li img{
    width: 100%;
}
#pccp .sec_6 li p{
    width: 90%;
    margin: auto;
    font-size: 2.8vw;
    line-height: 1.5;
    top: 86%;
}
    
/* sec_7 */
#pccp .sec_7{
}
#pccp .sec_7 h3 {
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.8;
    margin: 15% 0 10%;
}
#pccp .sec_7 ul{
    justify-content: inherit;
    flex-wrap: wrap;
	padding: 0 13%;
}
#pccp .sec_7 li{
	width: 100%;
}
#pccp .sec_7 p{
	margin: 3% 0 10%;
}
#pccp .sec_7 p span{
	padding-bottom: 2%;
    font-size: 4vw;
}

/* sec_8 */
#pccp .sec_8{
    margin: 15% auto 0;
}
#pccp .sec_8 h3{
    font-size: 5.5vw;
    line-height: 1.5;
}
#pccp .sec_8 h3 span{
    font-size: 3.8vw;
}
#pccp .sec_8 .sub{
    width: 100%;
    margin: 5% auto;
    padding: 0 13%;
    line-height: 1.5;
    letter-spacing: 2px;
}
#pccp .sec_8 ul {
    flex-wrap: wrap;
	padding: 0 1%;
}
#pccp .sec_8 li{
	width: calc(100% / 3);
    padding: 0 1%;
}
#pccp .sec_8 li p{
	margin-top: 1%;
    font-size: 2.8vw;
}
    

    
    
}/* @media end */