@charset "utf-8";

/*
 * File    : sub-safety.css
 * Author  : STUDIO-JT
 *
 * SUMMARY :
 * LAYOUT
 * VISUAL
 * CONE
 * OVERVIEW
 * VALUE
 * CASE
 * DATA
 * PORTFOLIO
 * WX DESIGN
 * WITH US
 * CONTACT
 * ENDING
 * HOVER
 */



/* **************************************** *
 * LAYOUT
 * **************************************** */
body.page-template-safety { background: var(--color-black); }

/* FOOTER */
body.page-template-safety .footer__logo-basic { display: none; }
body.page-template-safety .footer__logo-point { display: block; }

/* CONTAINER */
body.page-template-safety .main-container { padding-bottom: 0; }

/* SCROLL TOP */
body.page-template-safety .go-top { background: var(--color-primary); }
body.page-template-safety .go-top .jt-icon path { fill: var(--color-black); }

/* GLOBAL */
.safety-section { padding-top: 240rem; position: relative; }

.safety-section__head { display: grid; grid-template-columns: 1fr 0.66fr; gap: 20rem; margin-bottom: 100rem; }
.safety-section__head-label { display: block; margin-bottom: 15rem; padding-left: 7rem; font-size: 20rem; line-height: 1.5; font-weight: 500; color: var(--color-white); }
.safety-section__head-title { font-size: 50rem; line-height: 1.25; font-weight: 500; color: var(--color-white); }
.safety-section__head-desc { font-size: 20rem; line-height: 1.5; font-weight: 400; color: var(--color-white); }
.safety-section__head-desc + .safety-section__head-desc { margin-top: 40rem; }
.safety-section__head-sub { font-size: 16rem; line-height: 1.5; font-weight: 700; color: #959595; }
.safety-section__head-sub + .safety-section__head-sub { margin-top: 24rem; }
.safety-section__head-desc + .safety-section__head-sub { margin-top: 70rem; }

/* NAVIGATION */
.safety-navigation { position: absolute; top: 0; bottom: 0; right: 24rem; z-index: 10; opacity: 0; visibility: hidden; }
.safety-navigation-list { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 20rem; }
.safety-navigation-list li { display: block; padding-right: 12rem; position: relative; }
.safety-navigation-list li:before { content: ''; width: 4rem; height: 4rem; margin-top: -2rem; position: absolute; right: 0; top: 50%; background: var(--color-white); border-radius: 50%; transition: background-color .3s; }
.safety-navigation-list a { display: inline-block; padding: 4rem 11rem; font-size: 14rem; font-weight: 500; color: var(--color-white); border: 1px solid var(--color-white); border-radius: 30rem; transition: color .3s, border .3s; }

.safety-navigation-list li:nth-child(3),
.safety-navigation-list li:nth-child(5),
.safety-navigation-list li:nth-child(6) { margin-top: 20rem; }

.safety-navigation-list li.safety-navigation--active:before { background: var(--color-primary); }
.safety-navigation-list li.safety-navigation--active a { color: var(--color-primary); border-color: var(--color-primary); }

/* SELECTION */
body.page-template-safety ::-moz-selection { background: var(--color-primary); color: var(--color-black); } 
body.page-template-safety ::selection { background: var(--color-primary); color: var(--color-black); } 
body.page-template-safety ::-moz-selection { background: var(--color-primary); color: var(--color-black); }

body.page-template-safety .safety-visual ::-moz-selection,
body.page-template-safety .safety-wxdesign__explain ::-moz-selection { background: var(--color-black); color: var(--color-primary); } 
body.page-template-safety .safety-visual ::selection,
body.page-template-safety .safety-wxdesign__explain ::selection { background: var(--color-black); color: var(--color-primary); } 
body.page-template-safety .safety-visual ::-moz-selection,
body.page-template-safety .safety-wxdesign__explain ::-moz-selection { background: var(--color-black); color: var(--color-primary); }



/* **************************************** *
 * VISUAL
 * **************************************** */
.safety-visual.safety-section { padding-top: 0; padding-bottom: 128rem; }

.safety-visual__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-primary) no-repeat center / cover; }

.safety-visual__typo { display: block; font-size: 176rem; line-height: 0.97; font-weight: 400; }
.safety-visual__typo--01 { text-align: right; }
.safety-visual__typo--02 { margin-top: 137rem; }
.safety-visual__typo--02 i { display: inline-block; padding-left: 369rem; font-style: normal; }

/* MOTION */
.safety-visual__typo .jt-split-text--line-wrap { height: 1.1em; }
.safety-visual__typo .jt-split-text--line-wrap:not(:first-child) { margin-top: -24rem; }



/* **************************************** *
 * CONE
 * **************************************** */
.safety-cone.safety-section { padding-top: 202rem; padding-bottom: 66rem; }

.safety-cone__image { width: 236rem; margin: 0 auto; }
.safety-cone__image .jt-lazyload { padding-top: 117.37%; }



/* **************************************** *
 * OVERVIEW
 * **************************************** */
.safety-overview.safety-section { padding-bottom: 110rem; }

