@charset "utf-8";



/* guide

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

.wrap #mainContents {

	width:670px;

}



.pointColor01 {

	color:#fb6830;

}



.pointColor02 {

	color:#04779e;

}





.wrap #rightSide {

	width:280px;

	padding-top:8px;

}



.wrap #rightSide ul li {

	padding:0 0 7px 18px;

	background:url(../imgs/index_ic01.gif) no-repeat 0 0.3em;

}

.contents {
  display: flex;
  gap: 20px 10px;
  flex-wrap: wrap;
    margin: 30px 0;
}

.area {
  width: calc((950px - 20px) / 3);
}
    .area img {
        width: 100%;
    }
    

@media screen and (max-width: 768px) {
    .area {
        width: 100%;
        margin: 10px;
    }
    .area p{
        font-size: 250%;
        margin-top: 10px;
    }
}

.btn,
a.btn,
button.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
    
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}
    
@media screen and (max-width: 768px) {
    .btn,
    a.btn,
    button.btn {
        font-size: 250%;
    }
}