@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&display=swap');

body{background:url(/rs/907-WIE-286/images/SM_secdiagnosis-bg.jpg) no-repeat center center;background-size:cover;min-width:1260px;}
#page-securitycheck{font-family: "Noto Sans JP", sans-serif;font-weight:500;font-size:18px;font-feature-settings:"palt";-webkit-font-feature-settings:"palt";}
#page-securitycheck *{box-sizing:border-box;}
#page-securitycheck h1,#page-securitycheck h2,#page-securitycheck h3,#page-securitycheck h4,#page-securitycheck h5{font-family: "Noto Sans JP", sans-serif;margin:0;padding:0;}
#page-securitycheck .container{max-width:1240px;margin:auto;padding:0 40px;}
#page-securitycheck img{max-width:100%;height:auto;vertical-align:bottom;}
#page-securitycheck .v-sp{display:none!important;}
#page-securitycheck .v-tablet{display:none!important;}
#page-securitycheck .v-pc{display:block!important;}

/* mv */
#page-securitycheck #block-mv{background:url(/rs/907-WIE-286/images/SM_secdiagnosis-mv_bg.jpg) no-repeat center bottom #fff;background-size:cover;}
#page-securitycheck #block-mv .mv-inner{display:flex;align-items:center;padding-top:10px;gap:6%;}
#page-securitycheck #block-mv .ttl{flex:1;text-align:center;position:relative;padding:0 20px 40px;margin:0 0 50px;line-height:0;}
#page-securitycheck #block-mv .ttl::before{content:"";display:block;width:44px;height:44px;border-top:12px solid #312e51;border-left:12px solid #312e51;opacity:0.2;position:absolute;top:0;left:0;box-sizing:border-box;}
#page-securitycheck #block-mv .ttl::after{content:"";display:block;width:44px;height:44px;border-top:12px solid #312e51;border-right:12px solid #312e51;opacity:0.2;position:absolute;top:0;right:0;box-sizing:border-box;}
#page-securitycheck #block-mv .ttl small{display:inline-block;font-size:24px;font-weight:bold;background:#312e51;color:#fff;line-height:1.2;border-radius:8px;padding:8px 20px;margin-bottom:15px;letter-spacing:0.04em;}
#page-securitycheck #block-mv .ttl span{display:block;font-size:65px;font-weight:900;letter-spacing:0.02em;color:#cc0033;line-height:1.25;}
#page-securitycheck #block-mv .ttl span::before{content:"";display:block;width:44px;height:44px;border-bottom:12px solid #312e51;border-left:12px solid #312e51;opacity:0.2;position:absolute;bottom:0;left:0;box-sizing:border-box;}
#page-securitycheck #block-mv .ttl span::after{content:"";display:block;width:44px;height:44px;border-bottom:12px solid #312e51;border-right:12px solid #312e51;opacity:0.2;position:absolute;bottom:0;right:0;box-sizing:border-box;}
#page-securitycheck #block-mv .img{max-width:41%;position:relative;z-index:2;}
#page-securitycheck #block-mv .box{border:4px solid #cc0033;border-radius:32px;padding:25px 40px 35px;text-align:center;background:#fff;margin-top:-60px;position:relative;z-index:1;}
#page-securitycheck #block-mv .box .box-ttl{margin-bottom:25px;}
#page-securitycheck #block-mv .box .box-ttl > span{display:inline-block;font-size:30px;font-weight:bold;letter-spacing:0.1em;position:relative;padding-bottom:10px;}
#page-securitycheck #block-mv .box .box-ttl > span::after{content:"";display:block;width:92%;height:4px;border-bottom:4px dashed #cc0033;position:absolute;left:4%;bottom:0;}
#page-securitycheck #block-mv .box .box-ttl > span > span{color:#cc0033;}
#page-securitycheck #block-mv .box p{line-height:2;letter-spacing:0.06em;}
#page-securitycheck #block-mv .box::before{content:"";display:block;width:80px;height:4px;background:#fff;position:absolute;top:100%;left:50%;margin-left:-40px;z-index:1;}
#page-securitycheck #block-mv .box::after{content:"";display:block;width:59px;height:36px;background:url(/rs/907-WIE-286/images/SM_secdiagnosis-arrow.png) no-repeat;background-size:100% auto;position:absolute;top:100%;left:50%;margin-left:-29px;z-index:2;}

