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

/*--------------------------------------------------------
　基本設定
--------------------------------------------------------*/

span.space {
	letter-spacing: -0.2em;
}

/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 961px){
	
	section div.section_inner{
		width: 83.3%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	section div.section_inner ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	section div.section_inner ul li{
		width: 26.5%;
		height: 25vw;
		height: 25cqw;
		max-height: 340px;
		background: #fdebd5;
		border-radius: 10px;
		font-size: 1.6rem;
		font-size: clamp(1.06rem, 1.11vw, 1.6rem);
		line-height: 1;
		padding: 1em 3.4em 1em;
	}
	
	section div.section_inner ul li:nth-child(n + 3){
		margin-top: 50px;
	}
	
	section div.section_inner ul li.long{
		width: 60.4%;
	}
	
	section div.section_inner ul li.mid{
		width: 38%;
	}
	
	section div.section_inner ul li.short{
		width: 34.3%;
	}
	
	section div.section_inner ul li div.box{
		width: 100%;
		height: 100%;
		display: flex;
		position: relative;
	}
	
	section div.section_inner ul li div.box.fl{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	section div.section_inner ul li div.box.flc{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	section div.section_inner ul li div.box.fls{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	section div.section_inner ul li div.box h3{
		font-size: 2.0rem;
		font-size: clamp(1.33rem, 1.38vw, 2.0rem);
		line-height: 1;
		letter-spacing: 0.1em;
		margin-bottom: 1em;
	}
	
	section div.section_inner ul li div.box h4{
		font-family: "senobi-gothic", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 13.0rem;
		font-size: clamp(8.65rem, 9.02vw, 13.0rem);
		line-height: 1;
		color: #f29020;
		letter-spacing: -0.16em;
		margin-left: -0.15em;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	
	section div.section_inner ul li div.box h4.ml0 {
		margin-left: 0;
	}
	
	section div.section_inner ul li div.box h4 span.num{
		display: inline-block;
		margin-bottom: -0.125em;
	}
	
	section div.section_inner ul li div.box h4 span.num.small{
		margin-bottom: -0.12em;
	}
	
	section div.section_inner ul li div.box span.vertical {
		writing-mode: vertical-rl;
		display: inline-block;
		font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 2.8rem;
		font-size: clamp(1.86rem, 1.94vw, 2.8rem);
		color: #3e3a39;
		letter-spacing: 0.1em;
	}
	
	section div.section_inner ul li div.box h4 span.horizontal{
		font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 2.8rem;
		font-size: clamp(1.86rem, 1.94vw, 2.8rem);
		line-height: 1.1;
		color: #3e3a39;
		letter-spacing: 0.1em;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	section div.section_inner ul li div.box p{
		font-size: 1.06rem;
		font-size: clamp(1.06rem, 1.11vw, 1.6rem);
		line-height: 1.6;
		margin-top: 0.8em;
	}
	
	section div.section_inner ul li div.box p.ind{
		text-indent: -1em;
		padding-left: 1em;
	}
	
	section div.section_inner ul li div.box p.cap{
		font-size: 0.93rem;
		font-size: clamp(0.93rem, 0.97vw, 1.4rem);
		margin-top: 0.75em;
	}
	
	section div.section_inner ul li div.box h4 span.small{
		font-size: 76.9%;
		display: inline-block;
		margin: 0 0.025em;
	}
	
	section div.section_inner ul li div.box h4 span.black{
		font-size: 46.1%;
		color: #3e3a39;
		display: inline-block;
		padding-left: 0.2em;
	}
	
	section div.section_inner ul li div.box div.text{
		width: 38%;
	}
	
	section div.section_inner ul li div.box div.graf{
		width: 47%;
		position: relative;
	}
	
	section div.section_inner ul li div.box div.graf figure{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}
	
	section div.section_inner ul li div.box div.graf #chart1 {
		width: 100%;
		height: 100%;
	}
	
	section div.section_inner ul li div.box div.woman{
		width: 45%;
	}
	
	section div.section_inner ul li div.box div.male{
		width: 34%;
		padding-top: 8%;
	}
	
	section div.section_inner ul li div.box span.icon01 {
		width: 17.5%;
		position: absolute;
		top: 8%;
		left: 24%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon02 {
		width: 33%;
		position: absolute;
		top: 8%;
		right: 8%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon03 {
		width: 26.4%;
		position: absolute;
		top: 8%;
		right: 2%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon04 {
		width: 13.6%;
		position: absolute;
		top: 8%;
		right: 0;
		display: block;
	}
	section div.section_inner ul li div.box span.icon05 {
		width: 22.4%;
		position: absolute;
		top: 8%;
		right: 9%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon06 {
		width: 33.4%;
		position: absolute;
		top: 8%;
		right: -5%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon07 {
		width: 39%;
		position: absolute;
		top: 8%;
		right: -2%;
		display: block;
	}
}

@media screen and (min-width:961px) and (max-width: 1440px){
	
	section div.section_inner ul li:nth-child(n + 3){
		margin-top: 3.47vw;
		margin-top: 3.47cqw;
	}
}


	

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 960px){
	
	
	section div.section_inner{
		width: 90%;
		margin: 0 auto;
	}
	
	section div.section_inner ul{
		display: block;
	}
	
	section div.section_inner ul li{
		width: 100%;
		background: #fdebd5;
		border-radius: 10px;
		font-size: 1.6rem;
		font-size: clamp(1.6rem, 4.43vw, 4.256rem);
		line-height: 1;
		padding: 2em 1.5em;
	}
	
	section div.section_inner ul li + li{
		margin-top: 8vw;
	}
	
	section div.section_inner ul li div.box{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	/*section div.section_inner ul li div.box.fl{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	
	section div.section_inner ul li div.box.flc{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	section div.section_inner ul li div.box.fls{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}*/
	
	section div.section_inner ul li div.box h3{
		font-size: 1.6rem;
		font-size: clamp(1.6rem, 4.43vw, 4.256rem);
		line-height: 1;
		letter-spacing: 0.075em;
		margin-bottom: 0.5em;
	}
	
	section div.section_inner ul li div.box h4{
		font-family: "senobi-gothic", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 9rem;
		font-size: clamp(9rem, 25vw, 24rem);
		line-height: 1;
		color: #f29020;
		letter-spacing: -0.16em;
		margin-left: -0.15em;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	
	section div.section_inner ul li div.box h4.ml0 {
		margin-left: 0;
	}
	
	section div.section_inner ul li div.box h4 span.num{
		display: inline-block;
		margin-bottom: -0.125em;
	}
	
	section div.section_inner ul li div.box h4 span.num.small{
		margin-bottom: -0.12em;
	}
	
	section div.section_inner ul li div.box span.vertical {
		writing-mode: vertical-rl;
		display: inline-block;
		font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 2.0rem;
		font-size: clamp(2.0rem, 5.54vw, 5.32rem);
		color: #3e3a39;
		letter-spacing: 0.1em;
	}
	
	section div.section_inner ul li div.box h4 span.horizontal{
		font-family: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		font-size: 2.0rem;
		font-size: clamp(2.0rem, 5.54vw, 5.32rem);
		line-height: 1.1;
		color: #3e3a39;
		letter-spacing: 0.1em;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	section div.section_inner ul li div.box p{
		font-size: 1.3rem;
		font-size: clamp(1.3rem, 3.6vw, 3.465rem);
		line-height: 1.6;
		margin-top: 0.8em;
	}
	
	section div.section_inner ul li div.box p.ind{
		text-indent: -1em;
		padding-left: 1em;
	}
	
	section div.section_inner ul li div.box p.cap{
		font-size: 1.2rem;
		font-size: clamp(1.2rem, 3.32vw, 3.192rem);
		margin-top: 0.75em;
	}
	
	section div.section_inner ul li div.box h4 span.small{
		font-size: 76.9%;
		display: inline-block;
		margin: 0 0.025em;
	}
	
	section div.section_inner ul li div.box h4 span.black{
		font-size: 46.1%;
		color: #3e3a39;
		display: inline-block;
		padding-left: 0.2em;
	}
	
	section div.section_inner ul li div.box div.text{
		width: 100%;
	}
	
	section div.section_inner ul li div.box div.graf{
		width: 70%;
		position: relative;
		margin: 5vw auto 0;
	}
	
	section div.section_inner ul li div.box div.graf figure{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}
	
	section div.section_inner ul li div.box div.graf #chart1 {
		width: 100%;
		height: 100%;
	}
	
	section div.section_inner ul li div.box div.woman{
		width: 100%;
	}
	
	section div.section_inner ul li div.box div.male{
		width: 100%;
		margin-top: 5vw;
	}
	
	section div.section_inner ul li div.box span.icon01 {
		width: 33.5%;
		position: absolute;
		top: 8%;
		right: 2%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon02 {
		width: 33%;
		position: absolute;
		top: 16%;
		right: 1%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon03 {
		width: 30%;
		position: absolute;
		top: 23%;
		right: 7%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon04 {
		width: 30%;
		position: absolute;
		bottom: 12%;
		right: 5%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon05 {
		width: 28%;
		position: absolute;
		top: -16%;
		right: 2%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon06 {
		width: 32.4%;
		position: absolute;
		top: 18%;
		right: 5%;
		display: block;
	}
	section div.section_inner ul li div.box span.icon07 {
		width: 34%;
		position: absolute;
		top: 16%;
		right: 0;
		display: block;
	}
}