@charset "UTF-8";
@import "reset5.css";
@import "animate.css";
@import url('https://use.typekit.net/phv2qdk.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@600&display=swap');

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

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
body { font-size: 16px; letter-spacing: 0.06em; font-family: neue-haas-grotesk-text, "Zen Kaku Gothic New", Helvetica, Arial, Sans-Serif }
p, th, td, dt, dd { line-height: 1.8; font-weight: 400 }
h2, h3, h4, h5 { font-family: neue-haas-grotesk-display, "Zen Kaku Gothic New", Helvetica, Arial, Sans-Serif; letter-spacing: 0.06em; font-weight: 600; font-style: normal }

.serif { font-family: big-caslon-fb, serif; }
.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: #1f1d1e; text-decoration: none }
a:visited { color: #1f1d1e; text-decoration: none }
a:not(.greyout):hover { color: #99836f; text-decoration: none }
a:not(.greyout):active { color: #cc1c7d; text-decoration: none }
a.greyout { opacity: 0.33 }

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


html {  }
#wrapper { position: relative; width: 100%; text-align: left; min-height: 100%; overflow: hidden; z-index: 0 }

/* リストの高さ揃える  */
.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(8vw); transition: opacity 1.2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd.active { opacity: 1; transform: translateY(0); }
.fd.active .ln { width: 100% !important }
.vis { opacity: 0; filter: sepia(1); transform: rotateY(7.5deg) rotateZ(7.5deg) translateY(6vw) skewY(-7.5deg); transition: filter 1.2s ease-in, opacity 1.2s linear, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.vis.active { opacity: 1; filter: grayscale(0); transform: rotateY(0deg) rotateZ(0deg) translateY(0) skewY(0deg); }
.zm { opacity: 0; transform: scale(1.2); transition: all 1s }
.zm.active { opacity: 1; transform: scale(1); }
.txtl, .txtl-t, .txtl-t2, .txts { position: relative; opacity: 0; padding: 0; margin: 0; display: block; letter-spacing: 0.072em !important }
.delay-0 { transition-delay: 0.2s; }
.delay-1 { transition-delay: 0.16s; }
.delay-2 { transition-delay: 0.32s; }
.delay-3 { transition-delay: 0.48s; }
.delay-4 { transition-delay: 0.64s; }

#loader { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; z-index: 1000 }
.loader svg {
	fill: none;
	stroke: #ff3e13 ;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.4s 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); }
}

/* header */
#header { position: fixed; left: 0; top: -90px; width: 100%; height: 80px; background: #fff; z-index: 100; transition: all 0.4s }
#header.active { top: 0 }
#header .corporate-logo { margin: 25px 40px }
.global-nav { position: absolute; right: calc(5vw - 20px); top: 0 }
.global-nav li { display: inline-block; }
.global-nav .g-nav { padding-left: calc(5.6vw - 20px) }
.global-nav .g-nav li a { display: block; line-height: 80px; padding: 0 20px }

#btn-menu { position: fixed; right: 0; top: 0; width: 100px; height: 90px; cursor: pointer; z-index: 100; display: none; transition: all 0.2s }
#btn-menu span { position: absolute; display: block; width: 50px; height: 2px; background: #1f1d1e; transition: all 0.2s }
#btn-menu span:nth-child(1) { left: 25px; top: 39px }
#btn-menu span:nth-child(2) { left: 25px; bottom: 39px }
#btn-menu:hover span { width: 60px; }
#btn-menu:not(.active):hover span:nth-child(1) { left: 20px; top: 39px }
#btn-menu:not(.active):hover span:nth-child(2) { left: 20px; bottom: 39px }
#btn-menu.active:hover span:nth-child(1) { left: 20px; top: 39px }
#btn-menu.active:hover span:nth-child(2) { left: 20px; bottom: 39px }
#btn-menu.active span:nth-child(1) { transform: rotate(45deg) scaleX(0.5); }
#btn-menu.active span:nth-child(2) { transform: rotate(-45deg) scaleX(0.5) translate(13px, -7px); }
#btn-menu.w span { background: #fff }

/* m-menu */
#m-menu { position: fixed; width: 50%; height: 100vh; right: -55%; top: 0; background: #1f1d1e; mix-blend-mode: multiply; transform: rotateY(2.5deg) rotateZ(2.5deg) skewY(-2.5deg); transition: all 0.6s cubic-bezier(0.85, 0, 0.15, 1); z-index: 100 }
#m-menu.active { transform: rotateY(0) rotateZ(0) skewY(0); right: 0; }
#m-menu ul { margin: 6vw }
#m-menu ul li:nth-child(8) { border-top: solid 1px #99836f; margin-top: 2.9vw }
#m-menu ul li a { display: block; margin: 0.5em; font-size: 55px; font-weight: 600; letter-spacing: 0.072em; }
#m-menu ul li:nth-child(8) a, #m-menu ul li:nth-child(9) a { font-size: 44px; }
#m-menu ul li a:link, #m-menu ul li a:visited { color: #fff }
#m-menu ul li a:not(.greyout):hover { color: #99836f }

/* main */
#mv { opacity: 0.1; transition: all 1s; }
#mv.active { opacity: 1 }
.top-mv { position: relative }
.top-mv h1 { position: absolute; left: calc(50% - 166px); top: 50px; z-index: 1 }
.top-mv h2 { position: absolute; width: 90%; left: 5vw; top: 50%; z-index: 1; }
.top-mv h2 .en { font-size: 52px; color: #fff; font-weight: 500; line-height: 1.33em }
.top-mv h2 .ja { position: absolute; right: 0; bottom: 0; font-size: 18px; font-weight: 500; line-height: 1.66em }
.top-mv .bg { z-index: 0 }

#wrapper { background: url("../img/bg.jpg") no-repeat bottom; background-size: contain }
#top #wrapper { background: url("../img/bg_top.jpg") no-repeat bottom; background-size: contain }
.contents { position: relative; padding-bottom: 13.2vw }
.contents.lower { padding-bottom: 15vw }
.top-sec { position: relative; padding: 16vw 0 0 }
.top-sec .sec-inner { position: relative; }
#top-philosophy { margin: -16vw 0 0; }
#top-philosophy .sec-inner .visual { position: relative; width: 60%; z-index: 1 }
#top-philosophy .sec-inner .inner-block { position: absolute; width: 40%; right: 5vw; top: 5vw; z-index: 10 }
#top-philosophy .sec-inner .inner-block h2 { font-size: 56px; margin-bottom: 0.5em }
#top-philosophy .sec-inner .inner-block p { font-size: 18px; }
#top-philosophy .sec-inner .view-detail { position: absolute; bottom: 5vw; left: 0; width: 100%; height: 52px; font-size: 20px; font-weight: 700; text-align: right; z-index: 0; }
#top-philosophy .sec-inner .view-detail .tx { display: inline-block; line-height: 1em; padding-top: 32px; margin-right: calc(5vw + 60px); transition: all 0.2s }
#top-philosophy .sec-inner .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
#top-philosophy .sec-inner .view-detail::after { content: ""; position: absolute; right: 5vw; bottom: 0; width: 36px; height: 52px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
#top-philosophy .sec-inner a:hover .view-detail .tx { margin-right: calc(5vw + 40px); }
#top-philosophy .sec-inner a:hover .view-detail .ln { opacity: 1 }
#top-philosophy .sec-inner a:hover .view-detail::after { right: calc(5vw - 30px); opacity: 1 }
#top-service {  }
#top-service .sec-inner .visual { position: relative; width: 60%; margin-left: 40%; z-index: 1 }
#top-service .sec-inner .inner-block { position: absolute; width: 40%; left: 5vw; top: 5vw; z-index: 10 }
#top-service .sec-inner .inner-block h2 { font-size: 56px; margin-bottom: 0.5em }
#top-service .sec-inner .inner-block p { font-size: 18px; }
#top-service .sec-inner .inner-block p.services { font-size: 16px; margin-top: 1.5em }
#top-service .sec-inner .view-detail { position: absolute; bottom: 5vw; left: 0; width: 100%; height: 52px; font-size: 20px; font-weight: 700; text-align: right; z-index: 0; }
#top-service .sec-inner .view-detail .tx { display: inline-block; line-height: 1em; padding-top: 32px; margin-right: calc(60% + 5vw + 60px); transition: all 0.2s }
#top-service .sec-inner .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
#top-service .sec-inner .view-detail::after { content: ""; position: absolute; right: calc(60% + 5vw); bottom: 0; width: 36px; height: 52px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
#top-service .sec-inner a:hover .view-detail .tx { margin-right: calc(60% + 5vw + 40px); }
#top-service .sec-inner a:hover .view-detail .ln { opacity: 1 }
#top-service .sec-inner a:hover .view-detail::after { right: calc(60% + 5vw - 30px); opacity: 1 }
#top-others {  }
#top-others .sec-inner { margin: 0 -2.5vw; padding: 0 5vw }
#top-others .sec-inner .other-box { position: relative; float: left; width: calc(50% - 5vw); margin: 0 2.5vw; box-shadow: 0 0 25px #ccc; }
#top-others .sec-inner .other-box a { display: block; padding: 10vw 2.5vw calc(10vw + 52px) 5vw; background: rgba(255,255,255,0.85) }
#top-others .sec-inner .other-box h3 { font-size: 48px; margin-bottom: 0.25em }
#top-others .sec-inner .other-box p { font-size: 18px; }
#top-others .sec-inner .other-box .view-detail { position: absolute; bottom: 5vw; left: 0; width: 100%; height: 52px; font-size: 20px; font-weight: 700; text-align: right; z-index: 0; }
#top-others .sec-inner .other-box .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
#top-others .sec-inner .other-box .view-detail::after { content: ""; position: absolute; right: 2.5vw; bottom: 0; width: 36px; height: 52px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
#top-others .sec-inner .other-box a:hover .view-detail .ln { opacity: 1 }
#top-others .sec-inner .other-box a:hover .view-detail::after { right: calc(2.5vw - 20px); opacity: 1 }

#footer { position: relative; height: 53.8vw; padding: 0 5vw; text-align: center; }
#footer .corporate-icon { position: relative; top: 13.4vw; width: 320px; margin: 0 auto; }
#footer .corporate-icon p { font-size: 24px; font-weight: bold }
#footer p.copyright { position: absolute; bottom: 2em; left: 0; width: 100%; font-size: 12px }


#lay { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.9); z-index: 1000; display: none }
#lay .lay-inner { margin-top: calc((100vh - 100vw * (9 / 16)) * 0.5) }
#close-btn { position: absolute; right: 0; top: 0; width: 100px; height: 90px; cursor: pointer; z-index: 100 }
#close-btn span { position: absolute; display: block; width: 50px; height: 2px; background: #1f1d1e; transition: all 0.2s }
#close-btn span:nth-child(1) { left: 25px; top: 39px; transform: rotate(45deg) scaleX(0.5); background: #fff }
#close-btn span:nth-child(2) { left: 25px; bottom: 39px; transform: rotate(-45deg) scaleX(0.5) translate(13px, -7px); background: #fff }
#close-btn:hover span { width: 60px; }
#close-btn:hover span:nth-child(1) { left: 20px; top: 39px }
#close-btn:hover span:nth-child(2) { left: 20px; bottom: 39px }


/* LOWER CONTENTS */
.content-mv { position: relative }
.content-mv h1 { position: absolute; left: 10vw; bottom: -0.15em; font-size: 64px; line-height: 1em; letter-spacing: 0.08em; color: #1f1d1e; z-index: 1; }
.sec { padding: 10vw 0 0 }
.sec .sec-inner { padding: 0 10vw }
.sec .sec-inner h2 { font-size: 48px; line-height: 1.33em }

/* PHILOSOPHY */
#statements .sec-inner .big-title { position: relative }
#statements .sec-inner h2 { color: #a6a7a9; }
#statements .sec-inner h2 .ja { font-size: 18px; color: #1f1d1e }
#statements .sec-inner .big-title .corporate-name { position: absolute; right: 0; bottom: 0.5em; font-size: 24px; font-weight: bold; }
#statements .sec-inner .inner-block { position: relative; max-width: 880px; padding: 5vw 5vw 0; margin: 0 auto }
#statements .sec-inner .inner-block p.txtR { margin-top: 100px }
#statements .sec-inner .inner-block .sign { position: absolute; right: 5vw; bottom: 0; }

/* COMPANY */
#company .content-mv h1 { color: #e7e7e7 }
#company-outline .sec-inner table {}
#company-outline .sec-inner table th { font-weight: 500; padding: 2.5em; border-bottom: solid 1px #6b6857 }
#company-outline .sec-inner table td { padding: 2.5em; border-bottom: dotted 1px #a5a395 }

/* SERVICE */
#service .content-mv h1 { color: #e7e7e7 }
#servce-intro .bg { position: absolute; right: 0; top: 0; z-index: 0 }
#servce-intro .sec-inner { position: relative }
#servce-intro .sec-inner h2 { color: #a6a7a9; }
#servce-intro .sec-inner .inner-block { padding: 40px 5vw 0; }
#our-servces ul { margin: -2.5vw }
#our-servces ul li { width: calc(50% - 5vw); margin: 2.5vw }
#our-servces ul li h3 { font-size: 32px; margin-bottom: 32px }
#our-servces ul li h3 .ja { display: block; font-size: 18px; color: #a6a7a9; margin-top: 1em }

/* CONTACT */
#contact .content-mv h1 { color: #e7e7e7 }
#contact-form .sec-inner { padding: 0 15vw  }
#contact-form .sec-inner .contact-form { max-width: 880px; margin: 5vw auto 0 }
#contact-form .sec-inner .contact-form dl { margin-top: 2em }
#contact-form .sec-inner .contact-form dl dt { display: inline-block; font-size: 18px; font-weight: 500; margin-bottom: 0.66em }
#contact-form .sec-inner .contact-form input { width: calc(100% - 2em); border: none; line-height: 4em; border-radius: 2em; padding: 0 1em; background: #e6e6e2 }
#contact-form .sec-inner .contact-form textarea { width: calc(100% - 2em); border: none; line-height: 2em; border-radius: 2em; padding: 0 1em; background: #e6e6e2 }
#contact-form .sec-inner .contact-form .btn-submit { margin-top: 2em }
#contact-form .sec-inner .contact-form input[type="submit"] { width: 50%; line-height: 1em; font-size: 18px; font-weight: 700; padding: 1.5em 0; background: #676767; color: #fff; margin: 0 25%; cursor: pointer }

.tx-larger { font-size: 1.22em }
.tx-smaller { font-size: 0.88em }
.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; letter-spacing: 0.04em; -webkit-text-size-adjust: none; overflow: hidden }
    h2, h3, h4, h5 { letter-spacing: 0.04em; 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 }
    
    /* effects */
    .fd { transform: translateY(6vw); }
    
    #btn-menu { position: fixed; right: 0; top: 0; width: 60px; height: 42px; cursor: pointer; z-index: 100; display: block }
    #btn-menu span { position: absolute; display: block; width: 30px; height: 2px; background: #303030; transition: all 0.2s }
    #btn-menu span:nth-child(1) { left: 15px; top: 15px }
    #btn-menu span:nth-child(2) { left: 15px; bottom: 15px }
    #btn-menu:hover span { width: 30px; }
    #btn-menu:not(.active):hover span:nth-child(1) { left: 15px; top: 15px }
    #btn-menu:not(.active):hover span:nth-child(2) { left: 15px; bottom: 15px }
    #btn-menu.active { background: rgba(0,0,0,0.8); }
    #btn-menu.active:hover span:nth-child(1) { left: 15px; top: 20px; background: #fff }
    #btn-menu.active:hover span:nth-child(2) { left: 15px; bottom: 20px; background: #fff }
    #btn-menu.active span:nth-child(1) { transform: rotate(45deg) scaleX(0.5); top: 20px; background: #fff }
    #btn-menu.active span:nth-child(2) { transform: rotate(-45deg) scaleX(0.5); bottom: 20px; background: #fff }
    
    /* header */
    #header { position: fixed; left: 0; top: -42px; width: 100%; height: 42px; background: #fff; z-index: 100; otransition: all 0.4s }
    #header.active { top: 0 }
    #header .corporate-logo { margin: 10px 2.5vw; }
    #header .corporate-logo img { width: 160px; height: auto }
    .global-nav { position: absolute; right: inherit; left: 0; top: 42px; width: 100%; background: rgba(0,0,0,0.8); display: none; mix-blend-mode: overlay }
    .global-nav .g-nav { padding-left: 0 }
    .global-nav li { display: block; }
    .global-nav .g-nav li a { display: block; line-height: 60px; color: #fff; padding: 0 10vw; border-bottom: dotted 1px #6b6857 }
    
    /* m-menu */
    #m-menu { position: fixed; width: 100%; height: 100vh; right: -110%; top: 0;  }
    #m-menu.active { right: 0; }
    #m-menu ul { margin: 12vw 6vw }
    #m-menu ul li a { display: block; margin: 0.5em; font-size: 32px; }
    #m-menu ul li:nth-child(8) a, #m-menu ul li:nth-child(9) a { font-size: 28px; }
    
    /* main */
    .top-mv h1 { position: absolute; left: calc(50% - 90px); top: 20px; z-index: 1 }
    .top-mv h1 img { width: 180px }
    .top-mv h2 { position: absolute; width: 90%; left: 5vw; top: 50%; z-index: 1; }
    .top-mv h2 .en { font-size: 26px; color: #fff; font-weight: 500; line-height: 1.33em }
    .top-mv h2 .ja { position: absolute; right: inherit; left: 0; bottom: -30vw; font-size: 13px; font-weight: 500; line-height: 1.66em; width: 100%; text-align: center }
    .top-mv .bg { z-index: 0; margin: 0 -20%; width: 140% }
    
    .contents { position: relative; padding-bottom: 13.2vw }
    .contents.lower { padding-bottom: 25vw }
    .top-sec { position: relative; padding: 16vw 0 0 }
    .top-sec .sec-inner { position: relative; }
    #top-philosophy { margin: 0; }
    #top-philosophy .sec-inner .visual { position: relative; width: 100%; }
    #top-philosophy .sec-inner .inner-block { position: relative; width: auto; right: inherit; top: inherit; padding: 0 5vw 10vw; margin-top: -20px }
    #top-philosophy .sec-inner .inner-block h2 { font-size: 28px; margin-bottom: 0.5em }
    #top-philosophy .sec-inner .inner-block p { font-size: 14px; }
    #top-philosophy .sec-inner .inner-block p br { display: none }
    #top-philosophy .sec-inner .view-detail { position: absolute; bottom: 0; left: 0; width: 100%; height: 52px; font-size: 16px; font-weight: 700; text-align: right; z-index: 0; }
    #top-philosophy .sec-inner .view-detail .tx { display: inline-block; line-height: 1em; padding-top: 32px; margin-right: calc(5vw + 40px); transition: all 0.2s }
    #top-philosophy .sec-inner .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
    #top-philosophy .sec-inner .view-detail::after { content: ""; position: absolute; right: 5vw; bottom: 0; width: 24px; height: 35px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
    #top-philosophy .sec-inner a:hover .view-detail .tx { margin-right: calc(5vw + 20px); }
    #top-philosophy .sec-inner a:hover .view-detail .ln { opacity: 1 }
    #top-philosophy .sec-inner a:hover .view-detail::after { right: calc(5vw - 15px); opacity: 1 }

    #top-service .sec-inner .visual { position: relative; width: 100%; margin-left: 0; }
    #top-service .sec-inner .inner-block { position: relative; width: auto; left: inherit; top: inherit; padding: 0 5vw 10vw; margin-top: -20px }
    #top-service .sec-inner .inner-block h2 { font-size: 28px; margin-bottom: 0.5em }
    #top-service .sec-inner .inner-block p { font-size: 14px; }
    #top-service .sec-inner .inner-block p.services { font-size: 13px; margin-top: 1.5em }
    #top-service .sec-inner .view-detail { position: absolute; bottom: 0; left: 0; width: 100%; height: 52px; font-size: 16px; font-weight: 700; text-align: right; z-index: 0; }
    #top-service .sec-inner .view-detail .tx { display: inline-block; line-height: 1em; padding-top: 32px; margin-right: calc(5vw + 40px); transition: all 0.2s }
    #top-service .sec-inner .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
    #top-service .sec-inner .view-detail::after { content: ""; position: absolute; right: 5vw; bottom: 0; width: 24px; height: 35px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
    #top-service .sec-inner a:hover .view-detail .tx { margin-right: calc(5vw + 20px); }
    #top-service .sec-inner a:hover .view-detail .ln { opacity: 1 }
    #top-service .sec-inner a:hover .view-detail::after { right: calc(5vw - 15px); opacity: 1 }
    
    #top-others .sec-inner { margin: 0 -2.5vw; padding: 0 5vw }
    #top-others .sec-inner .other-box { position: relative; float: left; width: calc(50% - 5vw); margin: 0 2.5vw; box-shadow: 0 0 16px #ccc; }
    #top-others .sec-inner .other-box a { display: block; height: calc(100% - 20vw - 52px); padding: 10vw 2.5vw calc(10vw + 52px) 5vw; background: rgba(255,255,255,0.85) }
    #top-others .sec-inner .other-box h3 { font-size: 24px; margin-bottom: 0.25em }
    #top-others .sec-inner .other-box p { font-size: 14px; }
    #top-others .sec-inner .other-box .view-detail { position: absolute; bottom: 5vw; left: 0; width: 100%; height: 52px; font-size: 20px; font-weight: 700; text-align: right; z-index: 0; }
    #top-others .sec-inner .other-box .view-detail .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #a5a395; opacity: 0.3; transition: all 0.2s }
    #top-others .sec-inner .other-box .view-detail::after { content: ""; position: absolute; right: 2.5vw; bottom: 0; width: 24px; height: 35px; background: url("../img/arw.png") no-repeat; background-size: contain; opacity: 0.3; transition: all 0.2s }
    #top-others .sec-inner .other-box a:hover .view-detail .ln { opacity: 1 }
    #top-others .sec-inner .other-box a:hover .view-detail::after { right: calc(2.5vw - 15px); opacity: 1 }
    
    #footer { position: relative; height: 53.8vw; padding: 0 5vw; text-align: center; }
    #footer .corporate-icon { position: relative; top: 30px; width: 33.33%; margin: 0 auto; }
    #footer .corporate-icon p { display: none }
    #footer p.copyright { position: absolute; bottom: 1em; left: 0; width: 100%; font-size: 11px }
    
    
    /* LOWER CONTENTS */
    .content-mv h1 { position: absolute; left: 5vw; bottom: -0.15em; font-size: 32px; line-height: 1em; letter-spacing: 0.08em; color: #1f1d1e; z-index: 1; }
    .sec { padding: 10vw 0 0 }
    .sec .sec-inner { padding: 0 5vw }
    .sec .sec-inner h2 { font-size: 24px; line-height: 1.33em }
    
    /* PHILOSOPHY */
    #statements .sec-inner .big-title { position: relative }
    #statements .sec-inner h2 { color: #a6a7a9; }
    #statements .sec-inner h2 .ja { font-size: 14px; color: #1f1d1e }
    #statements .sec-inner .big-title .corporate-name { position: relative; right: inherit; bottom: inherit; font-size: 16px; text-align: right }
    #statements .sec-inner .inner-block { position: relative; max-width: inherit; padding: 10vw 5vw 0; margin: 0 auto }
    #statements .sec-inner .inner-block p.txtR { margin-top: 90px }
    #statements .sec-inner .inner-block .sign { position: absolute; right: 5vw; bottom: 0; width: 70% }
    
    /* COMPANY */
    #company-outline .sec-inner table th { padding: 2.5em 5vw; border-bottom: solid 1px #6b6857 }
    #company-outline .sec-inner table td { padding: 2.5em 5vw; border-bottom: dotted 1px #a5a395 }
    
    /* SERVICE */
    #servce-intro .bg { opacity: 0.66 }
    #servce-intro .sec-inner { position: relative }
    #servce-intro .sec-inner h2 { color: #a6a7a9; margin-top: 5vw; }
    #servce-intro .sec-inner .inner-block { padding: 20px 5vw 0; }
    #our-servces ul { margin: 0; padding: 0 5vw }
    #our-servces ul li { width: 100%; margin: 5vw 0 }
    #our-servces ul li h3 { font-size: 20px; margin-bottom: 16px }
    #our-servces ul li h3 .ja { display: block; font-size: 14px; color: #a6a7a9; margin-top: 1em }
    
    /* CONTACT */
    
    #contact-form .sec-inner { padding: 0 10vw  }
    #contact-form .sec-inner .contact-form { max-width: auto; margin: 5vw auto 0 }
    #contact-form .sec-inner .contact-form dl { margin-top: 2em }
    #contact-form .sec-inner .contact-form dl dt { display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 0.5em }
    #contact-form .sec-inner .contact-form input { width: calc(100% - 2em); border: none; line-height: 4em; border-radius: 2em; padding: 0 1em; background: #e6e6e2 }
    #contact-form .sec-inner .contact-form textarea { width: calc(100% - 2em); border: none; line-height: 2em; border-radius: 2em; padding: 0 1em; background: #e6e6e2 }
    #contact-form .sec-inner .contact-form .btn-submit { margin-top: 1em }
    #contact-form .sec-inner .contact-form input[type="submit"] { width: 80%; line-height: 1em; font-size: 15px; font-weight: 700; padding: 1.5em 0; background: #676767; color: #fff; margin: 0 10%; cursor: pointer }
    
}





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

}