#visual { position: relative; width: 100%; height: 35vw; min-height: 584px;}
#visual .box-img { width: 100%; height: 100%; position: relative; overflow: hidden; }
#visual .box-img picture {display: block; width: 100%; height: 100%;}
#visual .box-img picture source,
#visual .box-img img { height: 100%; width: 100%; object-fit: cover;  }
#visual .box-copy { position: absolute; top: 50%; left: 0; transform:translateY(-50%); padding-left: 5rem;}
#visual .box-copy strong {
    font-family: "Volvo Centum", "NotoSansCJK", sans-serif;
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: clamp(32px, 5dvw, 58px);
    color: #fff;
    line-height: normal;
    letter-spacing: normal;
}
#visual .box-copy p {font-size: 1.25rem; font-weight: 500; color: #fff;  line-height: 1.4; }


.inner {width: 100%; max-width: 1558px; padding: 70px 24px 0; margin: auto;}
.title {display: flex; align-items: center; justify-content: center; flex-direction: column; height: 209px; background-color: #fafafa; }
.title p {font-size: 28px; font-weight: 500;}
.title span {display: block; padding-top: 20px; font-weight: 300; color: #000000a3; text-align: center; line-height: 1.4; word-break: keep-all;}

.serviceGuide {padding-top: 50px; width:100%; max-width:1185px; margin:0 auto; }
.serviceGuide.my25 {width:100%; max-width:100%;}
.serviceGuide strong { display: block; margin-bottom: 56px; font-size: 32px; text-align: center; font-weight: 500; color: rgba(0, 0, 0, 0.96);}

.pdfBox {display: flex; justify-content: center; gap: 24px}
.pdfBox .item {display: flex; flex-direction: column; width: calc(100% / 3 - 15px);}
.pdfBox .imgBox {width: 100%; aspect-ratio: 16 / 9;}
.pdfBox .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.pdfBox .txtBox {padding-top: 24px;}
.pdfBox .txtBox p {display: block; text-align: left; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: normal;}
.pdfBox .txtBox a {position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 30px; color: #2a609d; letter-spacing: normal;}
.pdfBox .txtBox a::after {content: ""; display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); border-top: 2px solid; border-right: 2px solid; }
.pdfBox .txtBox a:hover {text-decoration: underline #2a609d;}
.serviceGuide + .serviceGuide {padding-top: 120px;}

.links {margin: 80px auto 90px; width: 80%; max-width: 845px;}
.links strong {display: block; margin-bottom: 24px; font-weight: 500; color: #000000f5; text-align: center; }
.links .flexBox {display: flex; flex-wrap: wrap; justify-content: space-between; }
.links .flexBox a {position: relative; display: block; width: 49%; padding: 1.5rem 0; color: #2a609d; font-weight: 300; line-height: 1.4; letter-spacing: normal; font-family: Arial; border-top: 1px solid #0000001f; border-bottom: 1px solid #0000001f; }
.links .flexBox a::after {content: ""; position: absolute; top: 50%; transform: rotate(45deg) translateY(-50%); right: 10px; width: 10px; height: 10px; border-top: 1px solid #000000a3; border-right: 1px solid #000000a3; }
.links .flexBox a:nth-of-type(3) {border-top: none;}
.links .flexBox a:hover {color: #000000f5;}

.br_1024 {display: none;}

@media (max-width: 1600px) {

	.inner { max-width: 1233px;}
	.serviceGuide.my25 {width:100%; max-width:1185px;}
	.serviceGuide.my25 .pdfBox {flex-wrap: wrap; justify-content: center; gap: 60px 24px;}
	.serviceGuide.my25 .pdfBox .item {width: calc(100% / 3 - 16px);}
}

@media (max-width:1024px) {
    .br_1024 {display: block;}
    #visual .box-copy {padding-left: 2rem;}

}
@media (max-width:800px) {
    #visual .box-copy {}

    .pdfBox {flex-wrap: wrap; justify-content: flex-start; gap: 60px 24px;}
    .pdfBox .item {width: calc(100% / 2 - 15px);}
	.serviceGuide.my25 .pdfBox .item {width: calc(100% / 2 - 15px);}

    .br_800 {display: block;}
}

@media (max-width:650px) {

    .serviceGuide strong { margin-bottom: 35px; font-size: 26px;}
    .pdfBox {gap: 30px 0;}
    .pdfBox .item {width: 100%;}
	.serviceGuide.my25 .pdfBox {gap:30px 0;}
	.serviceGuide.my25 .pdfBox .item {width:100%;}
    .pdfBox .txtBox {padding-top: 20px;}
    .pdfBox .txtBox p {font-size: 17px;}
    .pdfBox .txtBox a { margin-top: 20px; font-size: 15px;}
    .pdfBox .txtBox a::after {border-width: 1px;}
    .serviceGuide + .serviceGuide {padding-top: 80px;}
}

@media (max-width: 480px) {
 
    #visual {min-height: 462px;}
    #visual .box-copy {top: 2rem; transform: none;}
    
    .inner {padding: 55px 20px 0;}
    .title {height: 180px; padding: 0 20px;}
    .title p {font-size: 26px;}
    .title span {font-size: 15px; max-width: 200px;}
    
    .links {margin: 80px auto 70px; width: 100%;}
    .links strong { margin-bottom: 16px; text-align: left;}
    .links .flexBox a {width: 100%; padding: 16px 0;}
    .links .flexBox a:nth-of-type(2) {border-top: none;}
}