@charset "UTF-8";
@import "reset5.css";

body { color:#000000; line-height:1; padding: 0; position: relative; min-height: 100%; background: #cdcaca }
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.08em; font-family: neue-haas-grotesk-display, ryo-gothic-plusn, Helvetica, Arial, Sans-Serif }
p, th, td, dt, dd { line-height: 2.0; font-weight: 400 }
h2, h3, h4, h5 { font-family: neue-haas-grotesk-display, ryo-gothic-plusn, Helvetica, Arial, Sans-Serif; letter-spacing: 0.08em; font-weight: 700; font-style: normal }

.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: #171717; text-decoration: none }
a:visited { color: #171717; text-decoration: none }
a:hover { color: #fc0101; 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%; z-index: 10000 }
#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(9vw); 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: 200vw; }
.visual { opacity: 0; transform: scale(1.24); transition: opacity 1s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1); }
.visual.active { opacity: 1; transform: scale(1) }
.particles { opacity: 0; transform: scale(1.5); transition: opacity 1.2s linear, transform 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.075); }
.particles.active { opacity: 1; transform: scale(1) }
.txtl, .txtl-t { opacity: 0; padding: 0; margin: 0; display: block }

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


/* header */
#header { position: fixed; left: 0; top: 0; width: 100%; background: #bd0714; z-index: 100 }
#header h1 { padding: 20px 0; margin-left: 4.2vw; line-height: 32px; color: #fff }
#header h1 span { font-size: 12px; font-weight: 300; margin-left: 2em; letter-spacing: 0.2em }
#header .gnav { position: absolute; right: 0; top: 0; }
#header .gnav ul { display: inline-block; }
#header .gnav li { display: inline-block; }
#header .gnav li a { display: block; line-height: 72px; padding: 0 2.1vw; font-size: 15px; color: #fff }
#header .btn-contact { display: inline-block; width: 180px; height: 40px; padding: 16px 2.8vw; }
#header .btn-contact a { display: block; text-align: center; line-height: 40px; color: #bd0714; background: #fff; border-radius: 20px; font-weight: bold; transition: all 0.2s }
#header .btn-contact a:hover { transform: scale(1.08) }

/* main */
#mv { position: relative; padding: 150px 0 100px; background: #bd0714 }
#mv .mv-inner { position: relative }
#mv video { width: 100%; opacity: 0.2; transition: all 1s }
#mv.active video { opacity: 1 }
#mv h2 { position: absolute; right: 5.6vw; top: 5.6vw; text-align: right; font-size: 20px; font-weight: 500; letter-spacing: 0.32em; line-height: 1.66em }
#mv h2 i { font-weight: bold }
#mv.home h2 .txtl-t:nth-child(2) .char1, #mv.home h2 .txtl-t:nth-child(2) .char2, #mv.home h2 .txtl-t:nth-child(2) .char3, #mv.home h2 .txtl-t:nth-child(2) .char4, #mv.home h2 .txtl-t:nth-child(2) .char5, #mv.home h2 .txtl-t:nth-child(2) .char6, #mv.home h2 .txtl-t:nth-child(2) .char7, #mv.home h2 .txtl-t:nth-child(2) .char8 { font-style: italic; font-weight: bold }
#mv .tagline { position: absolute; left: 5.6vw; bottom: 5.6vw; font-size: 75px; letter-spacing: 0.12em; line-height: 1em; color: #bd0714; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; font-style: italic; font-weight: 300 }

