@charset "UTF-8";
@import "reset5.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');

body { color:#595757; background: #c8c9ca; line-height:1; padding: 0; position: relative; min-height: 100%; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 15px default setting */
body { font-size: 16px; letter-spacing: 0.088em; font-family: "Inter", "dnp-shuei-gothic-gin-std", Helvetica, Arial, Sans-Serif }
p, th, td, dt, dd { line-height: 2em; font-feature-settings: "palt" 1 }
h2, h3, h4, h5 { font-family: "Inter", "dnp-shuei-gothic-gin-std", Helvetica, Arial, Sans-Serif; letter-spacing: 0.074em; font-style: normal; font-weight: 800; font-feature-settings: "palt" 1 }

.mincho { font-family: YuMincho, 'Yu Mincho', serif;}

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

img { vertical-align: bottom; }

.ts-larger { font-size: 1.12em !important }
.ts-smaller { font-size: 0.88em !important }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

.pc-none { display: none }
.sp-none { display: block }


/* !Links */
a { cursor: pointer !important }
a:link { color: #595757; text-decoration: none }
a:visited { color: #595757; text-decoration: none }
a:hover { color: darkkhaki; text-decoration: underline }
a:active { color: #cc1c7d; text-decoration: none }

i { font-style: italic !important }
.rd { color: crimson }
.pk { color: #cc1c7d }


html {  }
#loader { position: fixed; left: 50%; top: 50%; margin: -12px 0 0 -12px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #676c72 ;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
#wrapper { position: relative; width: 100%; text-align: left; min-height: 100%; overflow: hidden; z-index: 10 }

/* リストの高さ揃える  */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

/* effects */
.fd { position: relative; opacity: 0; transform: translateY(4vw); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.active { opacity: 1; transform: translateY(0); }
.zm { transform: scale(1.24); }
.txtl { display: inline-block; overflow: hidden }

/* header */
.mv { position: relative; width: 100%; height: 100vh; /*background: url("../img/mv_lines.png") no-repeat center center; background-size: 76%*/ }
.mv .lines { position: absolute; width: 76%; left: 12%; top: calc(50vh - 37.27vw); z-index: 0; transform: scale(0); transition: all 1s; filter: drop-shadow(1px 1px 0 #b5b6b7); }
.mv.active .lines { transform: scale(1);  }
.mv h1 { position: relative; text-align: center; padding-top: calc(50vh - 280px); z-index: 1; opacity: 0; transform: scale(1.25); transition: opacity 1s linear, transform 1s ease-out }
.mv.active h1 { transform: scale(1); opacity: 1; }
.mv h1 .logomark { display: block; width: 180px; margin: 0 auto 2em }
.mv h1 .logomark img { filter: drop-shadow(1px 1px 0 #fff); }
.mv h1 .logotype { display: block; font-size: 45px; font-weight: bold; margin: 0 auto }
.mv h1 p { font-size: 14px; font-weight: 500; margin-top: 1em }
.mv h1 p i { font-weight: 300; font-style: normal !important }
.mv .slogan { position: absolute; width: 45%; left: 27.5%; top: calc(50vh + 120px); z-index: 1 }

.sec { position: relative; padding: 9vw 0; border-top: solid 1px #e5e6e7 }
.sec h2 { font-size: 128px; font-weight: 700; line-height: 0.77em; }
.sec h3 { font-size: 40px; font-weight: 700; line-height: 0.77em; }
.sec .sec-inner { position: relative; padding: 0 6vw }
.sec .sec-inner p { font-size: 16px; }
.sec .sec-inner p.tagline { font-size: 36px; font-weight: 600; }
.sec .sec-inner .data-table { padding: 0 6vw; margin-top: 3em }
.sec .sec-inner .data-table dl { position: relative; padding: 2em 0; border-bottom: dotted 1px #fff }
.sec .sec-inner .data-table dl dt { position: absolute; left: 2em; top: 2em; font-weight: 600 }
.sec .sec-inner .data-table dl dd { padding: 0 0 0 33.33% }

#about-us h2 { font-size: 11.2vw }
#about-us .sec-inner p { margin: 3em 0 0 50% }
#about-us .sec-inner p.tagline { text-align: right; margin: 1em 6vw 0 0 }
#knight-agency h2 { font-size: 9.375vw; margin-left: calc(50% - 12vw) }
#knight-agency h2 span.txtl:last-child { margin-left: 9vw }
#knight-agency .sec-inner p { margin: 3em 0 0 6vw }
#knight-agency .sec-inner p.tagline { margin: 1em 0 0; line-height: 1.5em }
#our-mission { text-align: center }
#our-mission h2 { font-size: 8.8vw; text-align: center; margin: 0 auto }
#our-mission .sec-inner { overflow: visible }
#our-mission .sec-inner p { text-align: left; margin: 3em 0 0 12vw }
#our-mission .sec-inner p.tagline { position: absolute; right: -6vw; top: -240px; transform: rotate(90deg)}
#company-overview { padding-bottom: 0 }
#company-overview h2 { font-size: 8.8vw; line-height: 0.75em; margin-left: 6vw }
#company-overview h2 span.txtl:last-child { margin-left: calc(50% - 12vw)}
#awards { padding: 0 6vw 9vw }
#awards .awards { padding: 6vw 6vw 0 }
#awards .awards ul { margin-top: 2em }
#awards .awards ul li { position: relative; padding: 1em 0 1em 100px }
#awards .awards ul li .year { position: absolute; left: 2em; top: 1em; font-weight: 600 }
#career h2 { font-size: 8.8vw; margin-left: 50% }

#footer { position: relative; padding: 12vw 0 0; opacity: 0; transform: translateY(6vw); transition: opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
#footer.active { opacity: 1; transform: translateY(0); }
#footer span.txtl-f { display: inline; font-size: 25vw; letter-spacing: 0.04em; line-height: 0.48em; font-weight: 600; color: rgba(255,255,255,0.25); margin-left: -1.1vw }
#footer span.txtl-f.last { font-size: 9.4vw; line-height: 1.5em; }
/*#footer span.txtl:nth-child(2) { font-size: 24vw; letter-spacing: 0.012em; }*/
#footer .copyright { position: absolute; right: 6vw; bottom: 6vw; font-weight: 500 }

.bg { position: fixed; left: 0; top: 0; width: 100%; z-index: 0 }
#vd { width: 100%; height: 100vh; object-fit: fill; opacity: 0; mix-blend-mode: multiply }

#layer { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 999 }
#layer .lay-1 { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 50vh; background: #595757 }
#layer .lay-2 { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 50vh; background: #595757 }

.mt-0 { margin-top: 0 !important }
.mt-1 { margin-top: 1em }
.mt-2 { margin-top: 2em }
.mt-4 { margin-top: 4em }


@media screen and (max-width: 780px) {
	
    body { font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; -webkit-text-size-adjust: none; overflow: hidden }
    h2, h3, h4, h5 { letter-spacing: 0.08em; font-weight: 700; }
	
    a { text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-touch-callout:none; }

    .pc-none { display: block }
    .sp-none { display: none }
    
    /* header */
    .mv { position: relative; width: 100%; height: 100vh; /*background: url("../img/mv_lines.png") no-repeat center center; background-size: 76%*/ }
    .mv .lines { position: absolute; width: 188%; left: -44%; top: calc(50vh - 91vw); z-index: 0; transform: scale(0); transition: all 1s; filter: drop-shadow(1px 1px 0 #b5b6b7); }
    .mv.active .lines { transform: scale(1);  }
    .mv h1 { position: relative; text-align: center; padding-top: calc(50vh - 176px); z-index: 1; opacity: 0; transform: scale(1.25); transition: opacity 1s linear, transform 1s ease-out }
    .mv.active h1 { transform: scale(1); opacity: 1; }
    .mv h1 .logomark { display: block; width: 108px; margin: 0 auto 2em }
    .mv h1 .logotype { display: block; font-size: 24px; font-weight: bold; margin: 0 auto }
    .mv h1 p { font-size: 10px; }
    .mv .slogan { position: absolute; width: 88%; left: 6%; top: calc(50vh + 108px); z-index: 1 }
    
    .sec { position: relative; padding: 12vw 0; border-top: solid 1px #e5e6e7 }
    .sec h2 { font-size: 128px; font-weight: 700; line-height: 1em }
    .sec h3 { font-size: 24px; font-weight: 700; line-height: 1em }
    .sec .sec-inner { position: relative; padding: 0 6vw }
    .sec .sec-inner p { font-size: 13px; }
    .sec .sec-inner p.tagline { font-size: 18px; font-weight: 600; line-height: 1.5em }
    .sec .sec-inner .data-table { padding: 0; margin: 0 -6vw }
    .sec .sec-inner .data-table dl { position: relative; padding: 1em 0; border-bottom: dotted 1px #fff }
    .sec .sec-inner .data-table dl dt { position: relative; left: inherit; top: inherit; padding: 0 6vw }
    .sec .sec-inner .data-table dl dd { padding: 0 6vw }
    
    #about-us h2 { font-size: 12vw }
    #about-us .sec-inner p { margin: 1.5em 0 0 }
    #about-us .sec-inner p.tagline { text-align: left; margin: 1em 0 0; }
    #knight-agency h2 { font-size: 12vw; line-height: 0.75em; margin-left: 6vw }
    #knight-agency h2 span.txtl:last-child { margin-left: 6vw }
    #knight-agency .sec-inner p { margin: 1.5em 0 0 }
    #knight-agency .sec-inner p.tagline { margin: 1em 0 0; line-height: 1.5em; text-align: right }
    #our-mission { text-align: center; padding-bottom: 24vw }
    #our-mission h2 { font-size: 10.8vw; text-align: center; margin: 0 auto }
    #our-mission .sec-inner { overflow: visible }
    #our-mission .sec-inner p { text-align: left; margin: 1.5em 6vw 0 }
    #our-mission .sec-inner p.tagline { position: absolute; right: -22vw; top: 30vw; transform: rotate(90deg); margin: 0}
    #company-overview { padding-bottom: 0 }
    #company-overview h2 { font-size: 9.8vw; line-height: 0.75em; margin-left: 0 }
    #company-overview h2 span.txtl:last-child { margin-left: calc(50% - 12vw)}
    #awards { padding: 0 6vw 12vw }
    #awards .awards { padding: 12vw 0 0 }
    #awards .awards ul { margin-top: 1.5em }
    #awards .awards ul li { position: relative; padding: 0.5em 0 0.5em 60px }
    #awards .awards ul li .year { position: absolute; left: 0; top: 0.5; font-weight: 600 }
    #career h2 { font-size: 9.8vw; margin-left: 6vw }
    
    #footer { padding: 16vw 0 0; }
    
    .bg { position: fixed; left: -25%; top: 0; width: 150%; }
    #vd { width: 150%; height: 100vh; }

}




@media screen and (max-width: 320px) {

}