@charset "utf-8";

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------

	FEATURE

-------------------------------------------------------------------------------
-------------------------------------------------------------------------------*/

/* charm*/
.charm{
  margin: 0 auto 60px auto;
	padding-left: 45px;
  overflow: hidden;
}
@media screen and (max-width: 959px) {
  .charm{
    padding-left: 30px;
  }
}
@media screen and (max-width: 599px) {
  .charm{
    padding-left: 20px;
  }
}

.charm li{
  float: left;
  width: calc(33% - 45px);
  margin-right: 45px;
  margin-bottom: 25px;
}

@media screen and (max-width: 959px) {
  .charm li{
    width: calc(50% - 20px);
    margin-right: 20px;
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 413px) {
  .charm li{
    width: calc(100% - 20px);
  }
}
.charm li:nth-child(3){
  margin-right: 0px;
}
@media screen and (max-width: 959px) {
  .charm li:nth-child(3){
    margin-right: 20px;
  }
}
.charm li h4{
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal;
  padding: 5px 0;
  line-height: 1.4;
margin-top: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid #DDDDDD;
}
.charm li p{
  font-size: 1.5rem;
  line-height: 1.7;
}


/* feature */
.feature{
  margin: 70px auto 70px auto;
}
@media screen and (max-width: 959px) {
  .feature{
    margin: 40px auto 70px auto;
  }
}
.feature h4{
  float: left;
  border: 2px solid #443F39;
  width: 268px;
  height: 180px;
  text-align: center;
  font-size: 4.8rem;
  font-weight: normal;
	font-style: italic;
  padding-top: 80px;
	font-family:Arial, Helvetica, "sans-serif";
}

@media screen and (max-width: 959px) {
  .feature h4{
    float: none;
    margin: 0 auto 25px auto;
    height: 80px;
    padding-top: 10px;
    font-size: 3.8rem;
  }
}
@media screen and (max-width: 599px) {
  .feature h4{
    width: 240px;
    margin: 0 auto 20px auto;
    height: 50px;
    padding-top: 0px;
    font-size: 3.0rem;
  }
}

.feature .box{
  overflow: hidden;
  padding-left: 58px;
}
@media screen and (max-width: 959px) {
  .feature .box{
    padding:0px 25px;
  }
}
@media screen and (max-width: 599px) {
  .feature .box{
    padding:0px 10px;
  }
}


.feature .box .feature-catch{
  font-size: 2.2rem;
  margin-bottom: 15px;
}
@media screen and (max-width: 599px) {
  .feature .box .feature-catch{
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
}
.feature .box .text{
  font-size: 1.8rem;
  margin-bottom: 28px;
}
@media screen and (max-width: 599px) {
  .feature .box .text{
    font-size: 1.6rem;
  }
}

.feature .box .wrap{
  font-size: 1.5rem;
  padding: 25px;
  border: 1px solid #DDDDDD;
  line-height: 1.5;
}