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

/*main*/
main{
	background-image: url("../img/bg_top.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 96px;
}
main .container{
	padding: 40px 20px;
}
main .item_box{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	text-align: center;
	width: 100%;
}
h1{
	font-size: var(--fz21);
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--white);
	background-color: var(--light-purple);
	padding: 10px 20px;
	width: 26%;
}
.item_list{
	width: 86%;
}
main li{
	font-size: var(--fz21);
	font-weight: 600;
	background-color: var(--white);
	border: solid 1px var(--light-purple);
	padding: 10px 10px 20px 80px;
	text-align: left;
	margin-bottom: -1px;
	text-indent: -4rem;
}
main li:last-of-type{
	margin-bottom: 0;
}
main li a{
	color: var(--black);
	transition: all 0.3s ease;
}

/*レスポンシブ 突然改行される不具合解消用*/
main li:first-of-type, main li:nth-of-type(5){
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	text-indent: 0rem;
	padding-left: 16px;
}
main li:first-of-type a, main li:nth-of-type(5) a{
	margin-top: 4px;
}
main li:first-of-type span.item_box_num,main li:nth-of-type(5) span.item_box_num{
	margin-right: 21px;
}
/* end レスポンシブ 突然改行される不具合解消用*/

main li a:hover{opacity: 0.6;}
main li span.add{
	font-size: var(--fz18-16);
	padding: 4px 16px;
	background-color: var(--bg-purple);
	margin-left: 8px;
}
main li span.fz18-16{
	font-weight: 400;
}
main p{
	font-size: var(--fz18-16);
	text-align: right;
	 margin-top: 10px;
}
/* end main*/


/*==================================================
罫線 css
===================================*/
#main01 .container{
	padding-bottom: 0;
}
#main02 .container{
	padding-bottom: 0;
}
#main04 .container{
	padding-bottom: 0;
}
#main_list_04 .container{
	padding-bottom: 0;
}
#main05 .container{
	padding-bottom: 0;
}
#main06 .container{
	padding-bottom: 0;
}
#main07 .container{
	padding-bottom: 0;
}

#main01 .main_box,#main05 .main_box,#main06 .main_box,#main07 .main_box{
	padding-bottom: 56px;
	border-bottom: solid 1px var(--line-gray);
}
.line_bottom{
	padding-bottom: 32px;
	border-bottom: solid 1px var(--line-gray);
}

/*==================================================
本編 サンプル スライドショーcss
===================================*/
h2{
	font-size: var(--fz24);
	font-weight: 600;
	margin-bottom: 16px;
	line-height: 2;
}
h2 span.item_box_num{
	margin-right: 4px;
}
h2 span.item_box_num:last-of-type{
	margin-right: 8px;
}
#main01 h2,#main02 h2,#main03 h2,#main04 h2,#main05 h2{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
#main01 span.item_box_num,#main02 span.item_box_num,#main03 span.item_box_num,#main04 span.item_box_num,#main05 span.item_box_num{
	line-height: 1.6;
}

.main_box{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0px;
}
/*
.main_box_line{
	padding-bottom: 56px;
	border-bottom: solid 1px var(--line-gray);
}
*/
.main_box .box-l{
	max-width: 412px;
	margin-right: 32px;
	min-width: 300px;
}
.main_box .box-l a{
	width: 100%;
}
.main_box .box-l p{
	margin-top: 10px;
}
.main_box .box-r{
	max-width: 648px;
}
.main_sample_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	background-color: var(--bg-light-gray);
	padding: 32px 24px 8px 16px;
/*	max-width: 864px;*/
}
.main_sample_box img{
	position: relative;
	width: 96px;
	height: auto;
}
.main_sample_img{
	position: relative;
	padding-left: 24px;
	margin-bottom: 24px;
}
.main_sample_img:before{
	position: absolute;
	content: '';
	top: 50%;
    left: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	display: block;
	width: 10px;
	height: 20px;
	background-image: url("../img/icon_arrow_purple.svg");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 1; 
}
.main_sample_img:first-of-type:before{
	background-image:none;
}

