@charset "utf-8";

/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */
/*                                                                 */
/*    【共通　ここから】                                                */
/*                                                                 */
/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */

html {
	overflow-x: hidden;
}
.wrap {
	overflow-x: hidden;
}
img {
	vertical-align: bottom;
}
p {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;

}
a {
	outline: none;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: normal;
}

.bg_orange {
	background: #FFFBF6;
}
.bg_white {
	background: #fff;
}
.bg_pink {
	background: #FFEEE7;
}

/*フッターが上がらないように*/
body,
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
footer {
  margin-top: auto;
}

/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */
/*                                                                  */
/*    【PCここから】                                                     */
/*                                                                  */
/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */
@media screen and (min-width:769px){
	.pankuzu{
		width: 100%;
		max-width: 1080px;
		margin: 15px auto;
	}
	
	h1 {
		font-size: 36px;
		text-align: center;
		margin-top: 50px;
		margin-bottom: 40px;
	}
	
	h1:before {
		content: " ";
		background: url("../img/top/case_icon.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 30px;
		height: 40.59px;
		display: block;
		margin: 0 auto;
		margin-bottom: 15px;
	}
	.contents_wrap {
		width: 100%;
		max-width: 1080px;
		margin: 0 auto;
		/*padding: 35px 15px;*/
		padding: 0 0 70px 0;
	}
	/*.contents_wrap:last-of-type{
		margin-bottom: 70px;
	}*/
	.case_contents h2{
		font-size: 22px;
    margin-top: 0;
		margin-bottom: 15px;
    border-bottom: 1px dotted #8C8C8C;
	padding-bottom: 10px;
	}
	
	/*事例紹介一覧*/
	.case_box{
		display: flex;
		justify-content: space-between;
		background: #fff;
		border-radius: 10px;
		padding: 20px 15px;
		box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
		margin-bottom: 40px;
		font-size:18px;
	}
	
	.case_list a:last-of-type .case_box{
		margin-bottom: 0;
	}
	
	.case_img{
		width: 22%;
	}
	
	.case_contents{
		width: 75%;
		display: flex;
		flex-direction: column;
	}
	
	.more_btn{
		display: block;
		background: #EAF2CF;
		border-radius: 5px;
		margin-top: 15px;
		margin-left: auto;
		margin-right: 0;
		padding: 5px;
		width: 130px;
		text-align: center;
		position: relative;
		font-size:16px;
	}

	.more_btn:after{
		content: " ";
		display: inline-block;
		background: url("../img/arrow_black.svg");
		width: 4px;
		height: 8px;
		background-size:cover;
		position: absolute;
		right: 9px;
    	top: 50%;
    	transform: translateY(-50%) translateX(-50%);
    	-webkit- transform: translateY(-50%) translateX(-50%);
	}
	
	/*事例紹介詳細ページ*/
	.contents_wrap.case{
		padding-bottom: 0;
	}
	.case_main{
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 30px;
		align-items: center;
		margin: 0 auto 50px auto;
		max-width: 1200px;
		width: 100%;
	}
	.case_main_img{
		width: 58%;
	}
	.case_title{
		width: 39%;
	}
	.case_title h2{
		font-size: 24px;
	}
	.case_title p{
		font-size: 30px;
		font-weight: bold;
	}
	
	.q_box{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px dotted #8C8C8C;
		padding-bottom: 50px;
	}
	
	.a_box{
		display: flex;
		justify-content: space-between;
		padding-top: 50px;
	}
	
	.q_a_icon{
		width: 75px;
		height: 75px;
	}
	.q_a_text{
		width: 89%;
		font-size: 18px;
	}
	.common_btn_wrap {
		margin-top: 70px;
	}
	.common_btn {
		background: #AABF63;
		color: #fff;
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: 15px;
		border-radius: 10px;
		font-size: 18px;
		position: relative;
		width: 350px;
	}
	.common_btn.case:before {
		content: " ";
		background: url("../img/top/case_icon_w.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 21px;
		height: 27px;
		display: block;
		margin: 0 auto;
		margin-left: -66px;
		margin-bottom: 15px;
		display: inline-block;
		position: absolute;
	}	
}
/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */
/*                                                                  */
/*    【SPここから】                                                     */
/*                                                                  */
/* ■◆■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━■◆■ */
@media screen and (max-width:768px){
	.pankuzu{
		width: 100%;
		max-width: 1080px;
		margin: 85px auto 15px auto;
		font-size: 14px;
	}
	p{
		font-size: 16px;
	}

	
	h1{
		font-size: 24px;
		text-align: center;
		margin-bottom: 30px;
	}
	
	h1:before {
		content: " ";
		background: url("../img/top/case_icon.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 30px;
		height: 40.59px;
		display: block;
		margin: 0 auto;
		margin-bottom: 15px;
	}
	.contents_wrap {
		width: 100%;
		margin: 0 auto;
		padding: 35px 15px;
	}
	/*.contents_wrap:last-of-type{
		margin-bottom: 70px;
	}*/
	
	/*事例紹介一覧ページ*/
	.case_contents h2{
		font-size: 16px;
    margin-top: 0;
		margin-bottom: 10px;
    border-bottom: 1px dotted #8C8C8C;
		line-height: 1.65em;
		padding-bottom: 10px;
	}
	
	.case_box{
		display: flex;
		justify-content: space-between;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
		margin-bottom: 20px;
	}
	
	.case_list a:last-of-type .case_box{
		margin-bottom: 0;
	}
	
	.case_img{
		width: 30%;
	}
	
	.case_contents{
		width: 64%;
		display: flex;
		flex-direction: column;
	}
	
	.more_btn{
		display: block;
		background: #EAF2CF;
		border-radius: 5px;
		margin-top: 30px;
		margin-left: auto;
		margin-right: 0;
		padding: 5px;
		width: 130px;
		text-align: center;
		position: relative;
	}

	.more_btn:after{
		content: " ";
		display: inline-block;
		background: url("../img/arrow_black.svg");
		width: 4px;
		height: 8px;
		background-size:cover;
		position: absolute;
		right: 9px;
    	top: 50%;
    	transform: translateY(-50%) translateX(-50%);
    	-webkit- transform: translateY(-50%) translateX(-50%);
	}
	
	/*事例紹介詳細ページ*/
	.contents_wrap.case{
		padding-bottom: 0;
	}
	.case_main{
		/*display: flex;
		justify-content: space-between;*/
		align-items: center;
		padding: 0 15px;
		width: 100%;
	}
	.case_main_img{
		
	}
	.case_title{
		position: relative;
		width: 95%;
	}
	.case_title h2{
		font-size: 16px;
		background: rgba(170, 191, 99,0.7);
		color: #fff;
		margin-top: -39px;
    	display: block;
		padding: 2px 15px;
	}
	.case_title p{
		font-size: 20px;
		font-weight: bold;
		background: #fff;
		padding: 15px;
	}
	
	.q_box{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px dotted #8C8C8C;
		padding-bottom: 30px;
	}
	
	.a_box{
		display: flex;
		justify-content: space-between;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	
	.q_a_icon{
		width: 39px;
		height: 39px;
	}
	.q_a_text{
		width: 84%;
		font-size: 18px;
	}
	.common_btn_wrap {
		margin-top: 30px;
	}
	.common_btn {
		background: #AABF63;
		color: #fff;
		display: block;
		margin: 0 auto;
		text-align: center;
		padding: 15px;
		border-radius: 10px;
		font-size: 18px;
		position: relative;
	}
	.common_btn.case:before {
		content: " ";
		background: url("../img/top/case_icon_w.svg");
		background-size: contain;
		background-repeat: no-repeat;
		width: 21px;
		height: 27px;
		display: block;
		margin: 0 auto;
		margin-left: -35px;
		margin-bottom: 15px;
		display: inline-block;
		position: absolute;
	}	
}