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


@media screen and (min-width: 641px) {
	
	div.experience_flow {
		margin-top: 50px;
	}
	
	div.experience_flow h3{
		font-size: 28px;
		font-weight: 400;
		text-align: center;
		margin-bottom: 1em;
	}
	
	div.experience_flow ul.flow {
		list-style: none;
	}
	
	div.experience_flow ul.flow li{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	div.experience_flow ul.flow li + li{
		margin-top: 50px;
	}
	
	div.experience_flow ul.flow li div.left{
		width: 174px;
		position: relative;
	}
	
	div.experience_flow ul.flow li div.left h4{
		width: 174px;
		height: 174px;
		background: #F1C3D3;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		line-height: 1.5;
		text-align: center;
		border-radius: 100%;
		overflow: hidden;
	}
	
	div.experience_flow ul.flow li div.left::after{
		content: "";
		width: 30px;
		height: 59px;
		background: url("../img/experience/arrow_short.png") no-repeat;
		background-size: contain;
		display: block;
		position: absolute;
		bottom: -36px;
		left: calc(50% - 15px);
	}
	
	div.experience_flow ul.flow li div.left.long::after{
		content: "";
		height: 113px;
		background: url("../img/experience/arrow_long.png") no-repeat;
		background-size: contain;
		bottom: -36px;
	}
	
	div.experience_flow ul.flow li:last-of-type div.left::after{
		display: none;
	}
	
	div.experience_flow ul.flow li div.right{
		width: 760px;
		padding-bottom: 30px;
		border-bottom: 1px dashed #707070;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	div.experience_flow ul.flow li:last-of-type div.right{
		border-bottom: none;
	}
	
	div.experience_flow ul.flow li div.right div.text{
		width: 64%;
	}
	
	div.experience_flow ul.flow li div.right div.text h5{
		font-size: 20px;
		font-weight: 400;
		line-height: 1.5;
		color: #DD6992;
		margin-bottom: 0.5em;
	}
	
	div.experience_flow ul.flow li div.right div.text h5::before{
		content: "";
		width: 18px;
		height: 18px;
		background: #DD6992;
		display: inline-block;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 5px;
	}
	
	div.experience_flow ul.flow li div.right div.text p{
		font-size: 18px;
		line-height: 1.8;
		letter-spacing: 0.08em;
	}
	
	div.experience_flow ul.flow li div.right div.text p + p{
		margin-top: 1em;
	}
	
	div.experience_flow ul.flow li div.right div.photo{
		width: 30%;
		line-height: 0;
	}
	
	
	
	
	div.experience_qa {
		margin-top: 110px;
		margin-bottom: 110px;
	}
	
	div.experience_qa h3{
		font-size: 32px;
		font-weight: 700;
		color: #DD6992;
		line-height: 1;
		padding-bottom: 0.5em;
		border-bottom: 1px dashed #707070;
		margin-bottom: 0.75em;
	}
	
	div.experience_qa h3 + p{
		font-size: 18px;
		line-height: 1.8;
	}
	
	div.experience_qa dl{
		margin-top: 30px;
	}
	
	div.experience_qa dl dt{
		font-size: 30px;
		font-weight: 400;
		color: #DD6992;
		line-height: 1.4;
		margin-bottom: 0.25em;
	}
	
	div.experience_qa dl dd{
		font-size: 18px;
		line-height: 1.8;
		background: #FCF0F4;
		border: 1px dashed #DD6992;
		border-radius: 10px;
		overflow: hidden;
		padding: 2em;
	}
	
	div.experience_qa dl dd + dt{
		margin-top: 1.25em;
	}

}

@media screen and (max-width: 640px) {
	
	
	div.experience_flow {
		margin-top: 50px;
	}
	
	div.experience_flow h3{
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		margin-bottom: 1em;
	}
	
	div.experience_flow ul.flow {
		list-style: none;
	}
	
	div.experience_flow ul.flow li{
		display: block;
		position: relative;
	}
	
	div.experience_flow ul.flow li + li{
		margin-top: 50px;
	}
	
	div.experience_flow ul.flow li div.left{
		margin-bottom: 15px;
		position: relative;
	}
	
	div.experience_flow ul.flow li div.left h4{
		width: 100%;
		padding: 0.5em;
		background: #F1C3D3;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		line-height: 1.5;
		text-align: center;
	}
	
	div.experience_flow ul.flow li::after{
		content: "";
		width: 30px;
		height: 59px;
		background: url("../img/experience/arrow_short.png") no-repeat;
		background-size: contain;
		display: block;
		position: absolute;
		bottom: -36px;
		left: calc(50% - 15px);
	}
	
	div.experience_flow ul.flow li:last-of-type::after{
		display: none;
	}
	
	div.experience_flow ul.flow li div.right{
		padding-bottom: 30px;
	}
	
	div.experience_flow ul.flow li div.right div.text{
		width: 100%;
	}
	
	div.experience_flow ul.flow li div.right div.text h5{
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5;
		color: #DD6992;
		margin-bottom: 0.5em;
	}
	
	div.experience_flow ul.flow li div.right div.text h5::before{
		content: "";
		width: 13px;
		height: 13px;
		background: #DD6992;
		display: inline-block;
		border-radius: 100%;
		overflow: hidden;
		margin-right: 3px;
	}
	
	div.experience_flow ul.flow li div.right div.text p{
		font-size: 14px;
		line-height: 1.8;
		letter-spacing: 0.08em;
	}
	
	div.experience_flow ul.flow li div.right div.text p + p{
		margin-top: 1em;
	}
	
	div.experience_flow ul.flow li div.right div.photo{
		width: 40%;
		line-height: 0;
		margin: 15px auto 0;
	}
	
	
	
	
	div.experience_qa {
		margin-top: 60px;
		margin-bottom: 60px;
	}
	
	div.experience_qa h3{
		font-size: 18px;
		font-weight: 700;
		color: #DD6992;
		line-height: 1;
		padding-bottom: 0.5em;
		border-bottom: 1px dashed #707070;
		margin-bottom: 0.75em;
	}
	
	div.experience_qa h3 + p{
		font-size: 14px;
		line-height: 1.8;
	}
	
	div.experience_qa dl{
		margin-top: 20px;
	}
	
	div.experience_qa dl dt{
		font-size: 16px;
		font-weight: 400;
		color: #DD6992;
		line-height: 1.4;
		margin-bottom: 0.5em;
		text-indent: -2.65em;
		padding-left: 2.65em;
	}
	
	div.experience_qa dl dd{
		font-size: 14px;
		line-height: 1.8;
		background: #FCF0F4;
		border: 1px dashed #DD6992;
		border-radius: 2vw;
		overflow: hidden;
		padding: 1.5em;
	}
	
	div.experience_qa dl dd + dt{
		margin-top: 1.25em;
	}
}