/*==================================================
背景一覧 css
===================================*/
.main_list_title{
	max-width: 648px;
	margin-left: auto;
	margin-right: auto;
}
.main_list_title h2{
	background-color: var(--bg-purple);
	text-align: center;
	padding: 10px 20px;
}
.main_list_title p{
	font-weight: 500;
	font-size: var(--fz18-17);
	line-height: 1.7;
	margin-bottom: 24px;
}
.main_list_box{
	max-width: 648px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
}
.main_list_box:last-of-type{margin-bottom: 0;}

#main03 .container{
	padding-bottom: 0;
}
#main_list_0203 .container{
	padding-top: 64px;
	padding-bottom: 0;
}

/*==================================================
メッセージ文 css
===================================*/
#main04 .box-r{
	background-color: var(--bg-light-gray);
	padding-bottom: 16px;
	max-width: 648px;
}
#main_list_04 .main_list_box{
	background-color: var(--bg-light-gray);
}
#main_list_04 .accordion_inner{padding-bottom: 16px;}
#main_list_04 .main_sample_message li{margin-right: 16px;}
#main_list_04 .main_list_box{padding-bottom: 0;}

.main_sample_message{
	padding: 16px;
	background-color: var(--white);
	margin: 0 16px;
}
.main_sample_message h4{
	font-size: 1.0625rem;
	font-weight: 600;
	margin-bottom: 8px;
}
.main_sample_message ul{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.main_sample_message li{
	font-size: 1.0625rem;
	font-weight: 600;
	position: relative;
	padding-left: 20px;
	margin-right: 24px;
}
.main_sample_message li:before{
	position: absolute;
	content: '●';
	top: 0;
	left:0;
}
.main_sample_message li:nth-of-type(2n-1){
	color: var(--red);
}
.main_sample_message li:last-of-type{
	color: var(--red);
}



/*==================================================
追加版 css
===================================*/
.sample_title p.sample_add{
	font-size: var(--fz18-17);
	font-weight: 600;
    background-color: var(--bg-purple);
    padding: 4px 16px;
/*    height: 40px;*/
}
.sample_title_add h3{
	color: var(--black);
	border: solid 1px var(--bg-purple);
	font-weight: 400;
}

/*==================================================
レスポンシブ css
===================================*/
@media not screen and (min-width: 768px) {
	main{
		margin-top: 60px;
	}
	main .container{
		padding: 20px;
	}
	main .item_box{
		flex-direction: column;
		text-align: left;
	}
	h1{
		width: 100%;
	}
	main .item_list{width: 100%;}
	main li:first-of-type a, main li:nth-of-type(5) a{
		margin-top: 8px;
	}
	main li span.add{margin-left: 0;}
	main p{text-align: left;}
	
	.main_box{
		flex-direction: column;
	}
	
	.main_box .box-l{
		margin-right: 0;
		margin-bottom: 16px;
		min-width: inherit;
	}
	#main01 .main_box,#main05 .main_box,#main06 .main_box,#main07 .main_box{
		padding-bottom: 40px;
	}
	.line_bottom{
		padding-bottom: 40px;
	}
	#main_list_0203 span.item_box_num,#main_list_04 span.item_box_num{
		margin-right: 6px;
	}
	.main_list_title{
		max-width: 100%;
	}
	.main_list_title h2{
		text-align: left;
		line-height: 2;
	}
	
	.sample_title_add{
/*		border: solid 1px var(--bg-purple);*/
		flex-direction: column;
		align-items: flex-start;
	}
	.sample_title_add p{
	}
	.sample_title_add h3{
		height: auto;
		padding: 4px 16px;
		width: 100%;
	}
	.main_sample_message{
		padding: 16px 0 16px 16px;
	}
	#main_list_0203 .sample_title p.sample_num,#main_list_04 .sample_title p.sample_num{
		min-width: 78px;
	}
	#main_list_0203 .sample_title h3,#main_list_04 .sample_title h3{
		padding: 4px 32px 4px 8px;
	}
}