.top-lead { padding: 11.2vw 0; text-align: center; background: url("../img/bg01.jpg"); background-size: cover; background-attachment: fixed }
.top-lead p { font-size: 18px; color: #fff; font-weight: 500 }

.contents { position: relative; padding-bottom: 12vw }
#home .contents { padding-bottom: 18vw }
#home .contents .parts3 { position: absolute; left: 0; bottom: -5.6vw; width: 94%; z-index: 0 }

.sec { position: relative; padding: 80px 0; z-index: 1 }
.sec h2 { font-size: 96px; font-weight: 600; letter-spacing: 0.04em; color: #fff; position: relative; overflow: visible }
.sec h2 .ja { font-size: 18px; color: #000; margin-top: 10px }
.sec h2.tit { position: relative; font-size: 40px; font-weight: 600; letter-spacing: 0.04em; color: #bd0714; }
.sec h2.tit .en { position: relative; display: inline-block; z-index: 10 }
.sec h2.tit .ja { position: relative; font-size: 16px; margin-left: 2em; display: inline-block; z-index: 10 }
.sec h2.tit .ln { position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #fff; border-top: solid 1px #aeacac; z-index: 0; transition: all 0.8s }
.sec.active h2.tit .ln { width: calc(100% + 5.6vw) }
.sec .sec-inner { padding: 0 5.6vw; text-align: left }
.sec .sec-inner .cn { position: absolute; right: calc(5.6vw - 3em); top: 80px; font-weight: 600; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.sec .sec-inner .cn .char1 { color: #bd0714 !important }
.sec a:link, .sec a:visited { font-weight: 500; color: #bd0714; }
.sec a:hover { color: #fc0101; }

#top-business { padding-bottom: calc(80px + 13.42vw) }
#top-business p.summary { display: inline-block; width: 50vw; font-size: 18px; margin: 60px 0 80px 33.33% }
#top-business .parts1 { position: absolute; right: -12%; bottom: -80px; width: 54%; z-index: 0 }
#top-business .parts2 { position: absolute; left: -17%; bottom: -25vw; width: 75%; z-index: 0 }
.business-idx li { float: left; width: 33.33% }
.business-idx li a { position: relative; display: block; }
.business-idx li a .thumb { overflow: hidden; }
.business-idx li a .thumb img { transition: all 0.2s }
.business-idx li a .tx { position: absolute; width: 100%; height: 1.2em; left: 0; bottom: 0; font-size: 2.8vw; letter-spacing: 0.16em; color: #fc0101; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; font-style: italic; z-index: 10 }
.business-idx li:first-child a .tx { letter-spacing: 0.08em }
.business-idx li a .tx::first-letter, .business-idx li a .tx .char1 { font-size: 1.25em; }
.business-idx li a aside { position: absolute; right: 20px; bottom: -60px; width: 30px; height: 30px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
.business-idx li a aside img { transform: scale(0); transition: all 0.2s snap }
.business-idx li a:hover .thumb img { transform: scale(1.12); opacity: 0.5 }
.business-idx li a:hover aside  { transform: scale(1.2); }
.business-idx li a:hover aside img  { transform: scale(1); }
.business-idx li h3 { font-size: 24px; font-weight: 500; letter-spacing: 0.32em; margin: 30px 0 0 5.6vw }

#top-company h2 { font-size: 6.2vw; }
#top-company p.summary { display: inline-block; width: 50vw; font-size: 18px; margin: 60px 0 80px 33.33% }
.company-idx { padding: 0 2.8vw 40px }
.company-idx li { float: left; width: calc(50% - 5.6vw); margin: 0 2.8vw }
.company-idx li a { position: relative; display: block; padding: 30px 0; border-bottom: solid 2px #fff }
.company-idx li a h3 { font-size: 36px; font-weight: 550; color: #bd0714 }
.company-idx li a p { font-size: 20px; font-weight: 550; }
.company-idx li a h3 .ja { font-size: 16px; color: #000; line-height: 1.5em; display: block }
.company-idx li a aside { position: absolute; right: 0; bottom: 15px; width: 30px; height: 30px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
.company-idx li a aside img { transform: scale(0); transition: all 0.2s snap }
.company-idx li a:hover aside  { transform: scale(1.2); }
.company-idx li a:hover aside img  { transform: scale(1); }

#top-inter { width: 100%; height: 33.33vw; text-align: center; background: url("../img/bg02.jpg"); background-size: cover; background-attachment: fixed }

#top-other { padding-top: 120px }
#top-other .cn { top: 120px }
.other-idx { padding: 0 0 40px }
.other-idx li { float: left; width: 50%; }
.other-idx li a { position: relative; display: block; }
.other-idx li a .thumb { overflow: hidden }
.other-idx li a .thumb img { transition: all 0.2s }
.other-idx li a .tx { position: absolute; left: 5.6vw; bottom: 2.8vw; font-size: 48px; font-weight: 550; color: #bd0714;z-index: 10 }
.other-idx li h3 { font-size: 18px; font-weight: 550; margin: 30px 0 0 5.6vw; }
.other-idx li a aside { position: absolute; right: 0; bottom: -60px; width: 30px; height: 30px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
.other-idx li a aside img { transform: scale(0); transition: all 0.2s snap }
.other-idx li a:hover .thumb img { transform: scale(1.12); opacity: 0.5 }
.other-idx li a:hover aside  { transform: scale(1.2); }
.other-idx li a:hover aside img  { transform: scale(1); }

.link-txt { margin-top: 2em }
.link-txt a { display: block; position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 32px; }
.link-txt a.ib { display: inline-block }
.link-txt a:before { content: ""; position: absolute; left: 0; top: 50%; display: block; width: 20px; height: 20px; margin-top: -10px; background: url(../img/arw.png) no-repeat; background-size: contain }

#footer { padding: 60px 5.6vw 0; background: #dddbdb }
#footer .footer-inner { padding: 0 5.6vw 2.8vw }
#footer .fnav { margin-right: -5.6vw; line-height: 1.66em }
#footer .fnav ul>li { float: left; width: 25% }
#footer .fnav ul>li:first-child { width: 100% }
#footer .fnav ul>li>a { display: block; font-size: 18px; font-weight: 600; padding: 1.66em 0 }
#footer .fnav ul>li>a>span { display: block; font-size: 14px; font-weight: 400; line-height: 2em }
#footer .fnav ol>li { float: none; width: auto }
#footer .fnav ol>li>a { display: block; padding: 0 1em; font-size: 14px; }
#footer .fnav ol>li>a.nsp { padding: 0; }
#footer  .logoset { text-align: center; margin-top: 5.6vw; }
#footer .copyright { background: #bd0714; text-align: center; padding: 2em 0; margin:  0 -5.6vw }
#footer .copyright p { color: #fff; font-weight: 600 }


/* Lower Contents */
#mv.lower { position: relative; padding: 150px 0 0; }
#mv.lower img { opacity: 0.08; transition: all 1s linear }
#mv.lower h2 { position: absolute; left: 5.6vw; top: calc(100% - 100px); color: #fff; line-height: 1em; letter-spacing: 0.16em; font-weight: 600; text-align: left; z-index: 10 }
#mv.lower h2 .en { font-size: 64px; }
#mv.lower h2 .ja { font-size: 16px; margin: 44px 0 0 5.6vw; font-weight: 500 }
#mv.lower h2 .en .char1  { color: #bd0714 }
#mv.lower .line-rd { position: absolute; left: 5.6vw; bottom: 0; width: 0; height: 50px; background: #bd0714; transition: all 0.8s }
#mv.lower .line-bk { position: absolute; left: 8.4vw; bottom: -10px; width: 0; height: 10px; background: #000; }
#mv.lower.active img { opacity: 1 }
#mv.lower.active .line-rd { width: calc(100% - 5.6vw); }
#mv.lower.active .line-bk { width: calc(100% - 8.4vw); }
#mv.lower .bigtit { padding: 5.6vw 5.6vw 0; background: #cdcaca }
#mv.lower .bigtit h2 { position: relative; left: inherit; top: inherit; margin-left: 5.6vw; }
#mv.lower .bigtit h2 .ja { margin: 44px 0 0 0; }

#message { padding-top: 160px }
#message h2 { font-size: 76px }
#message .msg { padding: 60px 5.6vw 0 }
#message .msg p { font-size: 18px }
#message .msg p.txtR { margin-top: 1em }
#message .msg i { font-weight: bold }
.tbl { padding-left: 2.8vw }
.tbl th { padding: 2em 2.8vw; border-bottom: solid 1px #dad7d7; vertical-align: top; font-weight: 500 }
.tbl th.year em { font-size: 24px; font-weight: bold }
.tbl td { padding: 2em 2.8vw; border-bottom: solid 1px #dad7d7 }
.tbl .no-bdr { border: none }
.imgs { zoom:1; margin-top: 2em }
.imgs:after{ content:""; clear:both; display:block; height:0; }
.imgs img { float: left }
.block { padding: 60px 5.6vw 0 }
.block-s { padding: 15px 1em }
.block h3 { font-size: 20px; margin-bottom: 1em; line-height: 1.5em }
.block h4 { font-size: 18px; padding: 1em 0 0.5em }
.block-two { padding: 5.6vw 0 0 }
.block-two .img-l { float: left; width: 50% }
.block-two .img-r { float: right; width: 50% }
.block-two .cont { float: left; width: calc(50% - 11.2vw); padding: 0 5.6vw }
.block-two h3 { font-size: 24px; margin-bottom: 1em }
#business-partners .makers li { float: left; width: 50%; line-height: 2em }
#business-partners .brands { margin: 0 -5.8vw }
#business-partners .brands li { float: left; width: calc(20% - 2px); padding: 1px }
#business-partners .brands li a { display: block; background: #d6d4d4; border-radius: 8px; transition: all 0.2s }
#business-partners .brands li a:hover { transform: scale(1.05); box-shadow: 2px 2px 12px rgba(0,0,0,0.1)}
#about-sabae .about .cont { margin-top: 14.7vw }
.sabae-map { position: relative }
.sabae-map h3 { position: absolute; left: 5.6vw; top: 0; color: #fff; font-size: 40px; font-weight: 400; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; }
.sabae-map figure { margin: 0 -2.8vw }

.btn a { position: relative; display: block; padding: 25px 2.8vw; border-bottom: solid 2px #fff }
.btn a p { font-size: 20px; font-weight: 550; }
.btn a aside { position: absolute; right: 0; top: calc(50% - 15px); width: 30px; height: 30px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
.btn a aside img { transform: scale(0); transition: all 0.2s snap }
.btn a:hover aside  { transform: scale(1.2); }
.btn a:hover aside img  { transform: scale(1); }

.link-tx { margin-top: 1em }
.link-tx a { position: relative; display: block; height: 30px; line-height: 30px; padding-right: 50px; background: #ccc }
.link-tx a.ib { display: inline-block }
.link-tx a aside { position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
.link-tx a aside img { transform: scale(0); transition: all 0.2s snap }
.link-tx a:hover aside  { transform: scale(1.2); }
.link-tx a:hover aside img  { transform: scale(1); }

#job .btn { padding: 0 5.8vw; margin-top: 1em }
#job .btn a { text-align: center }

#contact { padding-top: 0 }
#contact h3 { font-size: 24px; margin: 1em 5.6vw }
#contact .company-idx li a aside { bottom: calc(50% - 15px)}

#privacy-policy { padding-top: 0 }
ul.lists { line-height: 1.66em; margin-top: 1em }
ul.lists li { list-style: square; padding: 1em 0 0 0; margin-left: 2em }

/* business-outline */
#business-outline { padding: 40px 0 0 }
#business-outline h2.tit { padding: 0 11.2vw 60px }
#business-outline h2.tit .en { font-size: 64px; line-height: 0.6; display: block !important }
#business-outline h2.tit .ja { margin-left: 0 !important }
#business-outline .business-idx p { padding: 30px 0 0 5.8vw }

#business-outline-lower-tit { padding-top: 160px }
#business-outline-lower-tit h2 { font-size: 80px; font-weight: 500 }
#business-outline-lower-tit h2 .en { font-size: 64px; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; font-style: italic; padding: 0 0 0 50px }
#business-outline-lower-tit h2 .slash { color: #bd0714 }
#business-outline-lower-tit h2 .txtl { display: inline-block }
#business-outline-lower-tit .intro { padding: 60px 5.6vw 0 }
#business-outline-lower-tit .intro p { font-size: 18px }
#business-outline-lower-tit .intro h3 { font-size: 36px; color: #bd0714; margin-bottom: 1em; }
#business-outline-lower-tit .intro .read { padding: 0 0 100px }
#business-outline-lower-tit .intro .img { padding: 40px 0 0 }

#business-outline-lower { padding: 40px 0 0 }
#business-outline-lower .flame { padding: 160px 0 0; }
#business-outline-lower .tit { margin: 0 0 40px 5.6vw; padding: 0 0 1px; border-bottom: 1px solid #fff }
#business-outline-lower .tit h3 { font-size: 36px; line-height: 0.8em !important; color: #bd0714; border-bottom: 1px solid #aeacac; position: relative }
#business-outline-lower .tit h3 .num { font-size: 100px; color: #fff; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 200; font-style: italic; position: absolute; bottom: 18px; left: -50px }
#business-outline-lower ul li { line-height: 2em; }
#business-outline-lower ul li::before { content: "■"; font-size: 6px; padding: 0 3px 0 0; vertical-align: middle }
#business-outline-lower h4 { font-size: 24px; margin-bottom: 1em; line-height: 1.66em }
#business-outline-lower .block-two .mb { margin-bottom: 4.4vw }
#business-outline-lower .block-two.idea { padding: 8.8vw 0 0; }
#business-outline-lower .block-two_2 { padding: 5.6vw 0 0 }
#business-outline-lower .block-two_2 .img-l { float: left; width: 44% }
#business-outline-lower .block-two_2 .cont { float: left; width: calc(56% - 11.2vw); padding: 0 5.6vw }
#business-outline-lower .pt0 { padding-top: 0 !important; }
#business-outline-lower .clm-two { padding: 3vw 8.4vw 0 }
#business-outline-lower .clm-two .clm-two-inner { padding: 5.8vw 0 0 }
#business-outline-lower .clm-two .fltL { width: calc(50% - 2.8vw) }
#business-outline-lower .clm-two .fltR { width: calc(50% - 2.8vw) }
#business-outline-lower .clm-two .cont { padding: 40px 0 0; }
#business-outline-lower .clm-two h3 { font-size: 24px; margin-bottom: 1em }
#business-outline-lower .clm-two i { font-weight: 600 }
#business-outline-lower .link-tx { margin-top: 2em }
#business-outline-lower .link-tx a { color: #000 !important }
#business-outline-lower .link-tx a aside { position: absolute; left: 210px }
#quality01 .tit h3 { padding: 0 0 0 120px }
#quality01 > p { padding: 60px 11.2vw 0 }
#quality02 .tit h3 { padding: 0 0 0 160px }
#quality03 .tit h3 { padding: 0 0 0 160px }
#quality03 .box { padding: 5.8vw 5.6vw 0 }
#quality03 .box h4 { margin-bottom: 30px }
#quality03 .box .box-inner .cfix { background: #d6d4d4; padding: 30px 35px 15px 35px; margin: 0 5px 0 0; width: calc(50% - 75px); border-radius: 6px }
#quality03 .box .box-inner .cfix:nth-child(2) { margin-right: 0 }
#quality03 .box h5 { font-size: 18px; margin: 0 0 30px }
#quality03 .box ol { width: 50% }
#quality03 .box ol li { margin: 0 0 15px }
#quality03 .box ol li span { font-size: 20px; color: #bd0714; font-weight: 600; padding: 0 5px 0 0 }
#quality04 .tit h3 { padding: 0 0 0 160px }
#quality04 .link { padding: 120px 11.2vw 0 }
#quality04 .link h3 { font-size: 36px; color: #bd0714; margin-bottom: 1em }
#quality04 .link .btn { margin: 40px 0 0 }
#quality04 .link .btn a { color: #000; font-size: 20px; padding: 25px 0 }
#quality04 .link .btn a aside { position: absolute; right: 10px; }
#link-thumb { padding: 150px 5.6vw 0; position: relative }
#link-thumb p { font-size: 16px; font-weight: 600; writing-mode: vertical-rl; position: absolute; top: 150px; right: 1.6vw }
#link-thumb p span { color: #bd0714 }
#link-thumb .business-idx ul { margin: 0 0 0 -1px }
#link-thumb .business-idx ul li { width: calc(33.33% - 1px); margin: 0 0 0 1px }
#link-thumb .business-idx ul li a .tx { position: absolute; width: 100%; height: 1.2em; left: 0; bottom: 0; font-size: 2.4vw; letter-spacing: 0.16em; color: #fc0101; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; font-style: italic; z-index: 10 }
#link-thumb .business-idx ul li .thumb { padding: 3px 0 }
#link-thumb .business-idx ul li a.cur .thumb { border-top: 3px solid rgba(162,32,65,1); border-bottom: 3px solid rgba(162,32,65,1); padding: 0; opacity: 0.4 }
#link-thumb .business-idx ul li h3 { font-size: 18px }

#equipment {}
.tbl-eq { }
.tbl-eq th { padding: 1em 2em; border-bottom: solid 1px #faf7f7; vertical-align: top; font-weight: 500 }
.tbl-eq th.hd { font-size: 14px; padding: 1em; border-bottom: solid 1px #faf7f7; }
.tbl-eq td { font-size: 14px; padding: 1em; border-bottom: solid 1px #dad7d7 }
.tbl-eq td.bw { border-bottom: solid 1px #faf7f7; }

.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 .fd-inner { position: relative; top: 6vw }
    .zm { transform: scale(1.24); }
    .txtl, .txtl-t { display: inline-block }
    
    #btn-menu { display: block; position: fixed; right: 0; top: 0; width: 60px; height: 42px; cursor: pointer; z-index: 101 }
    #btn-menu span { position: absolute; display: block; width: 30px; height: 2px; background: #fff; 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:hover span:nth-child(1) { left: 15px; top: 15px }
    #btn-menu.active:hover span:nth-child(2) { left: 15px; bottom: 15px }
    #btn-menu.active span:nth-child(1) { transform: rotate(45deg) scaleX(0.5); margin-top: 5px; background: #fff }
    #btn-menu.active span:nth-child(2) { transform: rotate(-45deg) scaleX(0.5) translate(8px, -4px); background: #fff }
    
    /* header */
    #header { position: fixed; left: 0; top: 0; width: 100%; height: 42px; }
    #header h1 { padding: 8px 0; margin-left: 4.2vw; line-height: 24px; }
    #header h1 img { width: auto; height: 24px; }
    #header h1 span { font-size: 10px; }
    #header .gnav { position: absolute; right: 0; top: 42px; width: 100%; background: rgba(189,7,20,0.9); text-align: center; border-top: solid 1px #cdcaca; display: none }
    #header .gnav li { display: inline-block; width: 100%; border-bottom: solid 1px #c5696f }
    #header .gnav li a { display: block; line-height: 1em; padding: 25px 0; }
    #header .btn-contact { display: inline-block; width: 200px; height: 40px; padding: 16px 2.8vw; margin: 0 auto }
    #header .btn-contact a { display: block; text-align: center; line-height: 40px; color: #bd0714; background: #fff; border-radius: 20px; font-weight: bold }
    
    /* main */
    #mv { position: relative; padding: 180px 0 100px; background: #bd0714 }
    #mv .mv-inner { position: relative }
    #mv.home video { width: 143.75%; margin: 0 calc(-100% * (3.5 / 16))}
    #mv.home h2 { position: absolute; right: inherit; left: 4vw; top: inherit; bottom: -4em; text-align: right; font-size: 14px; letter-spacing: 0.06em; font-weight: 400; text-align: left; color: #fff }
    #mv.home h2 i { font-weight: bold }
    #mv.home .tagline { position: absolute; left: 4vw; bottom: inherit; top: -110px; font-size: 25px; letter-spacing: 0.12em; line-height: 1em; color: #fff; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; }
    
    .contents { position: relative; padding-bottom: 16vw }
    #home .contents .parts3 { position: absolute; left: 0; bottom: -8vw; width: 130%; z-index: 0 }
    
    .top-lead { padding: 20vw 0; text-align: center; background: url("../img/bg01.jpg"); background-size: cover; background-attachment: inherit }
    .top-lead p { font-size: 15px; padding: 0 8vw; text-align: left; }
    .top-lead p br { display: none }
    
    .sec { position: relative; padding: 8vw 0; z-index: 1 }
    .sec h2 { font-size: 40px; line-height: 0.66em }
    .sec h2 .ja { font-size: 14px; line-height: 1em; margin-top: 0 }
    .sec h2.tit { font-size: 28px; margin-left: -2vw }
    .sec h2.tit .ja { position: relative; font-size: 14px; }
    .sec.active h2.tit .ln { width: calc(100% + 10vw) }
    .sec .sec-inner { padding: 0 8vw; text-align: left }
    .sec .sec-inner .cn { position: absolute; right: 0; top: 8vw; font-size: 12px }
    .sec .sec-inner .cn em { color: #bd0714 !important }
    
    #top-business p.summary { display: inline-block; width: 75vw; font-size: 15px; margin: 30px 0 40px 8vw }
    #top-business .parts1 { position: absolute; right: -6%; bottom: 8vw; width: 76%; z-index: 0 }
    #top-business .parts2 { position: absolute; left: -12%; bottom: -42vw; width: 100%; z-index: 0 }
    .business-idx li { float: left; width: 100%; margin-bottom: 8vw }
    .business-idx li a .tx { position: absolute; left: 0; bottom: 0; font-size: 8.2vw; letter-spacing: 0.16em; color: #fc0101; font-family: ethnocentric, Helvetica, Arial, Sans-Serif; font-weight: 300; font-style: italic;}
    .business-idx li a .tx .char1 { font-size: 1.25em; }
    .business-idx li a aside { position: absolute; right: 20px; bottom: -45px; width: 24px; height: 24px; transition: all 0.2s }
    .business-idx li a aside img { transform: scale(1); transition: all 0.2s }
    .business-idx li h3 { font-size: 18px; font-weight: 500; letter-spacing: 0.32em; margin: 20px 0 0 8vw }
    
    #top-company h2 { font-size: 40px; line-height: 0.8em }
    #top-company p.summary { display: inline-block; width: 75vw; font-size: 15px; margin: 30px 0 40px 8vw }
    .company-idx { padding: 0 8vw 40px }
    .company-idx li { float: left; width: 100%; margin: 0 }
    .company-idx li a { position: relative; display: block; padding: 18px 0; border-bottom: solid 2px #fff }
    .company-idx li a h3 { font-size: 28px; font-weight: 550; color: #bd0714 }
    .company-idx li a h3 .ja { font-size: 14px; color: #000; line-height: 1.5em; display: block }
    .company-idx li a aside { position: absolute; right: 0; bottom: 15px; width: 24px; height: 24px; }
    .company-idx li a aside img { transform: scale(1); }
    
    #top-inter { width: 100%; height: 50vw; background-size: cover; background-attachment: inherit }
    
    #top-other { padding-top: 60px }
    #top-other .cn { top: 60px }
    .other-idx { padding: 0 0 40px }
    .other-idx li { float: left; width: 100%; margin-bottom: 8vw }
    .other-idx li a { position: relative; display: block; }
    .other-idx li a .tx { position: absolute; left: 4vw; bottom: 2vw; font-size: 32px; }
    .other-idx li h3 { font-size: 14px; font-weight: 550; margin: 15px 0 0 5.6vw; }
    .other-idx li a aside { position: absolute; right: 0; bottom: -35px; width: 24px; height: 24px;}
    .other-idx li a aside img { transform: scale(1); }
    
    .link-txt { margin-top: 2em }
    .link-txt a { display: block; position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 32px; }
    .link-txt a:before { content: ""; position: absolute; left: 0; top: 50%; display: block; width: 20px; height: 20px; margin-top: -10px; background: url(../img/arw.png) no-repeat; background-size: contain }
    
    #footer { padding: 30px 4vw 0; }
    #footer .footer-inner { padding: 0 4vw 8vw }
    #footer .fnav { margin-right: 0; line-height: 1.66em }
    #footer .fnav ul>li { float: left; width: 50% }
    #footer .fnav ul>li>a { display: block; font-size: 15px; }
    #footer .fnav ul>li>a>span { display: block; font-size: 13px; font-weight: 400; line-height: 2em }
    #footer .fnav ol>li { float: none; width: auto }
    #footer .fnav ol>li>a { display: block; padding: 0 1em; font-size: 13px; }
    #footer  .logoset { text-align: center; margin-top: 16vw; }
    #footer  .logoset img { width: 120px }
    #footer .copyright { padding: 1.5em 0; margin:  0 -4vw }
    
    
    /* Lower Contents */
    #mv.lower { position: relative; padding: 84px 0 0; }
    #mv.lower img { width: 143.75%; margin: 0 calc(-100% * (3.5 / 16)) }
    #mv.lower h2 { position: absolute; left: 4vw; top: calc(100% - 55px); color: #fff; line-height: 1em; font-weight: 600; text-align: left; z-index: 10 }
    #mv.lower h2 .en { font-size: 32px; }
    #mv.lower h2 .ja { font-size: 12px; margin: 5px 0 0 4vw; font-weight: 500 }
    #mv.lower h2 .en .char1  { color: #bd0714 }
    #mv.lower .line-rd { position: absolute; left: 4vw; bottom: 0; width: 0; height: 30px; background: #bd0714; transition: all 0.8s }
    #mv.lower .line-bk { position: absolute; left: 8vw; bottom: -6px; width: 0; height: 6px; background: #000; }
    #mv.lower.active img { opacity: 1 }
    #mv.lower.active .line-rd { width: calc(100% - 4vw); }
    #mv.lower.active .line-bk { width: calc(100% - 8vw); }
    #mv.lower .bigtit { padding: 8vw 4vw 0; background: #cdcaca }
    #mv.lower .bigtit h2 { position: relative; left: inherit; top: inherit; margin-left: 8vw; }
    #mv.lower .bigtit h2 .ja { margin: 6px 0 0; }
    
    #message { padding-top: 60px }
    #message h2 { font-size: 38px; line-height: 1.08em }
    #message h2 .ja { line-height: 1.5em }
    #message .msg { padding: 30px 0 0 }
    #message .msg p { font-size: 15px }
    .tbl { padding-left: 0 }
    .tbl th { padding: 2em 1em 2em 0; white-space: nowrap }
    .tbl th.year em { font-size: 18px; font-weight: bold }
    .tbl td { padding: 2em 0 2em 1em; border-bottom: solid 1px #dad7d7 }
    .tbl .no-bdr { border: none }
    #history .imgs img { width: 100% }
    .block { padding: 40px 0 0 }
    .block-s { padding: 10px o.5em }
    .block h3 { font-size: 16px; }
    .block h4 { font-size: 15px; }
    .block-two { padding: 40px 0 0 }
    .block-two .img-l { float: none; width: 100%; margin-bottom: 30px }
    .block-two .img-r { float: none; width: 100%; margin-bottom: 30px }
    .block-two .cont { float: none; width: 100%; padding: 0 }
    .block-two h3 { font-size: 24px; margin-bottom: 1em }
    #business-partners .makers li { float: left; width: 100%; line-height: 2em }
    #business-partners .brands { margin: 0 -4vw }
    #business-partners .brands li { float: left; width: calc(33.33% - 2px); padding: 1px }
    #about-sabae .about .cont { margin-top: 14.7vw }
    .sabae-map h3 { position: absolute; left: 4vw; top: 0; font-size: 24px; font-weight: 400; }
    .sabae-map figure { margin: 0 -4vw }
    
    .btn a { position: relative; display: block; padding: 20px 0; }
    .btn a p { font-size: 18px; font-weight: 550; }
    .btn a aside { position: absolute; right: 0; top: calc(50% - 12px); width: 24px; height: 24px; background: url(../img/circle.png); background-size: contain; transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) }
    
    .link-tx { margin-top: 1em }
    .link-tx a { position: relative; display: block; height: 24px; line-height: 24px; padding-right: 36px; background: #ccc }
    .link-tx a aside { position: absolute; right: 0; top: 0; width: 24px; height: 24px; background: url(../img/circle.png); background-size: contain; }
    
    #job .btn { padding: 0; margin-top: 1em }
	
	
	/* business-outline */
	#business-outline { padding: 20px 0 0 }
	#business-outline h2.tit { padding: 0 8vw 20px }
	#business-outline h2.tit .en { font-size: 32px; line-height: 1 }
	#business-outline .business-idx p { padding: 15px 0 0 8vw }
	
	#business-outline-lower-tit { padding-top: 60px }
	#business-outline-lower-tit h2 { font-size: 48px; }
    #business-outline-lower-tit h2 .mincho { line-height: 1.2em }
	#business-outline-lower-tit h2 .en { font-size: 24px; padding: 10px 0 0; display: block }
	#business-outline-lower-tit .intro { padding: 30px 0 0 }
	#business-outline-lower-tit .intro p { font-size: 15px }
	#business-outline-lower-tit .intro h3 { font-size: 24px; margin-bottom: 0.8em; line-height: 1.66em }
	#business-outline-lower-tit .intro .read { padding: 0 0 40px }
	#business-outline-lower-tit .intro .img { padding: 20px 0 0 }
	
	#business-outline-lower { padding: 40px 0 0 }
	#business-outline-lower .flame { padding: 80px 0 0; }
	#business-outline-lower .tit { margin: 0 0 30px 8vw; }
	#business-outline-lower .tit h3 { font-size: 24px;　line-height: 1.66em }
	#business-outline-lower .tit h3 .num { font-size: 60px; position: absolute; bottom: 8px; left: -30px }
	#business-outline-lower h4 { font-size: 16px; margin-bottom: 1em }
	#business-outline-lower .block-two { padding: 40px 8vw 0; }
	#business-outline-lower .block-two .mb { margin-bottom: 8vw }
	#business-outline-lower .block-two.idea { padding: 40px 8vw 0; }
    #business-outline-lower .block-two .img-l img, #business-outline-lower .block-two .img-r img, #business-outline-lower .block-two_2 .img-l img, #business-outline-lower .block-two_2 .img-r img { margin: 0 -8vw; width: calc(100% + 16vw) }
	#business-outline-lower .block-two_2 { padding: 40px 8vw 0 }
	#business-outline-lower .block-two_2 .img-l { width: 100%; margin-bottom: 30px }
	#business-outline-lower .block-two_2 .cont { width: 100%; padding: 0 }
	#business-outline-lower .clm-two { padding: 60px 8.8vw 0 }
	#business-outline-lower .clm-two .clm-two-inner { padding: 0 }
	#business-outline-lower .clm-two .fltL { width: 100%; margin-bottom: 40px }
	#business-outline-lower .clm-two .fltR { width: 100%; margin-bottom: 40px }
	#business-outline-lower .clm-two .cont { padding: 30px 0 0 }
	#business-outline-lower .clm-two .fltL:last-child { margin-bottom: 0; }
	#business-outline-lower .link-tx a aside { position: absolute; left: 160px }
	#quality01 .tit h3 { padding: 0 0 0 70px }
	#quality01 > p { padding: 40px 8vw 0 }
	#quality02 .tit h3 { padding: 0 0 0 100px }
	#quality03 .tit h3 { padding: 0 0 0 100px }
	#quality03 .box { padding: 30px 8vw 0 }
	#quality03 .box h4 { margin-bottom: 1em }
	#quality03 .box .box-inner .cfix { padding: 20px 10px 5px 10px; margin: 0 0 5px; width: calc(100% - 20px) }
	#quality03 .box h5 { font-size: 14px; margin: 0 0 20px }
	#quality03 .box ol li { font-size: 12px }
	#quality03 .box ol li span { font-size: 14px }
	#quality04 .tit h3 { padding: 0 0 0 100px }
	#quality04 .link { padding: 60px 8vw 0 }		
	#quality04 .link h3 { font-size: 26px; margin: 0 0 0.8em }
	#quality04 .link .btn { margin: 10px 0 0 }
	#quality04 .link .btn a { font-size: 18px }
	#quality04 .link .btn a aside { position: absolute; right: 0 }	
	#link-thumb { padding: 80px 8vw 0; }
	#link-thumb p { position: absolute; top: 80px; right: 0.2vw; font-size: 12px }
	#link-thumb .business-idx ul { margin: 0 }
	#link-thumb .business-idx ul li { width: 100%; margin: 0 0 8vw }
	#link-thumb .business-idx ul li a .tx { font-size: 6.8vw }
    .img.wide { width: calc(100% + 16vw); margin: 0 -8vw }
    
    .tbl-eq { width: calc(100% + 16vw); overflow-x: scroll; margin: 0 -8vw; }
    .tbl-eq th { padding: 1em; border-bottom: solid 1px #faf7f7; vertical-align: top; font-weight: 500; white-space: nowrap }
    .tbl-eq th.hd { font-size: 12px; padding: 1em;  }
    .tbl-eq td { font-size: 12px; padding: 1em; border-bottom: solid 1px #dad7d7; white-space: nowrap }
    .tbl-eq td.bw { border-bottom: solid 1px #faf7f7; }
}





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

}


/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
  position: relative;
  left: -9999px;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background-color: #e9cbce;
  color: #e9cbce;
  box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  -webkit-animation: dot-typing 1s infinite linear;
  animation: dot-typing 1s infinite linear;
}

@-webkit-keyframes dot-typing {
  0% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  16.667% {
    box-shadow: 9986px -8px 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  33.333% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  50% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px -10px 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  66.667% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  83.333% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px -8px 0 0 #c7cad9;
  }
  100% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
}

@keyframes dot-typing {
  0% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  16.667% {
    box-shadow: 9986px -8px 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  33.333% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  50% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px -10px 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  66.667% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
  83.333% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px -8px 0 0 #c7cad9;
  }
  100% {
    box-shadow: 9986px 0 0 0 #1f2a68, 9999px 0 0 0 #8f94b3, 10012px 0 0 0 #c7cad9;
  }
}