@charset "UTF-8";

/* --------------------------------------------------
  article
-------------------------------------------------C- */
#article { overflow: hidden; }
#contents { padding-top: 81px; padding-bottom: 112px; }
.main_title { margin-bottom: 60px; }

#article #index_box { font-size: 16px; }
#article #index_box ul { display: flex; flex-wrap: wrap; }
#article #index_box ul li { margin: 60px 30px 0; position: relative; padding-bottom: 54px; width: 250px; }
#article #index_box ul li p.date_txt { margin-top: 15px; }
#article #index_box ul li p.date_description { margin-top: 5px; font-size: 88%; line-height: 1.7; }
#article #index_box ul li p.btn_txt { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; }
#article #index_box ul li p.btn_txt a { 
	text-decoration: none;
	color: #000;
	display: block;
	border: solid 1px #c9c9c9;
	padding: 12px 0;
	text-align: center;
	position: relative;
	line-height: 1;
}
#article #index_box ul li p.btn_txt a:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 4px;
  margin-top: -2px;
  background: url(../img/common/icon_arrow.png) 0 0 no-repeat;
  background-size: 100% auto;
}




/* --------------------------------------------------
  1024px以下 tablet + sp style
-------------------------------------------------- */
@media screen and (max-width: 1024px) {
	#article #index_box ul li {
		width: 25%;
		max-width: 223px;
		margin: 60px 2% 0;
	}
}



/* --------------------------------------------------
  769px以上で1024px以下 tablet style
-------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}



/* --------------------------------------------------
  769px以上 pc + tablet style
-------------------------------------------------- */
@media screen and (min-width: 768px) {

  /* --------------------------------------------------
    hover
  -------------------------------------------------- */
  .notouch #article #index_box ul li p.btn_txt a,
  .notouch #article #index_box ul li p.btn_txt a:before {
    -webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
            transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  }
  .notouch #article #index_box ul li p.btn_txt a:hover {
    padding: 10px 0;
    border-width: 3px;
    border-color: #f03f69;
    color: #f03f69;
  }
  .notouch #article #index_box ul li p.btn_txt a:hover:before {
    -webkit-transform: translate3d(5px,0,0);
            transform: translate3d(5px,0,0);
  }

}



/* --------------------------------------------------
  768px以下 sp style
-------------------------------------------------- */
@media screen and (max-width: 767px) {

  /* --------------------------------------------------
    contents
  -------------------------------------------------- */
  #contents {
    padding-top: 40px;
    padding-bottom: 102px;
  }
  .main_title {
    margin-bottom: 40px;
  }
  .main_box {
    margin-bottom: 26px;
  }
	
	#article #index_box { font-size: 13px; }
	#article #index_box p { line-height: 1.4; }
	#article #index_box ul { justify-content: space-between; }
	#article #index_box ul li { margin: 40px 0 0; padding-bottom: 50px; width: 47%; max-width: 100%; }
	#article #index_box ul li p.date_txt { margin-top: 10px; }
	#article #index_box ul li p.date_description { font-size: 92%; line-height: 1.7; }
	#article #index_box ul li p.btn_txt a { 
		text-decoration: none;
		color: #000;
		display: block;
		border: solid 1px #c9c9c9;
		padding: 10px 0;
		text-align: center;
	}

}