body{width:100%; }
body a:hover {
  opacity:0.5;
}

/*汎用テキストボックス*/

.txboxcommon{
    margin-bottom:100px;
    width: 95%;
    margin-left:2.5%;
    max-width:840px ;
    margin:0 auto;
}

.txboxcommon-body{
    padding:5px 30px 30px 30px;
}

.txboxcommon-body .cell_group:first-child .cell{
    border-top:none;
}	

.txboxcommon-body .relative{
    position:relative;
    display:inline-block;
    padding-left:1em;
}

.txboxcommon-body p{
    font-size:11px;
    letter-spacing:0.05em; 
    line-height:1.8;
}

.txboxcommon-body h2{
    font-size:17px; 
    text-align: left; 
    background-color: #F1EEEE; 
    padding: 10px;  
}

.txboxcommon-section{
    margin-top:20px;
    padding-top:13px;
    border-top:1px solid #e8e8e8;
}

.txboxcommon-sectionfst{
    margin-top:20px;
    padding-top:13px;
}

.txboxcommon-section-header .title{
    margin-bottom:5px;
    font-size:14px;
    font-weight:bold;
}

.txboxcommon-section-body{
    padding-top:3px;
}
.txboxcommon-section-body p{
    margin:0;
    line-height:1.8!important;
}

.txboxcommon-section-body ol{
    margin:0;
    padding-left:1em; 
    line-height:1.8!important;
}

.txboxcommon-section-body ul{
    margin:0;
    padding-left:1em;
    line-height:1.8!important;
}

.txboxcommon-section-body ol li{
    font-size:11px; 
    list-style: decimal;
}

.txboxcommon-section-body ul li{
    font-size:11px; 
    list-style:disc ;
}

.txboxcommon-section-body .centerimg{
    width:70%;
    margin-left:15%;
    margin-top: 10px; 
}

.txboxcommon .headlist{
    display: block; 
    padding: 0px 30px 30px 30px;
}

.txboxcommon .headlist li:first-child {
    position: relative;
    padding: 20px;
}

.txboxcommon .headlist li + li {
    position: relative;
    padding: 20px ;
}

.txboxcommon .headlist ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: 30px;
    left: 0em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.txboxcommon-body h5{
    margin-top: 15px;
    margin-bottom: 10px ;
    font-weight: normal;
    font-size:11px;
}

.txboxcommon-section .linkb{
    text-decoration: underline;
    color: #0C23F8;
}	

.txboxcommon h2 {
    font-size:15px;  
    text-align: left; 
    background-color: #F1EEEE; 
    padding: 8px; 
    margin-bottom: 0!important;
}

.txboxcommon-body .twocollist { overflow:auto;}

.txboxcommon-body .twocollist li {
    float:left; 
    width: 50%; 
    margin-top: 15px; 
}

.txboxcommon-body .twocollist li:first-child {
    position: relative;
    padding: 10px;
}

.txboxcommon-body .twocollist li + li {
    position: relative;
    padding: 10px ;
}

.txboxcommon-body .twocollist ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: 18px;
    left: -0.2em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.txboxcommon .readtxt{padding:0px 30px 0px 30px ;}

/*文字調節*/

.kome{font-size: 8px!important; letter-spacing:0.03em;}
.gyutto{letter-spacing:0.02em!important;}
.fonts{font-size: 10px!important;}
.fontlit{font-weight:lighter;}
.textc{text-align: center;}

/*肌診断*/

.sec-mv__image img {
  width: 100%;
  height: auto;
}
.sec-mv__image--02 img {
  width: 100%;
  height: auto;
}

.trial .container{
    margin:0; 
    padding-bottom: 100px;
}
.trial .trial-header h2{margin-left:20px;margin-right:20px}
.trial .trial-header p.img{margin-bottom:0}
.trial .trial-body ul,.trial .trial-body ol{
    list-style:none;
    padding-left:0;}
