/* melsafety-index
****************************************** */
.melsafety-index { background-color: #f5f7fa; }
.melsafety-index img { vertical-align: top; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; }

/* melsafety-container
****************************************** */
.melsafety-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 13px; z-index: +1; }
@media (max-width:767px){
.melsafety-container { margin: 0; padding: 0 20px; }
}

/* melsafety-heading
****************************************** */
.melsafety-heading--A { color: #043888; font-size: 1em; text-align: center; }
.melsafety-heading--A.is-white { color: #fff; }
.melsafety-heading--A small { display: block; font-size: 1.2857em; margin-bottom: 10px; }
.melsafety-heading--A span { display: block; font-size: 2.1428em; font-weight: bold; }
.melsafety-heading--B { color: #043888; font-size: 1em; font-weight: bold; text-align: center; overflow: hidden; }
.melsafety-heading--B small { display: block; font-size: 1em; position: relative; margin-bottom: 15px; }
.melsafety-heading--B small b { background-color: #043888; color: #fff; display: inline-block; font-size: 1.2857em; vertical-align: top; padding: 4px 15px; }
.melsafety-heading--B span { display: inline-block; font-size: 1.7142em; line-height: 1.6; vertical-align: top; position: relative; padding: 0 10px; }
.melsafety-heading--B span::before { background-color: #043888; content: ""; position: absolute; top: calc(0.8em - 1px); left: 100%; width: 100vw; height: 2px; }
.melsafety-heading--B span::after { background-color: #043888; content: ""; position: absolute; top: calc(0.8em - 1px); right: 100%; width: 100vw; height: 2px; }
@media (max-width:767px){
.melsafety-heading--A small { font-size: 0.8571em; margin-bottom: 5px; }
.melsafety-heading--A span { font-size: 1.4285em; }
.melsafety-heading--B small { margin-bottom: 10px; }
.melsafety-heading--B small b { font-size: 0.9642em; padding: 3px 10px; }
.melsafety-heading--B span { font-size: 1.2857em; line-height: 1.5; padding: 0 5px; }
.melsafety-heading--B span::before { top: calc(0.75em - 1px); height: 1px; }
.melsafety-heading--B span::after {top: calc(0.75em - 1px); height: 1px; }
}

/* melsafety-catalog
****************************************** */
.melsafety-catalog { margin-top: 60px; }
.melsafety-catalog.is-border { border-top: 1px solid #cccccc; margin-top: 50px; padding-top: 50px; }
.melsafety-catalog a { background-color: #043888; border: 1px solid #043888; color: #fff; display: flex; justify-content: center; font-weight: bold; }
.melsafety-catalog a:hover { text-decoration: none; }
.melsafety-catalog a span { background: url("/building/security/img/icon_catalog.svg") left center/35px 25px no-repeat; display: flex; align-items: center; padding: 22px 0 22px 50px; }
@media (min-width:768px){
.melsafety-catalog a { transition: background-color 0.3s ease, color 0.3s ease; }
.melsafety-catalog a:hover { background-color: #fff; color: #043888; }
.melsafety-catalog a span { transition: background-image 0.3s ease; }
.melsafety-catalog a:hover span { background-image: url("/building/security/img/icon_catalog_ov.svg"); }
}
@media (max-width:767px){
.melsafety-catalog { margin-top: 30px; }
.melsafety-catalog.is-border { margin-top: 25px; padding-top: 25px; }
.melsafety-catalog a { font-size: 0.8571em; }
.melsafety-catalog a span { background-size: 30px 22px; padding: 19px 0 19px 45px; }
}

/* melsafety-mv
****************************************** */
.melsafety-mv { background: url("/building/security/img/bg_mv.jpg") center center/cover no-repeat; }
.melsafety-mv__column { display: flex; align-items: center; height: 400px; }
.melsafety-mv__column p { width: 100%; max-width: 336px; }
.melsafety-mv__heading { margin-right: 10%; width: 100%; max-width: 360px; }
@media (max-width:767px){
.melsafety-mv { background: url("/building/security/img/bg_mv_sp.jpg") center center/cover no-repeat; }
.melsafety-mv__column { justify-content: center; height: 250px; }
.melsafety-mv__column p { display: none; }
.melsafety-mv__heading { margin-right: 0; width: 232px; max-width: 232px; }
}

/* melsafety-outline
****************************************** */
.melsafety-outline { background-color: #014093; color: #fff; padding: 60px 0 55px 0; }
.melsafety-outline__lead { font-size: 1.2857em; font-weight: bold; line-height: 1.7777; }
.melsafety-outline__lead sup { font-size:0.6666em; vertical-align: top; }
.melsafety-outline__link { border: 2px solid #fff; text-align: center; padding: 12px 12px; margin-top: 30px; }
.melsafety-outline__link a { color: #fff; display: inline-block; vertical-align: top; position: relative; padding-left: 15px; font-size: 1.2857em; font-weight:bold; }
.melsafety-outline__link a:hover { text-decoration:underline; }
.melsafety-outline__link a::before { content: ""; position: absolute; left: 0px; top: 8px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 10px; border-color: transparent transparent transparent #fff; }
.melsafety-outline__note { position: relative; margin-top: 15px; padding-left: 1.2em; }
.melsafety-outline__note span { position: absolute; top: 0px; left: 0px; }
.melsafety-outline__column { display: flex; justify-content: space-between; margin-top: 40px; }
.melsafety-outline__column > div { box-sizing: border-box; background-color: #fff; color: #333; display: block; padding: 10px 15px 10px 10px; width: calc(50% - 10px); }
.melsafety-outline__column > div:hover { text-decoration: none; }
.melsafety-outline__column-note { font-size: 0.8571em; margin-top: 10px; }
.melsafety-outline__column > div > .melsafety-outline__column-note { display: none; }
.melsafety-outline__flex { display: flex; align-items: center; }
.melsafety-outline__flex > p { align-self: flex-start; margin-right: 3.5398%; width: 47.7876%; }
.melsafety-outline__flex > dl { flex: 1; }
.melsafety-outline__flex > dl dt small { display: block; }
.melsafety-outline__flex > dl dt span { display: block; margin-top: 10px; width: 100%; max-width: 228px; }
.melsafety-outline__flex > dl dd { margin-top: 20px; }
.melsafety-outline__flex > dl dd ul li { line-height: 1.5; position: relative; padding-left: 5em; }
.melsafety-outline__flex > dl dd ul li span { position: absolute; top: 0px; left: 0px; }
.melsafety-outline__flex > dl dd ul li sup { font-size: 0.7142em; vertical-align: top; }
@media (min-width:768px){
.melsafety-outline__column > a > p { transition: opacity 0.3s ease; }
.melsafety-outline__column > a > dl { transition: opacity 0.3s ease; }
.melsafety-outline__column > a:hover > p { opacity: 0.7; }
.melsafety-outline__column > a:hover > dl { opacity: 0.7; }
}
@media (max-width:767px){
.melsafety-outline { padding: 35px 0 30px 0; }
.melsafety-outline__lead { font-size: 1em; line-height: 1.6428; }
.melsafety-outline__lead sup { font-size:0.7142em; }
.melsafety-outline__note { font-size: 0.8571em; margin-top: 13px; }
.melsafety-outline__column { display: block; margin-top: 30px; }
.melsafety-outline__column > div { padding: 15px 5px 15px 15px; width: auto; }
.melsafety-outline__column > div + div { margin-top: 15px; }
.melsafety-outline__column-note { font-size: 0.7142em; margin-top: 10px; }
.melsafety-outline__column > div > .melsafety-outline__column-note { display: block; }
.melsafety-outline__flex { display: flex; align-items: center; }
.melsafety-outline__flex > p { margin-right: 13px; width: 125px; }
.melsafety-outline__flex > dl dt small { font-size: 0.8571em; line-height: 1.2; }
.melsafety-outline__flex > dl dt span { margin-top: 5px; max-width: 155px; }
.melsafety-outline__flex > dl dd { margin-top: 8px; }
.melsafety-outline__flex > dl dd ul li { font-size: 0.8571em; line-height: 1.58; }
.melsafety-outline__flex > dl dd ul li b { font-weight: bold; }
.melsafety-outline__flex > dl dd ul li sup { font-size: 0.8333em; }
.melsafety-outline__flex > dl dd > .melsafety-outline__column-note { display: none; }
.melsafety-outline__link a { font-size:1em; }
.melsafety-outline__link { margin-top: 14px; line-height: 1.6; text-align:left; border-width:1px; }
}

/* melsafety-navi
****************************************** */
.melsafety-navi { background-color: #043888; border-top: 1px solid #fff; padding: 25px 0; }
.melsafety-navi__column { display: flex; border-right: 1px solid #fff; }
.melsafety-navi__column a { box-sizing: border-box; border-left: 1px solid #fff; color: #fff; display: block; font-weight: bold; text-align: center; padding: 4px; width: 33.3333%; }
.melsafety-navi__column a:hover { text-decoration: none; }
.melsafety-navi__column a span { display: inline-block; vertical-align: top; position: relative; padding-left: 18px; }
.melsafety-navi__column a span::before { content: ""; position: absolute; left: 0px; top: calc(50% - 3px); width: 0; height: 0; border-style: solid; border-width: 7px 3px 0 3px; border-color: #fff transparent transparent transparent; }
@media (min-width:768px){
.melsafety-navi__column a:hover span { text-decoration: underline; }
}
@media (max-width:767px){
.melsafety-navi { padding: 15px 0 20px 0; }
.melsafety-navi__column { display: block; border-right: none; }
.melsafety-navi__column a { border-left: none; font-size: 0.8571em; text-align: left; padding: 15px 0; width: auto; }
.melsafety-navi__column a + a { border-top: 1px solid #fff; }
.melsafety-navi__column a span { display: block; padding-left: 26px; }
.melsafety-navi__column a span::before { left: 10px; top: calc(50% - 3px); }
}

/* melsafety-features
****************************************** */
.melsafety-features { overflow: hidden; margin-top: 135px; }
.melsafety-features__heading { border-bottom: 1px solid #cccccc; font-size: 1.4285em; font-weight: bold; margin: 25px 0 40px 0; padding-bottom: 15px; }
.melsafety-features__legend { display: flex; justify-content: flex-end; margin-top: 40px; }
.melsafety-features__legend li { display: flex; align-items: center; }
.melsafety-features__legend li + li { margin-left: 13px; }
.melsafety-features__legend li img { margin-right: 5px; width: 20px; }
.melsafety-features__section { margin-top: 15px; }
.melsafety-features__section + .melsafety-features__section { margin-top: 80px; }
.melsafety-features__column { display: flex; flex-wrap: wrap; margin: 30px -12px 0 -12px; }
.melsafety-features__cell { box-sizing: border-box; margin: 0 12px; width: calc(25% - 24px); }
.melsafety-features__card--A { background-color: #fff; border: 1px solid #dbdbdb; }
.melsafety-features__card--A p { border-bottom: 1px solid #dbdbdb; }
.melsafety-features__card--A ul { display: flex; justify-content: flex-end; margin-top: 10px; padding: 0 10px; }
.melsafety-features__card--A ul li + li { margin-left: 5px; }
.melsafety-features__card--A ul li img { width: 20px; }
.melsafety-features__card--A dl { padding: 15px 19px 24px 19px; }
.melsafety-features__card--A dl dt { font-size: 1.2857em; font-weight: bold; text-align: center; }
.melsafety-features__card--A dl dd { line-height: 1.5714; margin-top: 10px; }
.melsafety-features__card--B ul { display: flex; }
.melsafety-features__card--B ul li + li { margin-left: 5px; }
.melsafety-features__card--B ul li img { width: 20px; }
.melsafety-features__card--B:nth-of-type(n+5) { margin-top: 40px; }
.melsafety-features__card-img { background-color: #fff; border: 1px solid #dbdbdb; margin-top: 10px; }
.melsafety-features__card-img--nb { background-color: #fff; margin-top: 10px; }
.melsafety-features__card-text { font-size: 1.2857em; font-weight: bold; text-align: center; margin-top: 15px; }
.melsafety-features__banner a { display: block; margin: 40px 0 50px; transition: opacity 0.3s ease; }
.melsafety-features__banner a:hover { opacity: 0.5; }
.melsafety-features__banner a img { width: 100%; vertical-align: top; }
@media (max-width:767px){
.melsafety-features { margin-top: 55px; }
.melsafety-features__heading { font-size: 1.1428em; margin: 30px 0 30px 0; padding-bottom: 10px; }
.melsafety-features__legend { justify-content: center; margin-top: 15px; }
.melsafety-features__legend li { display: flex; align-items: center; font-size: 0.7857em; line-height: 1.2; }
.melsafety-features__legend li + li { margin-left: 10px; }
.melsafety-features__legend li img { width: 17px; }
.melsafety-features__section { margin-top: 25px; }
.melsafety-features__section + .melsafety-features__section { margin-top: 30px; }
.melsafety-features__column { margin: 25px -8px 0 -8px; }
.melsafety-features__cell { margin: 0 8px; width: calc(50% - 16px); }
.melsafety-features__card--A ul { font-size: 0; line-height: 0; margin-top: 5px; padding: 0 5px; }
.melsafety-features__card--A ul li img { width: 17px; }
.melsafety-features__card--A dl { padding: 10px 10px 15px 10px; }
.melsafety-features__card--A dl dt { font-size: 1em; line-height: 1.7142; }
.melsafety-features__card--A dl dd { font-size: 0.8571em; line-height: 1.5; margin-top: 5px; }
.melsafety-features__card--A:nth-of-type(n+3) { margin-top: 16px; }
.melsafety-features__card--B ul { font-size: 0; line-height: 0;}
.melsafety-features__card--B ul li img { width: 17px; }
.melsafety-features__card--B:nth-of-type(n+3) { margin-top: 30px; }
.melsafety-features__card--B:nth-of-type(n+5) { margin-top: 30px; }
.melsafety-features__card-text { font-size: 1em; line-height: 1.7142; margin-top: 10px; }
.melsafety-features__banner a { margin: 20px 0 30px; }
.melsafety-features__banner a:hover { opacity: 1; }
}
/* melsafety-cloudy
****************************************** */
.melsafety-cloudy { margin-top:120px; }
.melsafety-cloudy__column { display: flex; justify-content: space-between; margin-top:30px; }
.melsafety-cloudy__cell { width:31.25%; }
.melsafety-cloudy__subheading { font-size: 1.2857em; font-weight:bold; color: #007cc3; display: flex;align-items: baseline; }
.melsafety-cloudy__subheading .melsafety-cloudy__subheading-bcolor { background-color: #007cc3; position: relative; color: #fff; font-size: 0.777em; width: 33.07%; display: inline-block; padding: 4px 0 3px; text-align: center; margin-right: 20px; }
.melsafety-cloudy__subheading .melsafety-cloudy__subheading-bcolor::after { content: ""; position: absolute; right: -10px; top: calc(50% - 3px); width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 10px; border-color: transparent transparent transparent #007cc3; }
.melsafety-cloudy__subcolumn { display:flex; margin-top:20px; justify-content:space-between; }
sup { vertical-align:super; font-size: smaller; }
.melsafety-cloudy__list { width:60%; }
.melsafety-cloudy__list li { position: relative; padding-left:1em; }
.melsafety-cloudy__list li + li { margin-top:3px; }
.melsafety-cloudy__list li span { position: absolute; left: 0 }
.melsafety-cloudy__card-img { width: 37%; margin-top: 5px; }
.melsafety-cloudy .melsafety-system__note--no { margin-top: 30px; }
.melsafety-cloudy .melsafety-system__note--no p.modal{display: inline-block;}
.melsafety-cloudy__link-block { display:flex; justify-content: space-between; margin-top: 63px; }
.melsafety-cloudy__link { width:49.167%; }
.melsafety-cloudy__link a { background-color: #043888; color: #fff; font-weight: bold; text-decoration: none; padding: 25px 20px 24px; display: block; text-align: center; }
.melsafety-cloudy__link a:hover { opacity:0.7; }
.icon_blank{ width: 17px; margin-left:10px }

@media (max-width:767px){
.melsafety-cloudy { margin-top: 82px; }
.melsafety-cloudy__subheading { font-size: 1.14286em; }
.melsafety-cloudy__subheading .melsafety-cloudy__subheading-bcolor { font-size: 0.875em; padding:1px 0 1px; width:28.36%; }
.melsafety-cloudy__subheading .melsafety-cloudy__subheading-bcolor::after { border-width:3px 0 3px 5px; right:-5px; }
.melsafety-cloudy__column { display:block; margin-top: 22px; }
.melsafety-cloudy__cell { width:100%; }
.melsafety-cloudy__cell + .melsafety-cloudy__cell { margin-top:35px; }
.melsafety-cloudy__subheading { justify-content:center; }
.melsafety-cloudy__subcolumn { margin-top:15px; }
.melsafety-cloudy__list { width: 62%; }
.melsafety-cloudy__card-img { margin-top:6px; width:37%; }
.melsafety-cloudy__list li { font-size: 0.85714em; letter-spacing: 0.04em; line-height: 1.4em; }
.melsafety-cloudy .melsafety-system__note--no { margin-top: 15px; }
.melsafety-cloudy__link-block { display:block; margin-top:30px; }
.melsafety-cloudy__link { width:100% }
.melsafety-cloudy__link + .melsafety-cloudy__link { margin-top:18px; }
.melsafety-cloudy__link a { font-size: 0.8571em; padding:22px 20px 20px; }
img.icon_blank { width:11px; vertical-align:1px; margin-left:1px; }

}

/*	security_modal
**************************************************** */
.security_modal_bg { background-color: rgba(0,0,0,0.6); display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; z-index: 200; }
.security_modal { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; display: none; position: absolute; top: 0px; left: 0px;  width: calc(100% - 26px); max-width: 954px; z-index: 210; }
.security_modal_block{ padding: 98px 65px 83px 65px; }
.security_modal .modal_close { cursor: pointer; font-size: 0; line-height: 0; position: absolute; top: -38px; right: 0px; }
.security_modal .modal_close img { width: 23px; }
.security_modal .modal_img { overflow: hidden; margin-top: 25px; }
.security_modal .modal_img img { width: 100%; }

@media only screen and (max-width:767px){
.security_modal {  width: calc(100% - 40px); }
.security_modal .security_modal_block{ padding: 40px 20px 40px 20px; }
.security_modal .modal_close img { width: 28px; }
.security_modal .modal_img { margin-top: 15px; }
}


/* melsafety-system
****************************************** */
.melsafety-system { background-color: #e6edf7; margin-top: 220px; padding: 135px 0 140px 0; }
.melsafety-system__section + .melsafety-system__section { margin-top: 125px; }
.melsafety-system__sub-section { margin-top: 45px; }
.melsafety-system__sub-section + .melsafety-system__sub-section { margin-top: 95px; }
.melsafety-system__exp { margin-top: 30px; }
.melsafety-system__link { margin-top:36px; }
.melsafety-system__link a { color: #333; display: inline-block; vertical-align: top; position: relative; padding-left: 15px; }
.melsafety-system__link a:hover { text-decoration:underline; }
.melsafety-system__link a::before { content: ""; position: absolute; left: 0px; top: 5px; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 10px; border-color: transparent transparent transparent #333; }
.melsafety-system__table { margin-top: 30px; }
.melsafety-system__table sup { font-size: 0.7142em; vertical-align: top; }
.melsafety-system__table table { width: 100%; }
.melsafety-system__table table th { background-color: #f0f3f7; border: 1px solid #666; font-weight: bold; padding: 9px 19px; }
.melsafety-system__table table td { background-color: #fff; border: 1px solid #666; text-align: center; padding: 9px 19px; }
.melsafety-system__table table thead th { background-color: #043685; color: #fff; }
.melsafety-system__table table tbody th { width: 19em; }
.melsafety-system__note { line-height: 1.7142; margin-top: 15px; }
.melsafety-system__note li { position: relative; padding-left: 1em; }
.melsafety-system__note li span { position: absolute; top: 0px; left: 0px; }
.melsafety-system__note--no { line-height: 1.7142; margin-top: 15px; }
.melsafety-system__note--no li { position: relative; padding-left: 2em; }
.melsafety-system__note--no li .icon_blank{width: 12px;margin-left: 0;vertical-align: middle!important;}
.melsafety-system__note--no li span { position: absolute; top: 0px; left: 0px; }
@media (max-width:767px){
.melsafety-system { margin-top: 48px; padding: 45px 0 50px 0; }
.melsafety-system__section + .melsafety-system__section { margin-top: 55px; }
.melsafety-system__sub-section { margin-top: 25px; }
.melsafety-system__sub-section + .melsafety-system__sub-section { margin-top: 35px; }
.melsafety-system__exp { margin-top: 15px; }
.melsafety-system__link { margin-top: 10px; }
.melsafety-system__link a { font-size: 0.85714em; }
.melsafety-system__table { font-size: 0.8571em; margin-top: 15px; }
.melsafety-system__table sup { font-size: 0.8333em; }
.melsafety-system__table table th { padding: 9px 9px; }
.melsafety-system__table table td { text-align: left; padding: 9px 9px; }
.melsafety-system__table table tbody th { width: auto; white-space: nowrap; }
.melsafety-system__note { font-size: 0.8571em; line-height: 1.58; margin-top: 10px; }
.melsafety-system__note--no { font-size: 0.8571em; line-height: 1.58; margin-top: 10px; }
}

/* melsafety-solution
****************************************** */
.melsafety-solution { background-color: #043888; overflow: hidden; padding: 100px 0 90px 0; }
.melsafety-solution__column { display: flex; justify-content: center; margin: 35px -5px 0 -5px; }
.melsafety-solution__column a { background-color: #fff; border: 1px solid #cbcbcb; box-sizing: border-box; color: #333; display: block; margin: 0 5px; width: calc(28.8333% - 10px); }
.melsafety-solution__column a:hover { text-decoration: none; }
.melsafety-solution__column a p { display: block; font-weight: bold; padding: 15px; }
.melsafety-solution__column a p>span{display: inline-block;vertical-align: top;padding-left: 12px;position: relative;}
.melsafety-solution__column a p>span::before { content: ""; position: absolute; left: 0px; top: calc(50% - 3px); width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 7px; border-color: transparent transparent transparent #333; }
@media (min-width:768px){
.melsafety-solution__column a img,
.melsafety-solution__column a span { transition: opacity 0.3s ease; }
.melsafety-solution__column a:hover img,
.melsafety-solution__column a:hover p { opacity: 0.5; }
}
@media (max-width:767px){
.melsafety-solution { padding: 45px 0 50px 0; }
.melsafety-solution__column { justify-content: flex-start; flex-wrap: wrap; margin: 0 -7px; padding-top: 3px; }
.melsafety-solution__column a { margin: 14px 7px 0 7px; width: calc(50% - 14px); }
.melsafety-solution__column a p { padding: 10px; }
}

/* fixed-banner
****************************************** */
.fixed-banner { position: fixed; top: calc(50% + 118px); right: 20px; z-index: 101; background-color: #fff; }
.fixed-banner a { display: block; font-size: 0; border: 3px solid #fff; transition: opacity 0.3s ease; }
.fixed-banner a:hover { opacity: 0.5; }
@media (max-width:767px){
.fixed-banner { top: auto; right: 0; bottom: 145px; }
.fixed-banner a { position: relative; padding: 5px 10px 35px; font-size: 1em; background-color: #007cc3; border-width: 1px; }
.fixed-banner a:before, .fixed-banner a:after { position: absolute; display: block; content: ''; }
.fixed-banner a:before { bottom: 10px; left: calc(50% - 8px); width: 16px; height: 16px; background-color: #fff; border-radius: 50%; }
.fixed-banner a:after { bottom: 15px; left: calc(50% - 2px); width: 0; height: 0; border-width: 3px 0 3px 6px; border-style: solid; border-color: transparent transparent transparent #007cc3; }
.fixed-banner a:hover { opacity: 1; }
.fixed-banner a > span { display: block; margin-bottom: 10px; width: 16px;font-weight: 700; font-size: 0.92857em; line-height: 16px; writing-mode: vertical-rl; text-orientation: upright; color: #fff; }
.fixed-banner a > picture > img { width: 16px; }
}