/*******************************************************************
　基本設定
*******************************************************************/
h1, h2, h3, h4, h5, h6 {
    font-family: "游ゴシック", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HiraKakuPro-W3", "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, sans-serif;
font-weight: bold;
  }
/**** 画像表示（ｐｃ・ｓｐ） ****/
/* "pc"…パソコンでは画像が表示される */
/* "sp"…スマフォでは画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
/**** 改行（それぞれ<span class="inspan"></span>で囲む） ****/
.inspan {
  display: inline-block;
}


.width80{
	width:80%;
	margin:auto;
}
@media screen and (max-width:768px){
	.width80{
		width:100%;
	}
}
.width50{
	width:50%;
	margin:auto;
}
@media screen and (max-width:768px){
	.width50{
		width:100%;
	}
}
.left p{
  text-align: left !important;
}
.center{
  text-align: center  !important;
}
.center img{
  display: block;
  margin: 0 auto;
}
/*******************************************************************
　色設定
*******************************************************************/

.atr-green{
  color: #39b54a;
}
.atr-green-bg{
  background-color: #39b54a;
}
.atr-greenthin{
  color: #f2fff2;
}
.atr-greenthin-bg{
  background-color: #f2fff2;
}
.atr-yellow{
  color: #ffff00;
}
.atr-yellow-bg{
  background-color: #ffff00;
}
.atr-orange{
  color: #fbb03b;
}

/*******************************************************************
　リンクボタン
*******************************************************************/
/**** 白ボタン****/
a.white-button {
  display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 10px auto ;
	padding: 0.3rem 1rem;
	border: 1px solid #fff;

	color: #fff;
	border-radius: 15px;
	transition: 0.5s;
  width:50%;
}
a.white-button:hover {
	background: #fff;
	color: #39b54a;
}
/**** 緑ボタン****/
a.green-button {
  display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 10px auto ;
	padding: 0.3rem 1rem;
	border: 1px solid #39b54a;

	color: #39b54a;
	border-radius: 15px;
	transition: 0.5s;
  width:50%;
}
a.green-button:hover {
	background: #39b54a;
	color: #fff;
}

/**** ボックス3列****/
.three-area {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}
.three-box {
    width: 30%;
    min-height: 1px;
    padding: 15px;
    margin: 10px;
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 900px) {
    .three-box {
        width: 40%;
    }
}
/*******************************************************************
　topページ
********************************************************************/
.top-page h1{
  font-size: 1.6rem;
  line-height: 2;
  margin: 10px;
}
.top-page .atr-green-bg{
  padding: 40px;
  margin: 20px 0;
}
@media screen and (max-width: 900px) {
  .top-page .atr-green-bg{
    padding: 10px;
  }
}
.top-page .atr-green-bg h2{
  color: #ffff00;
  font-size: 1.6rem;
  padding: 10px;
}
.kadai-area01 .one{
  padding: 20px;

}
.no{
  color:#ffff00;
  font-size: 1.5rem;
  border-bottom: 1px solid #fff;
  margin: 10px 0;
}
.kadai-area01 h3{
  font-size: 1.2rem;
  color: #fff;
}
.kadai-area01 img{
  display: block;
  margin: auto;
  padding: 20px;
}

/**** 画像アニメーション****今のところてつかず*/
.kadai-area02 {
  background-color: #f2fff2;
  padding: 20px;
  margin: 20px 0;
}
.kadai-area02 img{
  padding-top: 20px;
}

.kadai-area02 p{
  font-size: 1.3rem;
  color: #39b54a;
  text-align: center;
}
.kadai-area02 .obi{
  width: 90%;
  font-size: 1.4rem;
  background-color: #39b54a;
  color: #fff;
  text-align: center;
  margin: 10px auto ;
  padding: 5px;
}

.top-page h2{
  color: #39b54a;
  text-align: center;
  font-size: 1.5rem;
  padding: 10px;
}

.top-page .three-box {
    background-color: #f2fff2;
    text-align: center;
    border-radius:20px;
}
.top-page .three-box img {
    padding: 20px;
}

.yakusoku-area .one{
  text-align: center;

  padding: 12px;

}
.yakusoku-box{
  padding: 20px;
  background-color: #f2f2f2;
}
.yakusoku-box h3{
  font-size: 1.3rem;
}
