@charset "UTF-8";


/***************************************************

	about

***************************************************/

.base_bg::before {
    height: 1580px;
    background: linear-gradient(16deg, #F3F3F4 25.88%, #9FE0E7 36.26%, #5EB8DE 48.1%, #0076A8 83.77%, #005275 95.9%);
}

.page_head .sub_title {
    color: #fff;
}

.page_head .sub_title::after {
    background: #fff;
}

.page_head h1 {
    color: #fff;
}

.about_message{
	width: 1024px;
	margin: 0 auto 120px;
	padding: 80px 99px 120px;
	border-bottom: 1px solid #eee;
}

.about_message p{
	font-size: 18px;
	font-weight: 700;
	line-height: 2.4;
	color: #fff;
	letter-spacing: 0.04em;
	margin-bottom: 1em;
}

.about_message p:last-of-type{
	margin-bottom: 0;
}



.about_ul{
	width: 1024px;
	margin:  0 auto 100px;
}

.about_ul li{
	display: flex;
	align-items: center;
	margin-bottom: 80px;
	position: relative;
}

.about_ul li:nth-child(even){
	flex-direction: row-reverse;
}

.about_ul li:last-child{
	margin-bottom: 0;
}

.about_ul li .text_area{
	width: calc(100% - 512px);
	padding: 0 48px 0 0;
}

.about_ul li:nth-child(even) .text_area{
	padding: 0 0 0 48px;
}

.about_ul li .text_area .catch{
	font-size: 36px;
	letter-spacing: 0.04em;
	margin-bottom: 20px;
}

.about_ul li .text_area .caption{
	font-size: 16px;
	letter-spacing: 0.04em;
}

.about_ul li .image_area{
	width: 512px;
	box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.10);
	position: relative;
}

.about_ul li .image_area::before{
	content: '';
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	position: absolute;
}

.about_ul li:nth-child(1) .image_area::before{
	width: 92px;
	height: 54px;
	background-image: url('../images/common/kv_item02.png');
	top: -46px;
	right: 16px;
}

.about_ul li:nth-child(2) .image_area::before{
	width: 75px;
	height: 53px;
	background-image: url('../images/common/kv_item03.png');
	top: -45px;
	left: 16px;
}

.about_ul li:nth-child(3) .image_area::before{
	width: 54px;
	height: 50px;
	background-image: url('../images/common/kv_item01.png');
	bottom: -42px;
	right: 16px;
}



 

/********************************************************************************
	リッキド用 CSS
********************************************************************************/

@media(max-width:1280px){


.base_bg::before {
    height: 123.4375vw;
}

.about_message{
	width: 80vw;
	margin: 0 auto 9.375vw;
	padding: 6.25vw 7.734375vw 9.375vw
}

.about_message p{
	font-size: 1.40625vw;
}


.about_ul{
	width: 80vw;
	margin:  0 auto 7.8125vw;
}

.about_ul li{
	margin-bottom: 6.25vw;
}

.about_ul li .text_area{
	width: calc(100% - 40vw);
	padding: 0 3.75vw 0 0;
}

.about_ul li:nth-child(even) .text_area{
	padding: 0 0 0 3.75vw;
}

.about_ul li .text_area .catch{
	font-size: 2.8125vw;
	margin-bottom: 1.5625vw;
}

.about_ul li .text_area .caption{
	font-size: 1.25vw;
}

.about_ul li .image_area{
	width: 40vw;
	box-shadow: 0.625vw 0.625vw 1.875vw 0 rgba(0, 0, 0, 0.10);
}

.about_ul li:nth-child(1) .image_area::before{
	width: 7.1875vw;
	height: 4.21875vw;
	top: -3.59375vw;
	right: 1.25vw;
}

.about_ul li:nth-child(2) .image_area::before{
	width: 5.859375vw;
	height: 4.140625vw;
	top: -3.515625vw;
	left: 1.25vw;
}

.about_ul li:nth-child(3) .image_area::before{
	width: 4.21875vw;
	height: 3.90625vw;
	bottom: -3.28125vw;
	right: 1.25vw;
}





}


/********************************************************************************
	スマートフォン用 CSS
********************************************************************************/

@media(max-width:430px){


.base_bg::before {
	height: 552vw;
	background: linear-gradient(39deg, #F3F3F4 25.88%, #9FE0E7 39.64%, #5EB8DE 52.51%, #0076A8 83.77%, #005275 95.9%);
}

.about_message{
	width: auto;
	margin: 0 6.4vw 26.666667vw;
	padding: 10.666667vw 0 26.666667vw
}

.about_message p{
	font-size: 3.733333vw;
}



.about_ul{
	width: auto;
	margin:  0 0 26.666667vw;
}

.about_ul li{
	display: block;
	margin-bottom: 21.333333vw;
}

.about_ul li .text_area{
	width: auto;
	padding: 0 6.4vw 20.8vw;
}

.about_ul li:nth-child(even) .text_area{
	padding: 0 6.4vw 20.8vw;
}

.about_ul li .text_area .catch{
	font-size: 7.466667vw;
	margin-bottom: 5.333333vw;
}

.about_ul li .text_area .caption{
	font-size: 4.266667vw;
}

.about_ul li .image_area{
	width: auto;
	box-shadow: 1.4624vw 1.4624vw 4.387467vw 0 rgba(0, 0, 0, 0.10);
	margin: 0 0 0 6.4vw;
}

.about_ul li:nth-child(even) .image_area{
	margin: 0 6.4vw 0 0;
}

.about_ul li:nth-child(1) .image_area::before{
	width: 16.632vw;
	height: 10.666667vw;
	top: -9.306667vw;
	right: 2.92vw;
}

.about_ul li:nth-child(2) .image_area::before{
	width: 13.584vw;
	height: 9.6vw;
	top: -8.533333vw;
	left: 2.92vw;
}

.about_ul li:nth-child(3) .image_area::before{
	width: 9.762667vw;
	height: 9.04vw;
	bottom: -8vw;
	right: 2.92vw;
}






}