.trial .trial-body dd{margin:0}
.trial .trial-body a{color:#555}
.trial .trial-body .chart .chart-header h3{
    text-align:center;
    font-size:17px;
    font-weight:500;
    color:#36bebe;
    letter-spacing: 0.3em;}

.trial .trial-body .chart .chart-body ul.enq{
    margin-bottom:50px;
    border:1px solid #e8e8e8;}

.trial .trial-body .chart .chart-body ul.enq li{
    display:none;
    margin-bottom:0;
    padding:20px 25px;
     /*border-bottom:1px solid #e8e8e8;*/}

.trial .trial-body .chart .chart-body ul.enq li:first-child{display:list-item;}
.trial .trial-body .chart .chart-body ul.enq li dl{margin:0;text-align:center;}
.trial .trial-body .chart .chart-body ul.enq li dl dt{
    text-align:center;
    font-size:14px;
    margin-top: 30px; 
    margin-bottom:40px;
}

.trial .trial-body .chart .chart-body ul.enq li dl dd{
    display:inline-block;
    width:48%;
}
.trial .trial-body .chart .chart-body ul.enq li dl dd a{
    display:block;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
    font-size:18px;
    margin-bottom:40px;
	height: 100px;
}

.trial .trial-body .chart .chart-body ul.enq li dl dd.yes a{
	background:#d7f2f2 url(../../../../../assets/images/pages/template/trial_chart_green_icon.png) no-repeat 92% 50%;
	-webkit-background-size:13px;
	-o-background-size:13px;
	background-size:13px;color:#36bebe;

}
.trial .trial-body .chart .chart-body ul.enq li dl dd.no a{
	background:#ebebeb url(../../../../../assets/images/pages/template/trial_chart_gray_icon.png) no-repeat 92% 50%;
	-webkit-background-size:13px;
	-o-background-size:13px;
	background-size:13px;
	color:#999;

}
.trial .trial-body .chart .chart-body ul.result{
    margin-top:0;
    margin-bottom:0}

.trial .trial-body div.basic,
.trial .trial-body div.whitening,
.trial .trial-body div.aging{display:none;}

.stptitle {
	display:block;
	padding-top:20px;
	padding-bottom:20px;
	font-size:14px;
	font-weight:500;
	background:#e9f7f7;
	color:#666666;
	text-align:center; 
	}

.trial .trial-body .result h3{
	font-size:22px;
	text-align: center; 
    color:#66cccc; 
	letter-spacing:0.3em;　margin-top:0;}

.trial .trial-body .result p.read{
	text-align: center;
	margin-bottom:40px!important;
	font-size:14px;
    line-height: 1.8;
}

.trial .trial-body .result .tsmall{
	font-size:15px; 
	color:#666666;
	letter-spacing: 0.2em; 
	font-weight: lighter;
}

.trial .trial-body .result .undl{
	border-bottom:2px solid #aae1e2;}

.cleansing{
  padding-top: 0px;
  padding-bottom: 0px;

}

.cleansing__box {
  padding-top: 25px;
  padding-bottom: 25px;
  background: #f6f6f6;
	text-align: center;
 
}
.cleansing__box .text{
	font-size: 12px;
	margin-bottom: 5px!important;
	font-weight: 500;
	}

.cleansing__box .price{
	font-size: 12px; 
	margin-bottom: 10px;
	color: #888;
}

.trial .cleansing li{
	margin: 0 20px 0 20px;
	padding-top: 30px;
	
}

.trial .cleansing .mtext{
	font-size:14px; 
	margin-bottom: 10px;
	line-height: 1.8;
}
.trial .cleansing .disctxt{font-size: 13px;}

.trial .yajirusi{
    text-align: center;
    padding: 15px; }
.trial .yajirusi img{width: 40px;}


.trial .trial-body .title{
    display:block;
    padding-top:8px;
    padding-bottom:8px;
    font-size:16px;
    font-weight:bold;
    background:#f8f8f8;
    color:#666666;
    text-align:center; 
    padding: 10px;}


/*汎用商品紹介エリア*/

.productinfo-wrap {
  margin-top:60px;
  margin-bottom: 60px;
}
.productinfo-wrap__img {
  width: 100%;
  margin-bottom: 20px;

}
.productinfo-wrap__img img {
  max-width: 100%;
}
.productinfo-wrap__txt .ttl {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
}
.productinfo-wrap__txt .txt {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 2;
}
.productinfo-wrap__box {
  padding: 25px;
  background: #f6f6f6;
}
.productinfo-wrap__box .name {
  margin-bottom: 5px;
  font-weight: 500;
}
.productinfo-wrap__box .price {
  color: #888;
}

.purchase-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 175px;
  height: 50px;
  font-size: 15px;
  color: #fff!important;
  letter-spacing: 0.25px;
  white-space: nowrap;
  background: #282728;
  border: 1px solid #ddd;
  border-radius: 0;
  transition: 0.3s;
  -webkit-appearance: none;
}
.purchase-btn i {
  -webkit-transform: translateX(-8px) translateY(1px);
          transform: translateX(-8px) translateY(1px);
}
.purchase-btn svg {
  -webkit-transform: translateX(8px) translateY(-1px);
          transform: translateX(8px) translateY(-1px);
}
.purchase-btn i,
.purchase-btn svg {
  font-size: 12px;
  color: #666!important;
  fill: #666!important;
  transition: 0.2s;
}
.purchase-btn:hover {
  color: #282728!important;
  background: #fff;
}
.purchase-btn:hover i,
.purchase-btn:hover svg {
  color: #a1a1a1!important;
  fill: #a1a1a1!important;
}
.purchase-btn .btn-arw {
  width: 8px;
}

.productinfo-wrap__box {
  padding: 25px;
  background: #f6f6f6;
}
.productinfo-wrap__box .name {
  margin-bottom: 5px;
  font-weight: 500;
}
.productinfo-wrap__box .price {
  color: #888;
}

.outletarea{background:url("https://www.haba.co.jp/assets/images/pages/f-static/list/outlet_bg.jpg") ; background-size: 100%; background-repeat: no-repeat;
}

@media screen and (min-width:780px) {
 
/*汎用テキストボックス_min780px*/
    
.trial .trial-body{
    margin-bottom:100px; 
    width: 95%; 
    margin-left:2.5%; 
    max-width:840px ; 
    margin:0 auto; }
    
.txboxcommon-body{border:1px solid #e8e8e8; }
    
.txboxcommon-body .cell{
    padding:30px 0;
    border-top:1px solid #e8e8e8;
    font-size:15px;}
    
.txboxcommon-body .cell-1{width:180px}
.txboxcommon-body .cell-2{padding-left:30px}
.txboxcommon-section-header .title{font-size:15px;}
.txboxcommon-section-body{padding-top:7px}
.txboxcommon-section-body p{margin:0;line-height:1.6}
.txboxcommon-section-body ol{margin:0;padding-left:1em;}
.txboxcommon-section-body ol li{font-size:14px;}
.txboxcommon-section-body ul li{font-size:14px;  }
.txboxcommon-body p{font-size:14px;}
.txboxcommon .mlft15{margin-left:15px!important;}	
.txboxcommon-body h5{font-size:15px;}
.txboxcommon-section-body .centerimg{ width:250px; margin-left: 250px;}
.txboxcommon h2{
    border:1px solid #e8e8e8; 
    border-bottom: none; 
    font-size:17px;
    }
.txboxcommon-body .twocollist {margin-left: 10px; font-size: 14px;}	
.txboxcommon-body .twocollist li {float:left; width: 33%; }
    
/*文字調節_min780px*/   
.kome{font-size: 12px;}	

    
/*肌診断_min780px*/  
	
 .sec-mv {
    position: relative;
  }
  .sec-mv__content {
    display: flex;
    align-items: center;
    width: 50%;
    height: 280px;
    padding: 0;
  }
  .sec-mv__content.center {
    justify-content: center;
    height: 280px;
  }
  .sec-mv__content .heading__main {
    font-size: 30px;
  }	
	
  .sec-mv__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
  }
  .sec-mv__image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .sec-mv__image--02 {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
  }
  .sec-mv__image--02 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }	
 

.trial .trial-body .chart .chart-body ul.enq li dl dd.yes a{
    height:100px; 
    font-size:23px; 
    padding-top: 35px;}
    
.trial .trial-body .chart .chart-body ul.enq li dl dt{
    font-size:15px;
}    
    
.trial .trial-body .chart .chart-body ul.enq li dl dd.no a{
    height:100px; 
    font-size:23px; 
    padding-top: 35px;}
    
.trial .trial-body .chart .chart-body ul.enq li{
    padding:50px;
    }
    
.trial .trial-body .chart .chart-header h3{
    font-size:24px;
    letter-spacing: 0.2em;}
	
.trial .trial-body .result h3{
	font-size: 30px; 
    letter-spacing:0.5em;
    }	
	
.stptitle {
    font-size:16px;
}
	
.trial .trial-body .result p.read{
	font-size:15px;
    margin-top: 20px;
    margin-bottom: 30px;}	
	
.trial .cleansing{
	display:flex;
	justify-content: space-between;
	padding-top: 30px;
	padding-bottom: 30px;}
	
.trial .cleansing li{
	margin: 20px 0px;
	width: 400px;
	}
	
.trial .cleansing .mtext{
	font-size:14px; 
}
	
.trial .trial-body .result .cleansing img{
	width:260px;}	
	
.trial .trial-body .result .tsmall{
	font-size:20px; }	
	
.cleansing__box .text{
	font-size: 16px;
	}	
	
.cleansing__box .price{
	font-size: 14px;
	}
    

    
/*汎用商品紹介エリア_min780px*/   
	
.productinfo-wrap__box {
    display: flex;
    justify-content: space-between;
    padding: 35px;
  }
  .productinfo-wrap__box .box-txt {
    flex: 1;
    padding-right: 10px;
  }
  .productinfo-wrap__box .name {
    margin-bottom: 5px!important;
    font-size: 16px;
  }
  .productinfo-wrap__box .price {
    font-size: 13px;
  }
 .productinfo-wrap {
    display: flex;
    align-items: flex-start;
  }
  .productinfo-wrap__img {
    width: 320px;
    padding-right: 50px;
    margin-bottom: 0;
  }
  .productinfo-wrap__txt {
    flex: 1;
    width: 100%;
  }
  .productinfo-wrap__txt .ttl {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .productinfo-wrap__txt .txt {
    margin-bottom: 20px;
    font-size: 14px;
  }
  .productinfo-wrap__box {
    display: flex;
    justify-content: space-between;
    padding: 35px;
  }
  .productinfo-wrap__box .box-txt {
    flex: 1;
    padding-right: 10px;
  }
  .productinfo-wrap__box .name {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .productinfo-wrap__box .price {
    font-size: 13px;
  }
.cleansing_ig {
	text-align: center;
  }
.cleansing__box .purchase-btn {
	margin-left: 120px;
  }	

.sponly{display: none;}		
	
	.outletarea{height: 530px; position: relative;}	
	.outletarea img{position: absolute; width: 500px; top: 30px; left: 50%; transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%); }
	.outletarea p{position: absolute; top:240px; width: 800px; left: 50%; transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%); text-align: center; font-size: 15px; line-height: 1.9; font-weight: 500; color: #575757; letter-spacing: 0.14em;}
	
}
/*
	.outletarea p{position: absolute; top:300px; width: 600px; left: 50%; transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%); text-align: center; font-size: 15px; line-height: 1.9; font-weight: 500; color: #575757; letter-spacing: 0.14em;}
	
}*/



@media screen and (max-width:780px) {
	
.pconly{display: none;}	
 
/*汎用テキストボックス_max780px*/
    
.txboxcommon-body .cell{
    display:block;
    padding:15px 0;
    font-size:15px;}
    
.txboxcommon-body .cell-1{
    border-top:1px solid #e8e8e8;
    padding-bottom:0;
    font-size:14px;
    text-align:left;}
.txboxcommon-body .cell-2{font-size:12px}
.txboxcommon-body .cell_group{display:block}
.txboxcommon-body .marker{position:absolute;top:0;left:0}
.txboxcommon-section .mlft15{margin-left: 0!important;}	
.txboxcommon h2{text-align: center;  }
.txboxcommon-body .twocollist {font-size: 12px}

    
/*肌診断_max780px*/   
    
.trial .cleansing li{
	margin: 20px 0px;
	}
    
.trial .cleansing .mtext{
	padding: 15px;
}	
	
.trial .trial-body .result .cleansing img{
	width:66%;
	margin-left: 17%;
    }	
 .trial .trial-body .chart .chart-body ul.enq li dl dd.yes a{
	display: flex;
    justify-content: center;
    align-items: center;
}
.trial .trial-body .chart .chart-body ul.enq li dl dd.no a{
	display: flex;
    justify-content: center;
    align-items: center;
}   
 
 /*汎用紹介エリア_max780px*/   
    
.productinfo-wrap__img {
  width: 66%;
  margin-bottom: 20px;
  margin-left: 17%;
}
    
.productinfo-wrap__txt .txt,	
.productinfo-wrap__txt .ttl {
 padding: 0 15px;
}
    
.productinfo-wrap__txt .txt {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 2;
}
		
.productinfo-wrap__box .name {
    text-align: center;
  }
.productinfo-wrap__box .price {
    text-align: center;
	  margin-bottom: 10px;
  }	
.campaign-wrap__box {
    text-align: center!important;
  }
.campaign-wrap__box .price {
    margin-bottom: 15px;
  }
.campaign-wrap02__img {
    margin-bottom: 15px;
  }
.link-btn {
    margin: 25px auto 0;
  }
	
.purchase-btn {
    margin: 0 auto;
    font-size: 14px;
  }	
	
	.outletarea{width: 100%; padding-bottom: 50px; margin-bottom: 0; background-size:cover;}	
	.outletarea img{width: 90%; margin-left: 5%; margin-top: 20px; }
	.outletarea p{ margin:45px 25px 0px 25px; font-size: 14px; line-height: 1.9; font-weight: 500;  color: #575757; letter-spacing: 0.14em; }
	
	
}

@media (min-width: 1600px) {
  .sec-mv__image img {
    width: 100%;
    height: auto;
  }
  .sec-mv__image--02 img {
    width: 100%;
    height: auto;
  }
}
@media (min-width: 1921px) {
  .sec-mv__image {
    left: 50%;
    width: 960px;
  }
  .sec-mv__image--02 {
    left: 50%;
    width: 590px;
  }
}