/* main */
#page-securitycheck #block-main{text-align:center;padding-top:40px;padding-bottom:60px;position:relative;}
#page-securitycheck #block-main::before{content:"";display:block;width:100%;height:25%;position:absolute;top:0;left:0;z-index:-1;background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);}
#page-securitycheck #block-main .ttl{font-size:36px;font-weight:bold;letter-spacing:0.1em;margin-bottom:15px;}
#page-securitycheck #block-main .ttl > span{display:inline-block;position:relative;line-height:1.1;padding:0 30px;}
#page-securitycheck #block-main .ttl > span::before{content:"";display:block;width:4px;height:60px;background:#cc0033;transform:rotate(-30deg);position:absolute;bottom:0;right:100%;}
#page-securitycheck #block-main .ttl > span::after{content:"";display:block;width:4px;height:60px;background:#cc0033;transform:rotate(30deg);position:absolute;bottom:0;left:100%;}
#page-securitycheck #block-main .ttl > span > span{font-size:90px;color:#cc0033;font-family: "Arial","Noto Sans JP", sans-serif;margin-right:8px;}
#page-securitycheck #block-main p{line-height:2;letter-spacing:0.06em;}
#page-securitycheck #block-main .list-hint{display:flex;flex-wrap:wrap;gap:40px;margin:60px 0 0 0;counter-reset:item;list-style:none;padding:0;}
#page-securitycheck #block-main .list-hint > li{width:calc((100% - 40px) / 2);padding:50px 30px 40px;background:#fff;border-radius:32px;box-shadow:0 0 40px rgba(22,22,25,0.24);position:relative;}
#page-securitycheck #block-main .list-hint > li::before{content:counter(item);counter-increment:item;padding-top:2px;display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:#333;color:#fff;font-size:30px;font-weight:bold;font-family: "Arial","Noto Sans JP", sans-serif;border-radius:100%;line-height:1;position:absolute;top:-26px;left:50%;margin-left:-26px;box-sizing:border-box;}
#page-securitycheck #block-main .list-hint > li .list-ttl{font-size:26px;font-weight:bold;letter-spacing:0.1em;line-height:1.38;margin-bottom:20px;}
#page-securitycheck #block-main .list-hint > li .list-ttl span{color:#cc0033;}
#page-securitycheck #block-main .list-hint > li .list-ttl small{font-size:18px;}
#page-securitycheck #block-main .list-hint > li .list-btn{margin-top:40px;}
#page-securitycheck #block-main .list-hint > li .list-btn a{display:block;padding:18px 50px;margin:auto;max-width:420px;width:100%;background:#cc0033;color:#fff;font-size:28px;font-weight:bold;letter-spacing:0.1em;border-radius:100px;box-shadow:0 10px 0 #840021;position:relative;line-height:1.2;transition:.2s ease;text-decoration:none!important;}
#page-securitycheck #block-main .list-hint > li .list-btn a::after{content:"";display:block;width:20px;height:20px;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(-45deg);position:absolute;right:30px;top:50%;margin-top:-8px;box-sizing:border-box;}
#page-securitycheck #block-main .list-hint > li .list-btn a:hover{box-shadow:none;transform:translateY(10px);}

