@charset "UTF-8";
/* CSS Document */


@media screen and (min-width: 767px) {
.pc_none {
	display: none !important;
}
}


}
@media screen and (max-width: 768px) {
	.sp_block {
		display: block !important;
	}

	.sp_none {
		display: none !important;
	}
}



/*main_img---------------------*/

#main_img {
	width: 100%;
	margin: 0 auto;
	padding-top: 60px;
}
#main_img img {
	width: 100%;
}


#certification .second_main{
	text-align: left; @important
	padding-left: 20%; @important
}

#certification .second_main h1{
	width: 50%;
	padding-top: 120px;
}

#certification .second_main h2{
	font-size: 42px;
	font-family :
	YuMincho,    /* Mac用 */
	'Yu Mincho', /* Windows用 */
	serif;
}

#certification .second_main p{
	width: 45%;
  padding-top: 38px;
}

@media screen and (max-width: 768px) {
	.sp_main_text{
		margin: 0 25px;
	}

}



/*main_img---------------------END*/

#certification section{
	width: 100%;
 	margin-bottom: 72px;
}

#certification section h2{
	font-size: 32px;
	text-align: center;
	padding: 72px 0 64px 0;
}


@media screen and (max-width: 768px) {

	#certification section h2{
		font-size: 24px;
	}

}


/*SECTION setup*/

#certification section.setup img{
	object-fit: fill;
	display: block;
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
}

/*SECTION setup END*/



/*SECTION benefits*/

#certification section.benefits{
	background-color: #AAAAAA;
	padding-bottom: 162px;
}

#certification section.benefits h2{
	color: #FFFFFF;
}

#certification section.benefits img{
	object-fit: fill;
	display: block;
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
}


@media screen and (max-width: 768px) {
	#certification section.benefits img{
		width: 85%;
	}
}

/*SECTION benefits END*/



/*SECTION step */

#certification section.step{
	width: 1200px;
	margin: 0 auto 120px;
}

#certification section.step .silver{}
#certification section.step .design{}
#certification section.step .gold{}
#certification section.step .diamond{}
#certification section.step .diamond img{
	width: 100%;
}

#certification section.step ul{
		height: 350px;
}

#certification section.step ul li{}

#certification section.step ul li img.rank{
	width: 100%;
}

#certification section.step ul li.right_box{
	width: 75%;
	float: left;
	margin-right: 2.5%;
}

#certification section.step ul li.left_box{
	width: 22.5%;
  padding-top: 72px;
	display: inline-block;
}

#certification section.step ul li.after{
	clear: both;
}



#certification section.step ul li.left_box div{
	width:85%;
  font-size:18px;
  text-decoration:none;
  display:block;
  text-align:center;
  padding: 12px 0 12px;
  border-radius:50px;
	margin-bottom: 30px;
	transition: 0.5s
}

#certification section.step ul li.left_box div.detail a.hover ,
#certification section.step ul li.left_box div.apply a.hover{
	opacity: 20%;
	transition: 0.5s
}


#certification section.step ul li.left_box div.detail{
	color:#212121;
	border: solid #212121 0.5px;
	background-color:#FFF;
}
#certification section.step ul li.left_box div.apply{
	color:#fff;
	background-color:#212121;
}



@media screen and (max-width: 768px) {

	#certification section.step ul{
		height: auto;
	}

	#certification section.step{
		width: 100%;
		margin: 0 auto 120px;
	}

	#certification section.step ul li.right_box{
		float: none;
	}

	#certification section.step ul li.left_box {
    width: 80%;
    padding-top: 0;
    display: block;
	  margin: 0 auto 64px;
	}

	#certification section.step ul li img.rank{
		width: 85%;
		margin: 0 auto;
	  margin-bottom: 64px;
	}

	#certification section.step ul li.left_box div{
		width: 100%;
    margin-bottom: 20px;
	}


}


/*SECTION step END*/





/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0 10px 64px; /* ボックス全体の位置調整 */
}

.acbox label{
  width: auto;
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: center;
  background: #212121; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border-radius: 4px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #fff;
}

.acbox label:hover{
  background: #212121; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #fff;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 18px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #F3F4F5; /* 開いた部分の背景色 */
  opacity: 1;
	margin-bottom: 64px;
}

.acbox input:checked ~ label {
  background: #212121; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */
}

.acbox-under img.contents{
	width: 32%!important;
	margin-bottom: 25px;
}

.acbox-under .dl_botton{
	background-color: #212121;
	width:35%;
	font-size:14px;
	text-decoration:none;
	display:block;
	text-align:center;
	padding: 8px 0 8px;
  border-radius: 10px;
  margin-bottom: 30px;
	transition: 0.5s

}

@media screen and (max-width: 768px) {

	.acbox{
	 margin: 0 25px 64px;
	}

	.acbox label{
		margin-bottom: 0;
	}

	.acbox-under img.contents{
		width: 100%;
	}

	.acbox-under .dl_botton{
		width: 100%;
	}
}