.safety-overview__illust { overflow: hidden; }
.safety-overview__illust > svg { display: block; width: 2560rem; height: auto; position: relative; left: calc((100vw - 2560rem) / 2); }
.safety-overview__illust > svg [class^="safety-overview__alphabet-"] { cursor: pointer; }



/* **************************************** *
 * VALUE
 * **************************************** */
.safety-value .safety-section__head { margin-bottom: 133rem; }

.safety-value__illust { position: relative; overflow: hidden; }
.safety-value__illust-inner { width: 2560rem; position: relative; left: calc((100vw - 2560rem) / 2); }
.safety-value__illust-item:not(:last-child) { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.safety-value__illust-item .jt-lazyload { padding-top: 24.72%; }
.safety-value__illust-item .jt-lazyload + .jt-lazyload { width: 100%; position: absolute; top: 0; left: 0; }

.safety-value__image { margin-top: 163rem; }
.safety-value__image .jt-lazyload { padding-top: 56.25%; }



/* **************************************** *
 * CASE
 * **************************************** */
.safety-case.safety-section { padding-bottom: 295rem; }

.safety-case .safety-section__head { margin-bottom: 235rem; }

.safety-case__list { display: flex; width: fit-content; margin: 0 auto; border: solid var(--color-white); border-width: 0 1px; }
.safety-case__list > li { display: flex; flex-direction: column; gap: 168rem; width: 33.33%; padding: 0 35rem 68rem; position: relative; }
.safety-case__list > li:not(:last-child) { border-right: 1px solid var(--color-white); }
.safety-case__list-question { font-size: 28rem; line-height: 1.37; font-weight: 500; color: var(--color-white); }
.safety-case__list-lottie { width: 440rem; aspect-ratio: 1 / 1; margin-top: auto; }
.safety-case__list-lottie > svg { display: block; }
.safety-case__list-answer { position: absolute; left: 35rem; bottom: -12rem; font-size: 100rem; line-height: 1.16; font-weight: 300; color: var(--color-white); }
.safety-case__list-answer > span { display: block; }
.safety-case__list-answer > span:first-child { margin-bottom: 8rem; }



/* **************************************** *
 * DATA
 * **************************************** */
.safety-data.safety-section { padding-bottom: 260rem; }

/* BACKGROUND */
.safety-data__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.safety-data__bg-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: no-repeat center / cover; }
.safety-data__bg--medium { display: none; }

/* CHART */
.safety-data__chart { max-width: 1540rem; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 100rem 80rem; }
.safety-data__chart-title { display: block; margin-bottom: 20rem; font-size: 20rem; font-weight: 900; color: #AFAFAF; }
.safety-data__chart-graphic { height: 590rem; position: relative; border-radius: 31rem; filter: drop-shadow(0 10rem 10rem rgba(0, 0, 0, 0.16)); overflow: hidden; }
.safety-data__chart-graphic:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); border-radius: inherit; }
.safety-data__chart-graphic:after { content: ''; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 8, 0, 0.24) 47.3%, rgba(0, 241, 0, 0.96) 94.6%, #FFF 100%); border-radius: inherit; opacity: 0; transition: opacity .6s cubic-bezier(0.215, 0.61, 0.355, 1); }
.safety-data__chart-graphic > span { position: relative; font-size: 204rem; line-height: 1; font-weight: 300; color: #AFAFAF; z-index: 2; }
.safety-data__chart-graphic > i { position: absolute; right: 24rem; bottom: 48rem; z-index: 2; }
.safety-data__chart-graphic > i > svg { display: block; width: 100%; height: auto; }

.safety-data__chart--task .safety-data__chart-graphic > span,
.safety-data__chart--color .safety-data__chart-graphic > span { font-size: 350rem; top: -6rem; left: 10rem; }
.safety-data__chart--worker .safety-data__chart-graphic > span,
.safety-data__chart--lead .safety-data__chart-graphic > span { top: 4rem; left: 20rem; }
.safety-data__chart--task .safety-data__chart-graphic > i { width: 242rem; }
.safety-data__chart--color .safety-data__chart-graphic > i { width: 196rem; }
.safety-data__chart--worker .safety-data__chart-graphic > i { width: 352rem; }
.safety-data__chart--lead .safety-data__chart-graphic > i { width: 105rem; }



/* **************************************** *
 * PORTFOLIO
 * **************************************** */
.safety-portfolio.safety-section { padding-bottom: 316rem; }

.safety-portfolio .safety-section__head { margin-bottom: 160rem; }

/* LIST */
.safety-portfolio__list { display: flex; flex-direction: column; gap: 40rem; }
.safety-portfolio__list-item { position: relative; border-radius: 30rem; overflow: hidden; cursor: pointer; }

.safety-portfolio__list-name { width: calc(100% - 60rem); position: absolute; top: 20rem; left: 30rem; font-size: 120rem; line-height: 1.35; font-weight: 300; color: var(--color-white); z-index: 2; }

.safety-portfolio__list-thumb { background: #111; border-radius: inherit; filter: grayscale(1); transition: filter .6s cubic-bezier(0.215, 0.61, 0.355, 1); }
.safety-portfolio__list-thumb .jt-lazyload { height: 405rem; }
.safety-portfolio__list-thumb .jt-lazyload img { width: 100%; height: 100%; object-fit: cover; }

/* POPUP */
.safety-portfolio-popup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; z-index: 999; }

.safety-portfolio-popup__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-primary); filter: blur(100rem); }
html.mac.safari .safety-portfolio-popup__bg { filter: blur(70rem); }

