@charset "UTF-8";

.index_background{
	z-index: 1;
}

.guardians_mv_area{
	z-index: 0;
	background-image: url("../img/guardians_mv_bk.webp");
	background-position: center 80%;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	padding: 25px 20px 60px;
}

.guardians_mv_area h1 {
	margin: auto;
	max-width:500px;
}

.guardians_mv_area h1 span{
	position: relative;
    display: block;
	margin-top:10px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    padding: 5px 0;
    border-radius: 8px;
    filter: drop-shadow(2px 3px 0px #e1cc89);
	background-color: #e22107;
}

.guardians_links{
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	margin: auto;
	max-width: 900px;
	padding-top:40px;
	position: relative;
	z-index: 2;
}
.guardians_links a{
	font-size:18px;
	position: relative;
    display: block;
	margin-top:10px;
    color: #111;
	border:#111 solid 2px;
    font-weight: 500;
    padding: 3px 30px 3px 10px;
    border-radius: 8px;
	transition: 0.2s;
}

.guardians_links a:after {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    border-bottom:#111 2px solid;
    border-right: #111 2px solid;
    top: 34%;
    right: 10px;
    transform: rotate(45deg);
	transition: 0.2s;
}
@media only screen and (min-width: 768px) {
	.guardians_links a:hover{
		color: #fff;
		background-color: #e22107;
		border-color:#e22107;
	}
	.guardians_links a:hover:after {
		border-color: #fff;
	}
	
}

section{
	padding: 30px 20px;
}

article{
	position:relative;
	margin: auto;
	max-width: 900px;
    padding: 80px 80px;
    background-color: rgb(253, 245, 227, .65);
	z-index: 2;
}

article h2{
	font-size: 30px;
	font-weight:600;
	letter-spacing:0.03em;
	padding-bottom:28px;
}

article h3{
	text-align:left;
	font-size: 24px;
	font-weight:600;
	letter-spacing:0.03em;
	margin:30px 0 28px;
	border-left:4px solid #222;
	padding-left:10px;
}

article h4{
	text-align:left;
	font-weight:500;
	font-size: 18px;
	line-height:1.7em;
	letter-spacing:0.03em;
}

article p{
	text-align:left;
	font-size: 18px;
	line-height:1.7em;
	letter-spacing:0.03em;
	padding-bottom:28px;
}

article a {
    color: #222;
    text-decoration: underline;
    transition: .2s;
}
@media only screen and (min-width: 768px) {
	article a:hover{
		opacity:.7;
	}
}

article ul {
	text-align:left;
	padding-left:20px;
	letter-spacing:0.03em;
	padding-bottom:28px;
}
article ul li{
	list-style:disc;
}

.guardians_img_box{
	display: flex;
	flex-wrap: wrap;
	padding-bottom:28px;
}

.guardians_img_box img {
    width: calc(100% / 3);
}


.profile_box{
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}

.profile_wrap{
	display: flex;
	flex-wrap: wrap;
	gap:15px;
	width:calc((100% - 20px) / 2);
}

.profile_wrap_img{
	width:100%;
	max-width:100px;
	margin:0 0 auto;
}
.profile_wrap_img img{
	border-radius:50%;
}

.profile_text{
	width:calc(100% - 115px);
	text-align:left;
}
.profile_text p{
	line-height:1.3em;
	font-size:14px;
	padding-bottom:0;
}
.profile_text p a{
	text-decoration:underline;
	color:#111;
}

.profile_text p:nth-child(1){
	font-size:18px;
	font-weight:600;
	letter-spacing:-0.04em;
}
.profile_text p:nth-child(2){
	display: inline-block;
	color:#222;
	background-color:#e1cc89;
	padding:2px 7px;
	font-weight:600;
}
.profile_text p:nth-child(3){
	font-size:26px;
	font-weight:500;
	letter-spacing:-0.04em;
}

.article_line{
	border-top:2px #333 solid;
	padding-bottom:28px;
}

.company_box{
	padding-bottom: 18px;
}

.company-item {
	display: flex;
	flex-wrap: wrap;
	padding: 12px 5px 8px;
	border-bottom: 1px solid rgba(0,0,0,.6);
}
.company-item div{
	text-align: left;
}
.company-item div:nth-child(1) {
	width: 150px;
	margin: auto 0;
}
.company-item div:nth-child(2) {
	width: calc(100% - 150px);
}

.company-item div:nth-child(2).high_line{
	display: flex;
}
.company-item div:nth-child(2).high_line span{
	margin: auto 0;
}

.company_link{
	text-align: center;
}

@media only screen and (min-width: 768px) {
	
}

@media only screen and (max-width: 1100px) and (min-width: 521px){
	.profile_box{justify-content:center;}
	.profile_wrap {max-width:230px;gap:5px;justify-content:center;}
	.profile_text{display:contents;}
	.profile_text p{width:100%;text-align:center;}
	.profile_text p:nth-child(1){order:1;}
	.profile_wrap_img{order:2;}
	.profile_text p:nth-child(2){order:3;max-width:170px;}
	.profile_text p:nth-child(3){order:4;}
	.profile_text p:nth-child(4){order:5;}
		
}

@media only screen and (max-width: 767px) {
	article{
		margin: auto;
		max-width: 900px;
		padding: 60px 40px;
		background-color: rgb(253, 245, 227, .65);
	}
}


@media only screen and (max-width: 660px) {
	.profile_text p:nth-child(1) {
		font-size: 14px;
	}
}

@media only screen and (max-width: 520px) {
	section{
		padding:10vw 4vw 3vw;
	}
	article{
		padding:50px 7vw 6vw;
	}
	article h2{
		padding-bottom: 15px;
	}
	article h3{
		margin: 20px 0 20px;
		font-size:20px;
	}
	article p {
		font-size: 15px;
		padding-bottom:25px;
	}
	
	.guardians_mv_area h1 span{
		font-size:5vw;
	}
	
	.guardians_links{
		padding:6vw 30px 0;
		gap:0;
	}
	.guardians_links a{
		width:100%;
		background-color: rgb(253, 245, 227, .65);
		padding: 3px 10px;
		font-size:14px;
	}
	
	.profile_box{gap:25px;}
	.profile_wrap{width:100%;}
	.profile_wrap_img{max-width:80px;}
	.profile_text {width: calc(100% - 95px);}
	.profile_text p:nth-child(1){padding:0 0 2px}
	.profile_text p:nth-child(3) {padding:2px 0 0;font-size: 24px;}
	.profile_text p:nth-child(4){font-size:13px;}
	
	.company-item {border-bottom: none;}
	.company-item div:nth-child(1) {
		width: 100%;
		text-align: center;
		background-color: #333;
		color: #fff;
	}
	.company-item div:nth-child(2) {
		width: 100%;
		padding: 5px 5px 0;
	}
	.company-item div:nth-child(2).phone_center{
		text-align: center;
	}
	.company-item div:nth-child(2).high_line span{
		margin: auto;
	}
	
	.footer_nav{
		padding-top: 10vw;
	}

}