@media screen and (max-width:768px){
	body{min-width:100%;background-image:url(/rs/907-WIE-286/images/SM_secdiagnosis-bg_sp.jpg);}
	#page-securitycheck .container{padding:0 5%;}
	#page-securitycheck .v-pc{display:none!important;}
	#page-securitycheck .v-tablet{display:block!important;}

	#page-securitycheck #block-mv{background-image:url(/rs/907-WIE-286/images/SM_secdiagnosis-mv_bg_sp.jpg);background-size:100% auto;background-position:center top;}
	#page-securitycheck #block-mv .mv-inner{display:block;padding:20px 0 0;}
	#page-securitycheck #block-mv .ttl{padding:20px 10px 30px;margin:0;}
	#page-securitycheck #block-mv .ttl small{font-size:3.6vw;}
	#page-securitycheck #block-mv .ttl span{font-size:9vw;}
	#page-securitycheck #block-mv .ttl::before,
	#page-securitycheck #block-mv .ttl::after,
	#page-securitycheck #block-mv .ttl span::before,
	#page-securitycheck #block-mv .ttl span::after{border-width:8px;}
	#page-securitycheck #block-mv .img{max-width:55%;margin:auto;padding-left:10%;}
	#page-securitycheck #block-mv .box{margin-top:-40px;padding-top:35px;}

	#page-securitycheck #block-main::before{height:100px;}
	#page-securitycheck #block-main .list-hint{display:block;}
	#page-securitycheck #block-main .list-hint > li{width:100%;}
	#page-securitycheck #block-main .list-hint > li + li{margin-top:40px;}
}

@media screen and (max-width:622px){
	#page-securitycheck{font-size:16px;}
	#page-securitycheck .v-tablet{display:none!important;}
	#page-securitycheck .v-sp{display:block!important;}

	#page-securitycheck #block-mv .ttl small{font-size:4.6vw;margin-bottom:10px;}
	#page-securitycheck #block-mv .ttl span{font-size:12vw;line-height:1.15;}
	#page-securitycheck #block-mv .img{max-width:70%;margin-top:-10px;}
	#page-securitycheck #block-mv .box{padding:30px 20px;margin-top:-30px;border-width:3px;border-radius:20px;}
	#page-securitycheck #block-mv .box .box-ttl{margin-bottom:20px;}
	#page-securitycheck #block-mv .box .box-ttl > span{font-size:26px;line-height:1.3;padding-bottom:15px;}
	#page-securitycheck #block-mv .box .box-ttl > span::after{border-width:3px;}
	#page-securitycheck #block-mv .box p{text-align:left;line-height:1.8;}
	#page-securitycheck #block-mv .box::before{width:60px;margin-left:-30px;}
	#page-securitycheck #block-mv .box::after{width:40px;height:24px;margin-left:-20px;}

	#page-securitycheck #block-main{padding-bottom:20px;}
	#page-securitycheck #block-main .ttl{font-size:26px;}
	#page-securitycheck #block-main .ttl > span{padding:0 8px;}
	#page-securitycheck #block-main .ttl > span > span{font-size:64px;margin-right:2px;}
	#page-securitycheck #block-main .ttl > span::before,
	#page-securitycheck #block-main .ttl > span::after{height:45px;}
	#page-securitycheck #block-main p{text-align:left;}
	#page-securitycheck #block-main .list-hint{margin-bottom:40px;}
	#page-securitycheck #block-main .list-hint > li{border-radius:20px;padding:40px 30px 30px;box-shadow:0 0 15px rgba(22,22,25,0.24);}
	#page-securitycheck #block-main .list-hint > li::before{width:48px;height:48px;font-size:24px;margin-left:-24px;}
	#page-securitycheck #block-main .list-hint > li .list-ttl{font-size:22px;}
	#page-securitycheck #block-main .list-hint > li .list-btn{margin-top:25px;}
	#page-securitycheck #block-main .list-hint > li .list-btn a{font-size:22px;box-shadow:0 7px 0 #840021;}
	#page-securitycheck #block-main .list-hint > li .list-btn a::after{width:14px;height:14px;margin-top:-5px;}
}