.safety-portfolio-popup__content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 80rem; position: relative; }
.safety-portfolio-popup__content .swiper { width: 100%; height: 100%; max-width: 1700rem; max-height: 900rem; }
.safety-portfolio-popup__content .swiper-slide { display: flex; justify-content: center; align-items: center; }
.safety-portfolio-popup__content .swiper-slide picture { display: block; max-width: 100%; max-height: 100%; }
.safety-portfolio-popup__content .swiper-slide img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100vh; }
html.mobile .safety-portfolio-popup__content .swiper-slide img { max-height: 100svh; }

.safety-portfolio-popup__actions { position: absolute; top: 90rem; right: 0; }
.safety-portfolio-popup__actions > * { display: block; width: 80rem; height: 80rem; margin: 0; padding: 0; background: transparent; border: none; box-sizing: border-box; cursor: pointer; z-index: 2; }
.safety-portfolio-popup__actions .jt-icon { width: 100%; transition: transform .3s; }



/* **************************************** *
 * WX DESIGN
 * **************************************** */
.safety-wxdesign.safety-section { padding-top: 116rem; overflow: hidden; }

/* EXPLAIN */
.safety-wxdesign__explain { padding-bottom: 230rem; position: relative; }
.safety-wxdesign__explain:before { content: ''; width: 117%; height: 100%; position: absolute; left: -8%; top: 0; background: linear-gradient(180deg, #2DFC24 0%, #CCC 100%); filter: blur(38rem); }

.safety-wxdesign__explain-inner { max-width: 1700rem; margin: 0 auto; padding: 68rem 55rem; position: relative; top: -116rem; }
.safety-wxdesign__explain-inner:before { content: ''; width: 100%; height: 50%; position: absolute; top: 0; left: 0; background: #1AF91A; border-radius: 40rem 40rem 0 0; z-index: -1; }

.safety-wxdesign__explain-title { margin-bottom: 70rem; font-size: 86rem; font-weight: 500; text-align: center; text-decoration: underline; }
html.mac.safari .safety-wxdesign__explain-title { text-underline-offset: 4rem; }

.safety-wxdesign__explain-poster { border-radius: 30rem; overflow: hidden; }
.safety-wxdesign__explain-poster .jt-lazyload { padding-top: 95.91%; }

.safety-wxdesign__explain-content { margin-top: 100rem; text-align: center; }
.safety-wxdesign__explain-content > b { display: block; margin-bottom: 56rem; font-size: 120rem; line-height: 1.08; font-weight: 500; }
.safety-wxdesign__explain-content > p { font-size: 26rem; line-height: 1.75; font-weight: 400; }
.safety-wxdesign__explain-content > b + p { font-size: 50rem; line-height: 1.25; }
.safety-wxdesign__explain-content > p + p { margin-top: 30rem; }
.safety-wxdesign__explain-content > ul { display: flex; justify-content: center; gap: 20rem; margin: 60rem auto; }
.safety-wxdesign__explain-content > ul > li { padding: 10rem 20rem; font-size: 30rem; line-height: 1.25; font-weight: 500; color: var(--color-primary); background: var(--color-black); box-shadow: 0 4rem 4rem 0 rgba(0, 0, 0, 0.25); border-radius: 60rem; }

/* GALLERY */
.safety-wxdesign__gallery { margin-top: -230rem; }

.safety-wxdesign__gallery-item { margin: 160rem 0; }
.safety-wxdesign__gallery-item:first-child { margin-top: 0; }
.safety-wxdesign__gallery-item:last-child { margin-bottom: 0; }



/* **************************************** *
 * WITH US
 * **************************************** */
.safety-withus .safety-section__head { margin-bottom: 0; }

.safety-withus__partner .jt-lazyload { padding-top: 62.89%; }



/* **************************************** *
 * CONTACT
 * **************************************** */
.safety-contact.safety-section { padding-top: 50rem; }



/* **************************************** *
 * ENDING
 * **************************************** */
.safety-ending.safety-section { padding-top: 250rem; padding-bottom: 250rem; }

.safety-ending__image { width: 970rem; margin: 0 auto; }
.safety-ending__image .jt-lazyload { padding-top: 17.11%; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* LAYOUT */
    body.page-template-safety #menu > li:hover > a,
    body.page-template-safety #menu > li > ul > li:hover > a { color: #ACACAC; }

    /* DATA */
    .safety-data__chart-graphic:hover:after { opacity: 0.45; }

    /* PORTFOLIO */
    .safety-portfolio__list-item:hover .safety-portfolio__list-thumb { filter: grayscale(0); }

    .safety-portfolio-popup__close:hover .jt-icon { transform: rotate(90deg); }

}