@charset "utf-8";
/*////////////////////////////////////
 security
////////////////////////////////////*/
@media screen and (min-width: 768px){
#under_security_startimg{
	background: url("../security/img/security_top.jpg");
	background-position: center;
	background-size: cover;
}
}

@media screen and (min-width: 0px) and (max-width: 767px){
#under_security_startimg{
	background: url("../security/img/security_top.jpg");
	background-position: center;
	background-size: cover;
}
}


/*////////////////////////////////////
 message
////////////////////////////////////*/

@media screen and (min-width: 768px){
#security_area{
	position: relative;
	width: 100%;
	padding: 50px 0 100px 0;
	background-color: #e7e5e5;
	overflow: hidden;
}

#security_place{
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#security_word{
	position: relative;
	width: 100%;
    margin-bottom: 30px;
	text-align: center;
	font-size: clamp(1.8rem,1.4vw,2rem);
 	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.8;
}

#security_word span{
 	font-weight: 700;
}

.security_list1{
    position: relative;
    width: 100%;
    padding: 10% 0 0 20%;
    margin-bottom: 50px;
}

.security_list2{
    position: relative;
    width: 100%;
    padding: 10% 20% 0 0;
    margin-bottom: 50px;
}

.security_list3{
    position: relative;
    width: 100%;
    padding: 10% 0 0 20%;
}

.security_img_area1{
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	aspect-ratio: 16/6;
	clip-path: polygon(0 0, 80% 0, 60% 100%, 0 100%);
	background: url("../security/img/security01.jpg");
	background-size: cover;
}

.security_img_area2{
	position: absolute;
    top: 0;
    right: 0;
	width: 100%;
	aspect-ratio: 16/6;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 40% 100%);
	background: url("../security/img/security02.jpg");
	background-size: cover;
}

.security_word_area{
	position: relative;
	width: 100%;
	padding: 50px;
	background-color: rgba(255,255,255,0.8);
	box-shadow:0 0 5px #999;
}

.security_word_place{
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.security_title{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	font-size: clamp(2.2rem,2.4vw,2.4rem);
	font-weight: 500;
	color: #A00303;
}
.security_word_title{
    position: relative;
	width: 100%;
    font-size: clamp(1.8rem,1.6vw,2rem);
	font-weight: 700;
	color: #333333;
	line-height: 1.8;
}

.security_word_item{
	position: relative;
	width: 100%;
    font-size: 1.6rem;
	font-weight: 400;
	color: #333333;
	line-height: 1.8;
}

}

@media screen and (min-width: 0px) and (max-width: 767px){
#security_area{
	position: relative;
	width: 100%;
	padding: 0 0 100px 0;
	background-color: #e7e5e5;
}

#security_place{
	position: relative;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#security_word{
	position: relative;
	width: 100%;
    margin-bottom: 20px;
	font-size: 1.8rem;
 	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.8;
}

#security_word span{
 	font-weight: 700;
}

.security_list1{
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.security_list2{
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.security_list3{
    position: relative;
    width: 100%;
}

.security_img_area1{
	position: relative;
    top: 0;
    left: 0;
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 3/2;
	background: url("../security/img/security01.jpg");
	background-size: cover;
}

.security_img_area2{
	position: relative;
    top: 0;
    right: 0;
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 3/2;
	background: url("../security/img/security02.jpg");
	background-size: cover;
}

.security_img_area3{
	position: relative;
    top: 0;
    left: 0;
	width: 100%;
	margin-bottom: 20px;
	aspect-ratio: 3/2;
	background: url("../security/img/security03.jpg");
	background-size: cover;
}

.security_word_area{
	position: relative;
	width: 100%;
	padding: 30px;
	background-color: rgba(255,255,255,0.8);
	box-shadow:0 0 5px #999;
}

.security_word_place{
    position: relative;
    width: 100%;
	margin-bottom: 20px;
}

.security_title{
	position: relative;
	width: 100%;
	margin-bottom: 10px;
	font-size: 1.8rem;
	font-weight: 500;
	color: #A00303;
}
.security_word_title{
    position: relative;
	width: 100%;
    font-size: 1.6rem;
	font-weight: 700;
	color: #333333;
	line-height: 1.6;
}

.security_word_item{
	position: relative;
	width: 100%;
    font-size: 1.6rem;
	font-weight: 400;
	color: #333333;
	line-height: 1.6;
}

.security_word_item:not(:last-child) {
    margin-bottom: 20px;
}
}