@charset "utf-8"; /* ------------------------------------------- Auther: design studio tom'sOne Tommy Tsutsui https://toms1.net/ Last modefied: 12/Sep/2022 ------------------------------------------- */ /* ------------------------------------------- Reset ------------------------------------------- */ html{font-size:62.5%;}body,a,address,header,html,iframe,nav{padding:0;margin:0}address,header,html,iframe,nav{border:0;outline:0}abbr,article,aside,audio,b,canvas,cite,code,del,details,dfn,em,fieldset,figcaption,figure,form,hgroup,i,img,ins,kbd,label,legend,mark,menu,object,pblockquote,pre,q,samp,span,strong,sub,summary,sup,time,var,video{background:0 0;margin:0;padding:0;border:0;outline:0}footer,h1,h2,h3,h4,h5,h6,p,section,small{border:0;outline:0}address,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a img,figure{vertical-align:top}abbr[title],dfn[title]{cursor:help}input,select{vertical-align:middle}noscript{margin:0} /* Desktop Hide Items */ @media (max-width: 960px) { .dsFalse { display: none !important} } @media (max-width: 767px) { #GNav { display: none !important} } /* ------------------------------------------- Fonts ------------------------------------------- */ body, .FDefault, .CRMark { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif} .tenMin, #globalNav, .ORAbbr, .ONItem, .ORTNum, .ORCopyright, .BLNJP, #footTel, .BNTime, #topHeadCopy, #THSubCopy, #pageTitle, #NPostTitle, .pageST, #secAppeal, #topServiceST, #TAIST, #TAIBT, .topSTEN, .WRHead, #conceptCatch, #CLogoST, .AIMST, .SLineST, #modelPAppeal,.SFNum, .SFCItem, .policyKind, .NATitle, .NATime, #newsIndNavi, .contactST, .CTelNum, #completionST { font-family: ten-mincho, serif; font-weight: 400; font-style: normal; font-feature-settings : "palt"} .SILight, .copyright, .TWICap { font-family: shadows-into-light, sans-serif; font-weight: 400; font-style: normal; font-feature-settings : "palt"} #topServiceST, #OStrengthST, #flowST, #legalST, #CGroupST { text-shadow: 1px 1px 0 rgba(255,255,255,1)} #conceptST, #SHeadST, #botNewsList .pageST, #topServiceST, #outlineST { text-shadow: 1px 1px 0 rgba(255,255,255,.5)} #topHeadCopy, #THSubCopy { text-shadow: 0 1px 4px rgba(0,0,0,.9)} #topServiceCopy { text-shadow: 0 0 3px rgba(255,255,255,1)} /* ------------------------------------------- Common ------------------------------------------- */ @font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium")} @font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold} body { position: relative; color: #333; background: #fff; -webkit-text-size-adjust: 100%; font-size: 1em; line-height: 1; width: 100%; height: 100%; z-index: 1} .lazyload{ opacity: 0} .lazyloaded{ opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s} .mag20 { margin-top: 20px !important} .mag50 { margin-top: 50px !important} .magLM03 { margin-left: -.35em !important} .pad01 { padding-top: 1em !important} .ls0 { letter-spacing: 0 !important} .ls03 { letter-spacing: .03em !important} .ls05 { letter-spacing: .05em !important} .ls10 { letter-spacing: .1em !important} .ls15 { letter-spacing: .15em !important} .ls20 { letter-spacing: .2em !important} .ls30 { letter-spacing: .3em !important} .ls50 { letter-spacing: .5em !important} .ls100 { letter-spacing: 1em !important} .ls110 { letter-spacing: 1.1em !important} .lsM05 { letter-spacing: -.05em !important} .lsM10 { letter-spacing: -.1em !important} .lsM15 { letter-spacing: -.15em !important} .lsM20 { letter-spacing: -.2em !important} .lsM25 { letter-spacing: -.25em !important} .lsM30 { letter-spacing: -.3em !important} .lsM50 { letter-spacing: -.5em !important} .lsM75 { letter-spacing: -.75em !important} .lsW03 { margin: 0 3px !important} .lsN01 { margin: 0 -1px !important} .lsN02 { margin: 0 -2px !important} .lsEM02 { margin: 0 -.2em !important} .DBlock { display: block !important} .InBlock { display: inline-block !important} .fLeft { float: left; } .fRight { float: right} figure img { width: 100% !important; height: auto; vertical-align: top} /* Common Image */ .homeLink::before, #pagesGH .homeLink::before, .BLName, #botMark, #ORLogo { background-image: url(../common_im/common.png); background-repeat: no-repeat; background-size: 220px 462px} .FTElSign, .ORTSign, .instaLogo, .ORInstaLogo, .TSSTMark, #TAIST::before, .pageST::before, .remodal-close::after, .ETelSign { background-image: url(../common_im/common.svg); background-repeat: no-repeat; background-size: 172px 96px} /* Background Image */ .bg01, .bg02, .bg03, .bg05, .bg06 { border-top: 2px solid #fff} .bg01 { background: url(../common_im/bg01.jpg) repeat 0 0} .bg02 { background: url(../common_im/bg02.jpg) repeat 0 0} .bg03 { background: url(../common_im/bg03.jpg) repeat 0 0} .bg05 { background: url(../common_im/bg05.jpg) repeat 0 0} .bg06 { background: url(../common_im/bg06.jpg) repeat 0 0} footer { background: url(../common_im/foot_bg.jpg) repeat 0 0} @media (max-width: 820px) { .bg01, .bg02, .bg03, .bg05, .bg06 { overflow: hidden}} /* Flex Box */ .flexC, #globalNav, .PNList, .formProgress, .mfp_buttons { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-flow: row wrap; flex-flow: row wrap} /* Common Header ------------------------------------------- */ #topHeadWrapp, #pageHeadWrapp { border: none} .globalHeader { content: ''; position: relative; width: 100%; max-width: 1600px; height: 200px; margin: 0 auto} #GHead { overflow: visible; position: relative} #homeLogo { position: fixed; top: 39px; left: inherit; margin: 0 0 0 60px; z-index: 9999} #pagesGH #homeLogo { top: 45px} .homeLink { width: 198px; height: 138px; position: relative} #pagesGH .homeLink { width: 160px; height: 111px; position: relative} .homeLink::before { content: ''; position: absolute; top: 0; left: 0; z-index: 0; opacity: 1; background-position: 0 0; width: 176px; height: 122px; display: block} #pagesGH .homeLink::before { background-position: 0 -350px; width: 160px; height: 111px} .homeLink:hover:before { opacity: .35} .homeLink::after { content: 'HOME'; position: absolute; top: 40px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #f47200; font-size: 2.8rem; text-align: center; letter-spacing: .1em; text-indent: .1em; width: 100%; margin-left: -1em; display: block; z-index: 1; opacity: 0} #pagesGH .homeLink::after { font-weight: bold} .homeLink:hover::after { margin-left: 0; opacity: 1} .fixed #homeLogo, .fixed #pagesGH #homeLogo { top: 0; left: 0; margin: 0} .fixed #homeLogo:after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.75); width: 100%; height: 100%; z-index: -1} .fixed .homeLink, .fixed #pagesGH .homeLink { width: 140px; height: 89px} .fixed .homeLink::before, .fixed #pagesGH .homeLink::before { top: 11px; left: 21px; background-position: 0 0; background-size: 124px auto; width: 99px; height: 69px} .fixed .homeLink::after, .fixed #pagesGH .homeLink::after { top: 33px; font-size: 2.4rem} @media (max-width: 1200px) { #homeLogo { margin-left: 5vw} } @media (max-width: 820px) { #homeLogo, #pagesGH #homeLogo { top: 0; left: 0; margin: 0} #homeLogo:after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.75); width: 100%; height: 100%; z-index: -1} .homeLink, #pagesGH .homeLink { width: 129px; height: 88px} .homeLink::before, #pagesGH .homeLink::before { top: 10px; left: 15px; background-position: 0 0; background-size: 124px auto; width: 99px; height: 69px} .homeLink::after, #pagesGH .homeLink::after { top: 32px; font-size: 2.4rem} .fixed .homeLink, .fixed #pagesGH .homeLink { width: 92px; height: 70px} .fixed .homeLink::before, .fixed #pagesGH .homeLink::before { top: 10px; left: 10px; background-size: 90px auto; width: 72px; height: 50px} .fixed .homeLink::after, .fixed #pagesGH .homeLink::after { top: 23px; font-size: 2rem} } /* Global nav */ #GNav { position: absolute; top: 0; right: 140px; width: 280px} @media (min-width: 1600px) { #GNav { right: 8vw} } @media (max-width: 1150px) { #GNav { right: 120px; width: 250px} } @media (max-width: 1079px) { #GNav { right: 110px} } #globalNav { font-size: 1.6rem; margin: 40px 0 0; padding: 0; position: relative} #globalNav li { -webkit-font-feature-settings: 'pkna'; font-feature-settings: 'pkna'; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings: "palt"; letter-spacing: .15em; margin: 0; white-space: nowrap; display: block; position: relative; z-index: 9950} #globalNav li .GNReserve { letter-spacing: .025em} #globalNav a { color: #fff; text-decoration: none; padding: 0 3px; position: relative} #pagesGH #globalNav a { color: #333} #TopGH #globalNav a:hover { color: #ffa555} #pagesGH #globalNav .current, #pagesGH #globalNav .current:hover { color: #894e1e} #pagesGH #globalNav a:hover { color: #e56200; } #globalNav .current::after { content: ''; position: absolute; top: -12px; left: 50%; width: 0; height: 0; margin-left: -5px; display: block; border-style: solid; border-width: 7px 5px 0 5px; border-color: #f56200 transparent transparent transparent} #globalNav li:nth-of-type(1) .current::after { margin-left: -7px} #globalNav li:nth-of-type(2) .current::after { margin-left: -6px} #GNLine { position: absolute; top: 26px; width: 0; height: 2px; background-color:#f57e33; -webkit-transform: rotate(90deg) scale(.6,1); transform: rotate(90deg) scale(.6,1); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; z-index: 9960} #globalNav .current #GNLine { display: none} /* Overlay Navi */ #trigger-overlay { position: fixed; z-index: 9999} #trigger-overlay::before, #trigger-overlay::after { content: ''; position: absolute; top: -22px; right: -17px; width: 70px; height: 70px; display: block} #trigger-overlay::before { background: rgba(0,0,0,.75); z-index: -2} #trigger-overlay::after { background: rgba(238,68,0,.95); -webkit-transform: scale(0); transform: scale(0); z-index: -1} #trigger-overlay:hover::after, #trigger-overlay.active::after { -webkit-transform: scale(1); transform: scale(1)} #trigger-overlay:hover.active::after { -webkit-transform: scale(0); transform: scale(0)} .fixed #trigger-overlay::before, .fixed #trigger-overlay::after { top: -17px; right: -12px; width: 60px} .fixed #trigger-overlay::before, .fixed #trigger-overlay:hover::after, .fixed #trigger-overlay.active:after { height: 60px} @media (max-width: 900px) { #trigger-overlay:hover::after { -webkit-transform: scale(0); transform: scale(0)} #trigger-overlay:hover.active::after { -webkit-transform: scale(1); transform: scale(1)} } .menu-trigger, .menu-trigger span { display: inline-block; box-sizing: border-box} .menu-trigger { position: absolute; top: 22px; right: 17px; width: 36px; height: 27px} .fixed .menu-trigger { top: 17px; right: 12px} .menu-trigger, .menu-trigger .HMBar, .menu-trigger:after { -webkit-transition: all .4s cubic-bezier(.075, .82, .165, 1); transition: all .4s cubic-bezier(.075, .82, .165, 1)} .menu-trigger .HMBar { background: #f0f0f0; width: 36px; height: 3px; display: block; position: relative; -webkit-transition: all .7s cubic-bezier(.19, 1, .22, 1); transition: all .7s cubic-bezier(.19, 1, .22, 1); -webkit-transform-origin: right bottom; transform-origin: right bottom} .menu-trigger .HMBar:nth-child(1) { -webkit-transition-delay: 150ms; transition-delay: 150ms} .menu-trigger .HMBar:nth-child(2) { width: 18px; top: 9px; -webkit-transition-delay: .08s; transition-delay: .08s} .menu-trigger .HMBar:nth-child(3) { width: 27px; top: 18px; -webkit-transition-delay: 0s; transition-delay: 0s} .menu-trigger.active .HMBar { background: #fff53e} .menu-trigger.active .HMBar:nth-child(1) { top: -1px; left: -5px; width: 38px; -webkit-transform: rotate(315deg); transform: rotate(315deg)} .menu-trigger.active .HMBar:nth-child(2) { -webkit-transform: translate(-30px, 0); transform: translate(-30px, 0); opacity: 0} .menu-trigger.active .HMBar:nth-child(3) { top: 20px; left: -7px; width: 38px; -webkit-transform: rotate(-315deg); transform: rotate(-315deg)} @media (max-width: 600px) { .menu-trigger { width: 22px;} #trigger-overlay::before, #trigger-overlay::after { top: -22px; right: -17px; width: 60px} #trigger-overlay::before, #trigger-overlay:hover::after, #trigger-overlay.active:after { height: 60px} #trigger-overlay:hover::after { -webkit-transform: scale(0); transform: scale(0)} #trigger-overlay.active::after { -webkit-transform: scale(1); transform: scale(1)} .menu-trigger .HMBar { width: 22px; height: 2px} .menu-trigger .HMBar:nth-child(2) { width: 12px; top: 6px} .menu-trigger .HMBar:nth-child(3) { width: 18px; top: 12px} .menu-trigger.active .HMBar { background: #fff53e} .menu-trigger.active .HMBar:nth-child(1) { top: 0px; left: -3px; width: 22px} .menu-trigger.active .HMBar:nth-child(2) { opacity: 0} .menu-trigger.active .HMBar:nth-child(3) { top: 12px; left: -5px; width: 22px} .fixed .menu-trigger { top: 16px; right: 13px; height: 22px} .fixed #trigger-overlay:before, .fixed #trigger-overlay:after { top: -16px; right: -13px; width: 50px} .fixed #trigger-overlay:before:hover:after { height: 50px} .fixed #trigger-overlay:hover:after { height: 0} .fixed #trigger-overlay:before, .fixed #trigger-overlay.active:after { height: 50px} } /* Overlay */ .overlay { position: fixed; top: 0; right: 0; background: rgba(60,60,60,.95); width: 100%; height: 100vh; overflow: auto; z-index: 9980; -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px)} .pages.fixed .ORHome::after { display: none} .pages .ORHome { position: fixed; top: 0; left: 50%; width: 100%; max-width: 1600px; margin: 0; transform: translate(-50%,-50%)} .pages .ORHome::after { content: ''; position: fixed; top: 30px; left: 44px; background: rgba(255,255,255,.8); width: 190px; height: 136px} .fixed.pages .ORHome { display: none} @media (max-width: 1200px) { .pages .ORHome::after { left: calc(5vw - 15px)} } @media (max-width: 820px) { .pages .ORHome { display: none} } /* Overlay Effects */ .overlay-slidedown { visibility: hidden; -webkit-transform: translateX(110%) skewX(10deg); transform: translateX(110%) skewX(10deg); -webkit-transition: -webkit-transform .4s ease-in-out, visibility 0s .4s; transition: transform .4s ease-in-out, visibility 0s .4s} .overlay-slidedown.open { visibility: visible; -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); -webkit-transition: -webkit-transform .4s ease-in-out; transition: transform .4s ease-in-out} /* Overlay Menu */ #ORContainer { position: absolute; top: 50%; left: 50%; width: 90%; max-width: 760px; margin: 0 auto; padding: 70px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%)} .ORNav { width: 300px} @media (max-width: 1020px) { #ORContainer { max-width: 680px} } @media (max-height: 960px) { #ORContainer { top: 140px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0)} .fixed #ORContainer { top: 100px} } @media (max-width: 900px) { #ORContainer { width: calc(100% - 120px); max-width: 620px; padding: 60px} .ORNav { width: 240px} } @media (max-width: 700px) { #ORContainer { width: 330px; padding: 0 60px 80px} .ORNav { width: 100%; padding-bottom: 20px} } @media (max-width: 600px) { #ORContainer { width: calc(100% - 20vw); padding: 0 10vw 80px} } @media (max-width: 369px) { #ORContainer { width: calc(100% - 16vw); padding: 0 8vw 80px}} .overlayNav { margin: 0; padding: 0} .ORAbbr { color: #aeaeae; font-size: 1.3rem; letter-spacing: .15em; margin: 0} .ONItem { font-size: 1.8rem;letter-spacing: .18em; margin: 1.5em 0} .ONItem:last-of-type { margin-bottom: 1.1em} .ONItem a, .ORTNum { background: inherit; color: #e5e5e5; text-decoration: none; padding: .4em .6em; position: relative; display: inline-block; cursor: pointer; overflow: hidden} .ONItem a:hover { color: #fff} .ONItem a::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; background: #f07e1e; color: #333; width: 100%; height: 100%; display: block; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center; transform-origin: center; border-radius: 3px} .ONItem a:hover::before { transform: scaleX(1)} #ORInfo { text-align: right; width: 330px} #ORName { margin: 0 0 0 calc(100% - 330px)} #ORLogo { background-size: 330px 693px; background-position: 0 -465px; width: 330px; height: 42px; margin: 0; display: block} .ORAdd { color: #ccc; font-size: 1.4rem; line-height: 2.8; letter-spacing: .06em; margin: 0} .ORTel { font-size: 2.6rem; text-align: right; letter-spacing: .1em; margin: 0} .ORTNum { padding: 2px 0 2px 30px; display: inline-block; position: relative} .ORTNum:hover { color: #f78927; -webkit-transform: translate3d(1px,-1px,0); transform: translate3d(1px,-1px,0)} .ORTSign { position: absolute; top: 8px; left: 50%; background-position: -150px -50px; width: 30px; height: 30px; margin-left: -4em; display: block} .ORTNum:hover .ORTSign { -webkit-transform: rotate(20deg); transform: rotate(20deg)} #ORInstaLink { margin: 30px 0 0} .ORInstaLogo { width: 172px; height: 38px; margin-left: calc(100% - 156px); display: block; -webkit-transform: scale(.8); transform: scale(.8); opacity: .8} .ORInstaLogo:hover { -webkit-transform: translate3d(4px,-4px,0) rotate(-2deg) scale(.84); transform: translate3d(4px,-4px,0) rotate(-2deg) scale(.84); opacity: 1} #ORGroup { color: #d2d2d2; letter-spacing: .06em; margin: 40px 0 0; border-top: 1px solid #888} .ORGName { font-size: 1.5rem; line-height: 1.6; margin: 38px 0 0} .ORCItem { font-size: 1.4rem; line-height: 2; margin: 12px 0 0} .ORCIS { font-size: 1.2rem} .ORCopyright { color: #999; font-size: 1.3rem; letter-spacing: .1em; margin: 20px 0 0} @media (max-width: 700px) { #ORInfo { text-align: left; width: 100%; padding-top: 40px; border-top: 1px solid #888} .ORTel { text-align: left} .ORInstaLogo { margin: 0 0 0 -15px}} @media (max-width: 600px) { .ONItem { margin: 1.2em 0} .ORTNum { padding: 5px 30px} .ORTSign { top: 10px; margin-left: -4.6em} #ORName { margin: 0;} #ORLogo { background-size: 264px auto; background-position: 0 -372px; width: 264px; height: 34px} } @media (max-width: 480px) { .ONItem { font-size: 1.6rem} } @media (max-height: 600px) { .ONItem { margin: 1em 0} } @media (max-height: 480px) and (orientation: landscape) { #ORContainer { transform: translate(-50%,-60vh)} } /* ------------------------------------------- Footer ------------------------------------------- */ footer { padding: 80px 60px 60px; border-top: 1px solid #fff; position: relative; overflow: hidden} footer::before, footer::after { content: ''; position: absolute; left: 0; width: 100%; background: #a99479; display: block} footer::before { top: 0; height: 5px} footer::after { top: 9px; height: 1px} #footInner { max-width: 1600px; margin: 0 auto} #bottomID { width: 40%; margin: 0 0 0 60px; position: relative} #botLogo { margin: 0} .BLName { background-position: 0 -310px; width: 220px; height: 28px; margin: 0; display: block} .botMark { position: absolute; top: 0; left: 0; background-position: 0 0; background-size: 274px 80px; width: 74px; height: 80px; display: block} .BLNJP { color: #ccc; font-size: 1.6rem; letter-spacing: .1em; margin-top: 12px; display: block} #footTel { font-size: 2.8rem; margin: 20px 0 0} .FTelNum { color: #d2d2d2; text-decoration: none; letter-spacing: .1em; padding-left: 25px; display: inline-block; position: relative} .FTElSign { position: absolute; top: 6px; left: 0; background-position: -150px -50px; width: 20px; height: 20px} .FTelNum:hover { color: #f9884e; -webkit-transform: translate3d(2px,-1px,0); transform: translate3d(2px,-1px,0)} .FTelNum:hover .FTElSign { -webkit-transform: rotate(20deg); transform: rotate(20deg)} #FCompAdd, #FCompGroup, .FNLink { color: #d2d2d2; font-style: normal; letter-spacing: .06em} #FCompAdd { font-size: 1.4rem; margin: 12px 0 0} #FCompGroup { margin: 0} .FCGName { font-size: 1.6rem; font-weight: bold; line-height: 1.6; margin: 50px 0 0} .FGCItem { font-size: 1.4rem; line-height: 1.75; margin: 12px 0 0;} #footerNav { width: 250px} #instaLink { margin: 0} .instaLogo { width: 172px; height: 38px; display: block; -webkit-transform: none; transform: none; opacity: .8} .instaLogo:hover { -webkit-transform: translate3d(4px,-4px,0) rotate(-2deg); transform: translate3d(4px,-4px,0) rotate(-2deg); opacity: 1} #FNList { margin: 86px 0 0; padding: 0} .FNItem { letter-spacing: .1em} .FNLink { font-size: 1.5rem; text-decoration: none; padding-top: 18px; display: inline-block} .FNItem:first-of-type .FNLink { padding: 0;} .FNLink:hover { color: #f9884e; -webkit-transform: translate3D(2px,-2px,0); transform: translate3D(2px,-2px,0)} .FNLink.current:hover { transform: none} .FNLink.current .FNEn, .FNLink.current .FNJp, .FNLink.current:hover .FNEn, .FNLink.current:hover .FNJp { color: #7e7e7e} #bottomAddress { text-align: center; width: 100%; margin: 25px 0 0; display: block} .copyright { color: #d7d7d7; font-size: 1.6rem; letter-spacing: .16em} .CRMark { font-size: 1.8rem; font-weight: 200} #botMark { position: absolute; top: 50%; left: 50%; background-position: 0 -150px; width: 220px; height: 154px; margin: -80px 0 0 -110px} @media (max-width: 1340px) { footer { padding: 80px 5vw 60px} #bottomID { margin: 0} #footerNav { width: 16.5vw} } @media (max-width: 1300px) { #footerNav { width: 15.5vw} } @media (max-width: 1180px) { #footerNav { width: 178px} } @media (max-width: 1080px) { #botMark { background-size: 154px auto; background-position: 0 -105px; width: 154px; height: 108px; margin: -58px 0 0 -77px} } @media (max-width: 960px) { #botMark {margin-left: -2vw} } @media (max-width: 820px) { #TWCST, #botNewsList .pageST { width: 150px} #FNList { display: none} .BLNJP, .FCGName { font-size: 1.5rem} #FCompAdd, .FGCItem { font-size: 1.3rem} #footTel { font-size: 2.7rem} .FTElSign { top: 5px} #botMark { margin-left: 15vw} } @media (max-width: 640px) { footer { padding: 60px 0 50px} #footInner { display: block} #bottomID, #footerNav { text-align: center; width: 290px; margin: 0 auto} .BLName { margin: 0 auto} .FCGName { margin-top: 35px} .instaLogo { margin: 30px auto 0} #bottomAddress { margin-top: 170px} #botMark { top: inherit; bottom: 95px; margin: 0 0 0 -77px}} /* ------------------------------------------- Return Button ------------------------------------------- */ #returnBT { position: fixed; bottom: 0; right: 0; margin: 0; z-index: 999} #retTop { margin: 0; position: relative} #retTop::before, #retTop::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block; -webkit-border-radius: 50%; border-radius: 15px 15px 0 15px; z-index: -1; -webkit-transform-origin: right bottom; transform-origin: right bottom} #retTop::before { background: rgba(249,70,0,.85);-webkit-transform: scale(1); transform: scale(1); opacity: 1} #retTop:hover::before { opacity: 0; -webkit-transform: scale(0); transform: scale(0)} #retTop::after { background: rgba(80, 192, 30, 0.85); -webkit-transform: scale(0); transform: scale(0)} #retTop:hover::after { -webkit-transform: scale(1); transform: scale(1)} #retTop a { color: #fff; width: 70px; height: 70px; margin: 0; text-indent: -9999px; position: relative} #retTop a::before { content: 'TOP'; position: absolute; bottom: 20px; left: 0; display: block; cursor: pointer; z-index: 1000; color: #fff; font-size: 12px; text-align: center; text-indent: .1em; letter-spacing: .2em; width: 100%} #retTop a::after { content: ''; position: absolute; top: 23px; left: 50%; cursor: pointer; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; margin-left: -4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg)} #retTop a:hover::after { top: 18px} @media (max-width: 820px) { #retTop a { width: 60px; height: 60px} #retTop:hover::before { opacity: 1} #retTop a::before { bottom: 15px} #retTop a::after, #retTop a:hover::after { top: 18px} #retTop:hover::before {-webkit-transform: scale(1); transform: scale(1)} #retTop:hover::after { display: none} } @media (max-width: 480px) { #retTop a { width: 50px; height: 50px} #retTop a::before { bottom: 12px; font-size: 11px} #retTop a::after, #retTop a:hover::after { top: 15px} } /* ------------------------------------------- Remodal ------------------------------------------- */ /* Remodal */ .remodal{ background: #fff; text-align: left; width: 62.5%; min-width: 620px; max-width: 840px; max-height: 90vh; margin: 0 auto; position: relative; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 0 5px 3px rgba(0,0,0,.65); box-shadow: 0 0 5px 3px rgba(0,0,0,.65); -webkit-border-radius: 5px; border-radius: 5px; overflow-x: hidden; overflow-y: scroll; -webkit-transition: -webkit-transform .2s ease-out, opacity .2s ease-out; transition:transform .2s ease-out, opacity .2s ease-out; -webkit-transform: scale(.95); transform:scale(.95); opacity:0; background-clip: padding-box} body.remodal-is-locked,html.remodal-is-locked{ overflow: hidden} .remodal,[data-remodal-id]{ visibility: hidden} .remodal-overlay{ position:fixed; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; z-index:9999; display:none} .remodal-wrapper{ position:fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; z-index: 10000; text-align: center; -webkit-overflow-scrolling: touch} .remodal-wrapper::after{ content:""; height: 100%; margin-left: -.05em; display: inline-block} .remodal-overlay,.remodal-wrapper{ -webkit-transform: translateZ(0)} .remodal-bg{ -webkit-transition: -webkit-filter .2s ease-out; transition: filter .2s ease-out} body.remodal-is-active .remodal-bg{ -webkit-filter: blur(3px)} .remodal-overlay{ -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; opacity: 0; background: rgba(0,0,0,.75)} body.remodal-is-active .remodal-overlay{ opacity:1} body.remodal-is-active .remodal{ -webkit-transform: scale(1); transform: scale(1); opacity: 1} .remodal,.remodal-wrapper::after{ vertical-align: middle} /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper::after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: 10px; right: 10px; background: #666; text-decoration: none; width: 50px; height: 50px; -webkit-border-radius: 50%; border-radius: 50%} .remodal-close::after { content: ""; background-position: -110px -50px; position: absolute; top: 13px; left: 13px; width: 24px; height: 24px; display: block; cursor: pointer} .remodal-cancel { display: none} .remodal-close:active, .remodal-close:hover { background:#f5791e} .remodal-close:active.remodal-close::after, .remodal-close:hover.remodal-close::after{ transform: rotate(90deg)} /* Works Remodal layout */ .worksRemodal { padding: 60px 60px 55px} .WRHead { margin: 30px 0 0; padding-bottom: 10px; border-bottom: 1px solid #d2d2d2} .WRHTitle { font-size: 2.2rem; line-height: 1.25; letter-spacing: .075em; width: 60%; margin: 0} .WRSubData { font-size: 1.4rem; text-align: right; line-height: 1.5; letter-spacing: .06em; width: 36%; margin: 3px 0 0} .WRInfo { font-size: 1.5rem; line-height: 1.8; letter-spacing: .06em; margin: 25px 0 0} @media (max-width: 820px) { .remodal { width: 85%; min-width: inherit} } @media (max-width: 750px) { .worksRemodal { padding: 70px 40px 40px} .WRHTitle, .WRSubData { width: 100%} .WRSubData { text-align: left} } @media (max-width: 600px) { .remodal { width: 90vw} .worksRemodal { padding: 50px 5vw 40px} .remodal-close { top: 5px; right: 5px; width: 39px; height: 39px} .remodal-close::after { background-size: 129px 72px; background-position: -82px -37px; top: 10px; left: 10px; width: 19px; height: 19px} } @media (max-width: 480px) { .WRHTitle { font-size: 2rem} } /* ------------------------------------------- Pages Common ------------------------------------------- */ /* Background Images */ .lined::after, #pageTitle::after, #NPostTitle::after, .pageNavi, .SIInfo { background: url(../common_im/line.svg) no-repeat 0 0 / 300px 2px} .lined { position: relative} .lined::after { content: ''; position: absolute; top: 0; left: 50%; background-repeat: repeat-x; width: 60%; height: 2px; margin-left: -30%} /* Container */ .sec01 { max-width: 1480px; margin: 0 auto; padding: 70px 60px; position: relative} #pagesMeta { max-width: 1600px; margin: 0 auto; padding-bottom: 90px} .secAppeal { position: absolute; top: 90px; left: 0; font-size: 1.8rem; text-align: center; letter-spacing: .08em; width: 100%; margin: 0} @media (max-width: 1200px) { .sec01 { padding: 70px 5vw} } @media (max-width: 960px) { #PCStart { padding: 60px 5vw} } @media (max-width: 600px) { #PCStart { padding: 50px 5vw} } @media (max-width: 767px) { #pageContents { border: none;position: relative;z-index: 1;} #pageHeadWrapp { height: 60px} #pagesGH { height: 0} #pagesMeta { position: absolute; width: 100%; padding-top: 100px; z-index: -1} .sec01 { padding: 60px 5vw} } @media (max-width: 480px) { .sec01 { padding: 50px 5vw} } /* Page Title */ #pageTitle, #NPostTitle { color: #4e4e4e; font-size: 3.4rem; text-align: center; letter-spacing: .08em; margin: 65px 0 0; padding-bottom: 30px; position: relative} #pageTitle::after, #NPostTitle::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 90px; height: 2px; margin-left: -45px; display: block} .PTEN { color: #7e7e7e; font-size: 1.3rem; font-style: normal; margin-top: 8px; display: block} /* Sub-Title */ .pageST { color: #444; font-size: 2.9rem; letter-spacing: .1em; width: 50%; margin: 0; padding-left: 60px; position: relative} .pageST::before { content: ''; position: absolute; top: 6px; left: 0; background-position: -60px -50px; width: 42px; height: 39px} .STEN, .topSTEN { font-size: 1.4rem; font-style: normal; margin-top: 12px; display: block} .STEN { font-size: 1.3rem} @media (max-width: 767px) { #pageTitle, #NPostTitle { margin: 0} .topSTEN { margin-top: 9px} .STEN { margin-top: 5px}} @media (max-width: 480px) { .pageST { font-size: 2.6rem; padding-left: 56px} .pageST::before { top: 7px; background-size: 155px auto; background-position: -54px -45px; width: 38px; height: 36px} } /* Text Box */ .PageHeadMessage { font-size: 1.6rem; letter-spacing: .075em; line-height: 2; margin: -.35em 0 0} /* Page-Contents Image */ .PCFImage, #TAboutWrapp { width: 100%; max-width: 1340px; height: 36.75vw; max-height: 560px; margin: 0 auto; border-radius: 13px; position: relative} @media (max-width: 767px) { .PCFImage, #TAboutWrapp { height: 50vw; border-radius: 10px} } /* Page Navi */ .pageNavi { background-repeat: repeat-x; width: calc(100% - 60px); max-width: 1460px; margin: 0 auto; padding: 0} .PNList { max-width: 1340px; margin: 0 auto; padding: 0 30px; position: relative} @media (max-width: 1200px) { .pageNavi { width: calc(100% - 5vw)} .PNList { padding: 0 2.5vw} } .PNItem { margin: 0; position: relative} #PNL03 .PNItem { width: calc(33.33% - 4px)} #PNL04 .PNItem { width: calc(25% - 4px)} #PNL05 .PNItem:nth-of-type(1), #PNL05 .PNItem:nth-of-type(2) { width: calc(26% - 4px)} #PNL05 .PNItem:nth-of-type(3), #PNL05 .PNItem:nth-of-type(5) { width: calc(18% - 4px)} #PNL05 .PNItem:nth-of-type(4) { width: calc(12% - 4px)} .PNLink { color: #777; font-size: 1.5rem; text-align: center; text-decoration: none; letter-spacing: .1em; padding: 20px 0 16px; display: block; position: relative} .PNLink:hover { color: rgb(70,165,0)} .PNLink::after { content: ''; position: absolute; bottom: 0; left: 0; background: #f78e1e; width: 100%; height: 2px; height: 2px; display: block; -webkit-transform: scaleX(0); transform: scaleX(0)} .PNLink:hover::after { -webkit-transform: scaleX(1); transform: scaleX(1)} @media (max-width: 960px) { .pageNavi { width: calc(100% - 10vw)} .PNList { padding: 0} #PNL04 .PNItem { width: 25%} .PNItem::after { content: ''; position: absolute; top: 50%; right: 0; background: #ccc; width: 1px; height: 60%; margin-top: -13px} .PNItem:last-of-type::after { display: none} } @media (max-width: 900px) { #PNL05 .PNItem:nth-of-type(1), #PNL05 .PNItem:nth-of-type(2) { width: 50%} #PNL05 .PNItem:nth-of-type(n+3) { width: 33.33%; border-top: 1px solid #ccc} #PNL05 .PNItem:nth-of-type(2)::after { display: none} } @media (max-width: 767px) { .pageNavi { background-color: #fff; margin-top: 280px; position: relative; z-index: 0} #PNL03 .PNItem { width: 33.33%} } @media (max-width: 480px) { #PNL05 .PNItem:nth-of-type(1) { width: 100%} #PNL05 .PNItem:nth-of-type(2) { width: 100%; border-top: 1px solid #ccc} #PNL05 .PNItem:nth-of-type(1)::after { display: none} } @media (max-width: 480px) { #PNL05 .PNItem:nth-of-type(3), #PNL05 .PNItem:nth-of-type(5) { width: 37%} #PNL05 .PNItem:nth-of-type(4) { width: 26%} } @media (max-width: 389px) { .pageNavi { width: calc(100% - 5vw)} #PNL05 .PNItem:nth-of-type(3), #PNL05 .PNItem:nth-of-type(5) { width: 37.5%} #PNL05 .PNItem:nth-of-type(4) { width: 25%} } @media (max-width: 340px) { .PNLink { letter-spacing: .025em}} /* Link Button */ .linkBT01, .cotLinkBT { font-size: 1.6rem; text-align: center; letter-spacing: .1em; margin: 0; position: relative} .linkBT01 a { color: #444; text-decoration: none; padding: 16px 0 14px; display: inline-block; cursor: pointer; display: block; position: relative; overflow: visible; z-index: 1} #TWCBT a { color: #d2d2d2; text-indent: .2em; letter-spacing: .2em} #TCIBT01 { width: 240px; margin: 20px auto 0} .linkBT01 a::before, .linkBT01 a::after, .cotLinkBT a::before, .cotLinkBT a::after { content: ''; position: absolute; top: 0; left: auto; right: 0; width: 100%; height: 100%; display: block} .linkBT01 a::before { top: 1px; left: -1px; background: #776759; -webkit-transform: scale(0); transform: scale(0); z-index: -2} .linkBT01 a::after { border: 1px solid #7e7e7e; z-index: -1} #TWCBT a::after { border-color: #aeaeae} .linkBT01 a:hover { color: #eee; -webkit-transform: translate(2px,-2px); transform: translate(2px,-2px)} .linkBT01 a:hover::before { content: ''; left: -1px; right: auto; width: 100%; -webkit-transform: scale(1); transform: scale(1); opacity: 1} /* Link Sign */ .Sign01, .BLSign { position: absolute; top: calc(50% + 1px); background: #444; width: 36px; height: 1px; transition: inherit; pointer-events: none} #TWCBT .Sign01 { background: #aeaeae} .Sign01 { right: -18px} .BLSign { top: 50%; right: -30px; background: #b2b2b2; width: 20px; height: 2px} .Sign01::before, .BLSign::before { content: ''; position: absolute; right: 0; bottom: 3px; background: #444; width: 8px; height: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg)} #TWCBT .Sign01::before { background: #aeaeae} .BLSign::before { right: 1px; width: 6px; background: #b2b2b2} .linkBT01 a:hover > .Sign01, #TWCBT a:hover > .Sign01 { right: 20px; background: #fff; width: 30px;} .linkBT01 a:hover >.Sign01::before, #TWCBT a:hover > .Sign01::before { background: #fff} .BCLink:hover .BLSign { right: -26px; background: #f26200} .BCLink:hover .BLSign::before { right: inherit; left: 1px; -webkit-transform: rotate(135deg); transform: rotate(135deg); background: #f26200} @media (max-width: 480px) { .Sign01 { right: -13px; width: 26px} .Sign01::before { width: 6px} .linkBT01 a:hover > .Sign01 { right: -3px} } @media (max-width: 420px) { #TWCBT .Sign01, #BNLBT .Sign01 { right: -11px; width: 22px} } @media (max-width: 360px) { #TWCBT .Sign01, #BNLBT .Sign01 { right: -8px; width: 16px} } /* Breadcrum Navi */ .BreadcrumbList { margin: 0; padding: 30px 120px 0} .BCLink, .BCCurrent { float: left; font-size: 1.4rem; letter-spacing: .05em} .BCLink { margin-right: 40px; position: relative} .LLLink:last-of-type { margin-left: 30px} .BreadcrumbList a { color: #1e99c0; text-decoration: none} .BreadcrumbList a:hover { color: #f0621e} @media (max-width: 1200px) { .BreadcrumbList { padding: 30px 9vw 0} } @media (max-width: 767px) { .BreadcrumbList { position: absolute; top: 235px; left: 0; padding: 0 5vw} #worksBCL, #newsBCL { top: 245px} } /* Bottom News List ------------------------------------------- */ #botNLWrapp { padding-bottom: 60px} #BNLBT { width: 240px} #BNList { max-width: 1340px; margin: 40px auto 0} #BNList::after { content: ''; width: 30%; display: block} .BNItem { color: #555; text-decoration: none; width: 30%} .BNImage { width: 100%; position: relative} .BNTime { color: #777; font-size: 1.4rem; letter-spacing: .1em; margin-top: 15px; display: block} .BNTitle { font-size: 1.6rem; font-weight: bold; line-height: 1.4; letter-spacing: .06em; margin: 8px 0 0} .BNItem:hover { -webkit-transform: translate(2px,-2px); transform: translate(1px,-2px)} .BNItem:hover .BNTime { color: #f0692e} .BNItem:hover .BNTitle { color: #e55700} .BNImage::after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.4); width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0)} .BNItem:hover .BNImage::after { -webkit-transform: scale(1); transform: scale(1)} @media (max-width: 768px) { .BNTime { font-size: 1.3rem} .BNTitle { font-size: 1.5rem} } @media (max-width: 600px) { #botNLWrapp { padding: 50px 5vw} .BNItem { width: 47.25%} .BNItem:nth-of-type(3) { display: none} } @media (max-width: 480px) { #BNList { margin-top: 30px} } /* ------------------------------------------- Top page ------------------------------------------- */ /* Top Eyecatch */ #topEyecatch { max-width: 1340px; height: calc(62.5vw - 120px) !important; max-height: 760px; margin: 0 auto; padding: 0 60px 60px; overflow: hidden} #TEInner { left: inherit; width: 100% !important; height: 100% !important; margin: 0 auto !important; position: relative} #TEVideo { width: 100%; height: 100%; position: relative; border-radius: 15px; overflow: hidden} #topVideo { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; border-radius: 15px; overflow: hidden; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%) } .TVOverlay { position: absolute; top: 0; left: 0; background-image: linear-gradient(45deg, rgba(0,0,0,.4) 50%, rgba(0,0,0,.1) 50%); background-size: 2px 2px; width: 100%; height: 100%; opacity: .75; z-index: 2} #topHeadCopy, #THSubCopy { position: absolute; left: 0; color: #fff; text-align: center; width: 100%; margin: 0; z-index: 1000} #topHeadCopy { top: 45%; font-size: 3.5vw; letter-spacing: .08em} #THSubCopy { top: calc(45% + 4.5vw); font-size: 1.65vw; letter-spacing: .075em} @media (max-width: 1200px) { #topEyecatch { padding: 0 5vw 60px} } @media (max-width: 1180px) { #topHeadCopy { font-size: 4vw} #THSubCopy { top: calc(45% + 5.05vw); font-size: 1.8vw} } @media (max-width: 960px) { #topEyecatch { padding-bottom: 50px} } @media (max-width: 899px) { #topEyecatch { height: 54vw !important} } @media (max-width: 767px) { #topHeadWrapp { background: none} #TopGH { height: 65vw} #topEyecatch { position: absolute; top: 0; left: 0; width: 100%; padding: 0; height: 65vw !important} #TEVideo { border-radius: 0px !important} #rev_slider_wrapper, #rev_slider, .slotholder, .tp-kbimg, .rev_slider img, .tp-simpleresponsive img { height: 65vw !important} #topHeadCopy { font-size: 5.75vw} #THSubCopy { top: 56%; font-size: 2.5vw} } @media (max-width: 600px) { #TopGH, #topEyecatch, #TEVideo { height: 100vw !important} .tp-bannertimer { left: 0 !important; max-width: 100% !important} #topHeadCopy { top: calc(50% - 3.4vw); font-size: 6.8vw} #THSubCopy { top: 56.5%; font-size: 3.2vw} } @media (max-width: 540px) { #TopGH, #topEyecatch, #TEVideo { height: 120vw !important} #THSubCopy { top: 55% } } @media (max-width: 480px) { #topHeadCopy { top: calc(50% - 3.4vw); font-size: 7.6vw} #THSubCopy { top: 56%; font-size: 3.6vw} } @media (max-width: 430px) { #topHeadCopy { font-size: 8.2vw} #THSubCopy { top: 58%; left: 50%; font-size: 5vw; line-height: 1.5; width: 12em; margin-left: -6em} } @media (max-width: 340px) { #THSubCopy { font-size: 5vw} } /* Top 3D Print */ #topPrintContents { max-width: 1220px} #topService { width: 45%} #topServiceST { font-size: 3rem; text-align: center; letter-spacing: .1em; margin: 0; padding-top: 65px; position: relative} .TSSEN { font-size: 1.4rem; font-style: normal; margin-top: 12px; display: block} .TSSTMark { position: absolute; top: 0; left: 50%; background-position: 0 -50px; width: 48px; height: 45px; margin-left: -23px; display: block} .topServiceInfo { margin-top: 15px; padding: 36px 36px 36px 45px; position: relative} .topServiceInfo::before, .topServiceInfo::after { content: ''; position: absolute; background: url(../top_im/top-ribbon.svg) no-repeat 0 0 / 60px auto; width: 60px; height: 58px} .topServiceInfo::before { top: 0; left: 0} .topServiceInfo::after { bottom: 0; right: 0; background-position: 0 -60px} .TSICopy, .TSINotice { font-size: 1.6rem; line-height: 2; letter-spacing: .06em; margin: 0} .TSINotice { color: #6e491e; line-height: 1.6; font-weight: bold; margin-top: 1em} #topPrintImage { width: 50%; min-width: 480px; max-width: 620px; margin: -80px 0 0 -20px; -webkit-transform: rotate(-5deg); transform: rotate(-5deg)} #TPIPhoto { background: url(../top_im/polaroid_l.svg) no-repeat 0 0 / cover} #TPIM { width: calc(100% - 7%) !important; padding: 3.5% 3.5% 12%} @media (max-width: 1235px) { .TSINotice br { display: none} } @media (max-width: 1180px) { #topPrintImage { margin-top: 0} } @media (max-width: 1080px) { #topPrintImage { margin: 10px 0 0 -30px} } @media (max-width: 990px) { #topPrintImage { margin: 40px 0 0 -30px} } @media (max-width: 960px) { #topPrintContents { padding-top: 50px} #topPrintImage { width: 47.5%; min-width: auto; margin: 50px 0 0} #topService { width: 50%} } @media (min-width: 768px) and (max-width: 820px) { #topContents { overflow: visible}} @media (max-width: 820px) { #topPrintContents { display: block} #topPrintImage { width: 55%; min-width: auto; margin: -60px auto 0} #TCIBT01 { margin-top: 10px} #topService { width: 100%} #topServiceST { text-align: left; margin-top: 50px; padding: 0 0 0 65px} .TSSTMark { top: 0; left: 0; margin: 0} } @media (max-width: 767px) { #topPrintImage { margin-top: 0} .TSSTMark { top: 7px} .topServiceInfo { margin-top: 20px} } @media (max-width: 600px) { #topPrintImage { width: 70%} } @media (max-width: 520px) { #conceptCatch { width: 11em; line-height: 1.6; margin: 15px auto 0} } @media (max-width: 480px) { #topPrintContents { padding-top: 40px} #topServiceST { margin-top: 40px; padding-left: 57px} .TSSTMark { background-size: 148px auto; background-position: 0 -43px; width: 42px; height: 39px} .topServiceInfo { padding: 28px 28px 28px 37px} #topPrintImage { width: 75%} .topServiceInfo::before, .topServiceInfo::after { background-size: 51px auto; width: 48px; height: 47px} } @media (max-width: 420px) { #TCIBT01 { margin-top: 0} } @media (max-width: 450px) { #topPrintImage { width: 78%} } /* Top About */ #topAbout { padding-top: 0} #TAboutWrapp { background: url(../top_im/about_bn.jpg) no-repeat center top / cover} #TAboutInfo { position: absolute; top: 50%; left: 50%; background: rgba(255,255,255,.9); text-align: center; padding: 32px 70px 50px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%)} #TAIST { color: #555; font-size: 3rem; letter-spacing: .1em; margin: 0; padding-top: 50px; position: relative} #TAIST::before { content: ''; position: absolute; top: 0; left: 50%; background-position: -60px -50px; width: 42px; height: 39px; margin-left: -21px} .TAIcatch { color: #888; font-size: 1.5rem; letter-spacing: .04em; margin: 10px 0 0} #TAIBT { width: 240px; margin-top: 25px} #TWCBT { width: 240px} @media (max-width: 820px) { #TAboutInfo { min-width: 250px; padding: 22px 40px 34px} #TAIBT { margin: 25px auto 0} #TAboutWrapp { min-height: 300px} } @media (max-width: 780px) { #TAboutInfo { padding: 22px 30px 34px} } @media (max-width: 600px) { #TAIBT { margin-top: 18px} #TAboutWrapp { min-height: 230px; padding: 6vw 0} } @media (max-width: 480px) { #TAboutWrapp { min-height: 210px} #TAboutInfo { padding: 16px 30px 25px} #TAIST { padding-top: 43px} .TAIcatch { margin-top: 9px} #TAIBT { margin-top: 16px} #TAIST::before { background-size: 148px auto; background-position: -51px -43px; width: 37px; height: 34px; margin-left: -19px} } @media (max-width: 400px) { #TAboutInfo { padding: 17px 20px 29px} .TAIcatch { font-size: 1.4rem; letter-spacing: .025em} } @media (max-width: 360px) { #TAboutInfo { min-width: 240px; padding: 17px 18px 29px} } @media (max-width: 350px) { #TAboutWrapp { min-height: 190px} .TAIcatch { font-size: 1.3rem} #TAboutInfo { min-width: 220px; padding: 12px 15px 20px} } /* Top Works */ #TWorksContainer { max-width: 1340px; padding-bottom: 90px} #TWCST { color: #e2e2e2} #TWList { max-width: 1240px; margin: 0 auto; padding: 50px 20px 0} .TWItem { background: #fff; text-decoration: none; width: 21.9%; padding: .8% .8% 1%} .TWICap { color: #444; font-size: 1.6rem; text-align: center; letter-spacing: .16em; width: 100%; margin-top: 11px; display: block} .TWItem:nth-of-type(1) { -webkit-transform: rotate(-2deg); transform: rotate(-2deg)} .TWItem:nth-of-type(2) { -webkit-transform: rotate(2deg) translateY(20px); transform: rotate(2deg) translateY(20px)} .TWItem:nth-of-type(3) { -webkit-transform: rotate(-1deg); transform: rotate(-1deg)} .TWItem:nth-of-type(4) { -webkit-transform: rotate(1deg) translateY(20px); transform: rotate(1deg) translateY(20px)} .TWItem:nth-of-type(1):hover, .TWItem:nth-of-type(3):hover { transform: rotate(0deg)} .TWItem:nth-of-type(2):hover, .TWItem:nth-of-type(4):hover { transform: rotate(0deg) translateY(20px)} .TWItem:hover .TWICap { color: #ee5700 } .TWImage { position: relative} .TWImage::after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.4); width: 100%; height: calc(100% - 27px); -webkit-transform: scale(0); transform: scale(0)} .TWItem:hover .TWImage::after { -webkit-transform: scale(1); transform: scale(1)} @media (max-width: 960px) { .TWICap { font-size: 1.4rem} } @media (max-width: 1200px) { #TWList { padding: 50px 0 0} } @media (max-width: 960px) { .TWICap { font-size: 1.4rem} } @media (max-width: 820px) { #TCIBT01, #TAIBT, #TWCBT, #BNLBT { width: 200px} } @media (max-width: 600px) { #TWorksContainer { padding-bottom: 70px} .TWItem { width: 43.8%; padding-bottom: 1.5%} .TWICap { font-size: 1.5rem; margin-top: 10px} .TWItem:nth-of-type(2) { -webkit-transform: rotate(2deg) translateY(5px); transform: rotate(2deg) translateY(5px)} .TWItem:nth-of-type(3) { margin-top: 8vw; -webkit-transform: rotate(1deg) translateY(5px); transform: rotate(1deg) translateY(5px)} .TWItem:nth-of-type(4) { margin-top: 7vw; -webkit-transform: rotate(-1deg) translateY(5px); transform: rotate(-1deg) translateY(5px)} } @media (max-width: 480px) { #TWorksContainer { padding-bottom: 65px} #topServiceST, #TAIST { font-size: 2.6rem} .TSSEN { margin-top: 9px} #TWCBT, #BNLBT { width: 140px} #TWCBT a, #BNLBT a { padding: 13px 0 11px} } @media (max-width: 420px) { #TWCST, #botNewsList .pageST { padding-left: 52px; width: 120px} #TWCST .topSTEN, #botNewsList .topSTEN { font-size: 1.3rem} #TCIBT01, #TAIBT, #TWCBT, #BNLBT { font-size: 1.5rem; width: 126px} #TCIBT01 a, #TAIBT a, #TWCBT a, #BNLBT a { padding: 13px 0 11px} } @media (max-width: 360px) { #TWCST, #botNewsList .pageST { padding-left: 50px; width: 110px} #TWCST.pageST, #botNewsList .pageST { font-size: 2.4rem} #TWCST .topSTEN { letter-spacing: .1em} #TWCBT, #BNLBT { font-size: 1.4rem; width: 108px}} /* ------------------------------------------- About Page ------------------------------------------- */ #conceptImage { background: url(../about/images/head.jpg) no-repeat center top / cover} #concept { max-width: 1060px; margin: 0 auto; padding: 70px 60px 60px} #conceptCatch { font-size: 2.2rem; letter-spacing: .075em; padding: 20px 60px 0} .conceptMessage { margin: 20px 0 0; padding: 0 50px 0 60px} @media (max-width: 1099px) { #concept { padding: 70px 30px}} @media (max-width: 1049px) { #concept { padding: 70px 0}} #conceptScene { background: url(../about/images/antique_image.jpg) no-repeat center top / cover; width: 100%; max-width: 1340px; height: 33.5vw; max-height: 500px; margin: 0 auto} @media (max-width: 600px) { #conceptScene { background-image: url(../about/images/sp_antique_im.jpg); height: auto; padding-top: 100%} } #conceptLogo { background: #fff; margin: 70px auto 0; width: 100%; max-width: calc(1060px - 12vw); padding: 5vw 6vw; border-radius: 15px; -webkit-align-items: center; align-items: center} #CLogoImage { width: 27.35%; height: 100%} #CLogoGuide { width: 60%} #CLogoST { color: #765; font-size: 2.4rem; letter-spacing: .035em; margin: 0} .CLogoInfo { font-size: 1.5rem; line-height: 1.8; letter-spacing: .06em; margin: 40px 0 0} @media (max-width: 1179px) { #conceptLogo { max-width: calc(840px - 12vw)} } #conceptGallery { max-width: 1340px; margin: 40px auto 0} #OSMeta { max-width: 1060px; margin: 0 auto; position: relative} #OStrengthST { width: 20%} #OSAppeal { font-size: 1.6rem; line-height: 2; width: 70%; margin: -5px 0 0} #strengthList { width: 100%; max-width: 1060px; margin: 60px auto 0} .strengthItem { margin-top: 40px; position: relative; -webkit-align-items: center; align-items: center} .SIImage { width: 47.169%} .SIGuide, .SIGuideLeft { width: 46.226%; margin-right: 3%} .SIGuideLeft { margin: 0 0 0 3%} .SIST { color: #666; font-size: 1.8rem; font-weight: bold; letter-spacing: .06em; margin: 0; padding: 0 36px} .SIInfo { background-repeat: repeat-x; font-size: 1.6rem; line-height: 1.8; letter-spacing: .06em; margin: 30px 0 0; padding: 27px 32px 40px 36px} @media (max-width: 980px) { .SIInfo { padding-bottom: 10px} } @media (max-width: 960px) { #concept { padding: 50px 0} #conceptLogo { width: auto; margin-top: 50px; padding: 5vw 6vw 4.75vw 6vw} .CLogoInfo { margin: 20px 0 0} #conceptGallery { margin-top: 20px} #OStrengthST, #OSAppeal { width: 100%} #OSAppeal { margin-top: 30px; padding-left: 60px} #strengthList { margin-top: 40px} .SIGuide, .SIGuideLeft { width: 56%; margin: 0} .strengthItem { -webkit-align-items: stretch; align-items: stretch} .SIImage { width: 38%} .SIST { padding: 0 10px} .SIInfo { font-size: 1.5rem; margin: 20px 0 0; padding: 17px 10px 0 10px} } @media (max-width: 767px) { #concept { padding: 30px 0} #conceptLogo { padding: 6vw 6vw 5.75vw} } @media (max-width: 700px) { #concept { padding: 30px 0} #conceptCatch { padding: 10px 0 0} .conceptMessage { font-size: 1.5rem; padding: 0} } @media (max-width: 600px) { #CLogoImage { width: 35%; margin: 0 auto} #CLogoST { text-align: center} #CLogoGuide { width: 100%; margin-top: 25px} #OSAppeal { padding: 0} #strengthList { width: 90%} .strengthItem { padding-bottom: 30px} .strengthItem::after { content: ''; position: absolute; bottom: 0; left: 50%; background: url(../common_im/line.svg) repeat 0 0 / 300px 2px; width: 100%; height: 2px; margin-left: -50%} .strengthItem:last-of-type { padding-bottom: 0} .strengthItem:last-of-type::after { display: none} .SIInfo { background: none; margin-top: 0} .SIImage { width: 80%; margin: 0 auto} .SIGuide, .SIGuideLeft { width: 100%} .SIGuide, .SIGuideLeft { margin-top: 35px} .strengthItem:nth-of-type(2) .SIImage { order: 1} .SIGuideLeft { order: 2} } @media (max-width: 480px) { #CLogoImage { width: 45%} #conceptGallery { margin-top: 25px} #OSAppeal { font-size: 1.5rem}} @media (max-width: 420px) { #conceptLogo { padding: 7vw 7vw 6.75vw} #CLogoImage { width: 40%} #CLogoGuide { margin-top: 20px} #strengthList { width: 100%} } @media (max-width: 390px) { #CLogoImage { width: 52%} .SIImage { width: 90%} } @media (max-width: 359px) { #CLogoST { font-size: 2.2rem; letter-spacing: .01em} } /* ------------------------------------------- Service Page ------------------------------------------- */ .SLST::before, .SLST::after, .PUIco, .SFTelSign, .SFFormSign { background: url(../service/images/service.svg) no-repeat 0 0 / 342px 115px} /* Service Head */ #serviceHeadImage { background: url(../service/images/head02.jpg) no-repeat center top / cover} #SHead { padding: 70px 0 55px} #SHeadST { width: auto} .SHeadMessage, .serviceAP { width: calc(100% - 100px); max-width: 60em; margin: 0 auto; padding: 50px 50px 0} @media (max-width: 1110px) { .SHeadMessage { font-size: 1.5rem; width: calc(100% - 50px); padding-left: 50px} } @media (max-width: 980px) { .SHeadMessage, .serviceAP { padding: 50px 0 0} } @media (max-width: 767px) { #SHead { padding-bottom: 45px} .SHeadMessage { padding-top: 40px} } .SLineST { color: #555; text-align: center; width: 100%; margin: 0} .SLST { margin: 0 auto; padding: 0 65px; display: inline-block; position: relative} .SLST::before, .SLST::after { content: ''; position: absolute; top: 0; width: 40px; height: 54px} .SLST::before { left: 0} .SLST::after { right: 0; background-position: -50px 0} #PUsageST { font-size: 2.8rem; line-height: 1.95; letter-spacing: .06em;} #PUsageList { max-width: 1100px; margin: 0 auto; padding: 0 20px} .PUItem { background: rgba(255,255,255,.8); width: calc(25% - 4.4025%); margin-top: 5%; padding-top: calc(25% - 4.4025%); border-radius: 50%; position: relative} .PUItem:nth-of-type(-n+4) { margin-top: 3%} .PUKind { position: absolute; top: 60%; left: 0; font-size: 1.5rem; text-align: center; line-height: 1.5; letter-spacing: .035em; width: 100%; height: 40%} .PUIco { position: absolute; top: 28%; left: 50%; height: 56px} #PUI01 { background-position: -100px 0; width: 54px; margin-left: -27px} #PUI02 { background-position: -170px 0; width: 46px; margin-left: -23px} #PUI03 { background-position: -230px 0; width: 50px; margin-left: -25px} #PUI04 { background-position: -290px 0; width: 52px; margin-left: -26px} #PUI05 { background-position: 0 -60px; width: 52px; margin-left: -26px} #PUI06 { background-position: -70px -60px; width: 52px; margin-left: -26px} #PUI07 { background-position: -140px -60px; width: 50px; margin-left: -25px} #PUI08 { background-position: -210px -60px; width: 38px; margin-left: -19px} @media (max-width: 1080px) { .PUKind { top: 62%; font-size: 1.4rem; line-height: 1.4; height: 38%} .PUIco { top: 23%} } @media (max-width: 960px) { .PUItem { width: 28%; padding-top: 28%} } @media (max-width: 700px) { .SHeadMessage { width: 100%} #SHead { padding-bottom: 35px} #PUsageST { font-size: 2.6rem; line-height: 2.1} #PUsageList { padding: 0} .PUItem { width: 30%; padding-top: 30%} } @media (min-width: 521px) and (max-width: 580px) { .PUIco { top: 19%; transform: scale(.9)} .PUKind { font-size: 1.3rem} #PUI01 { margin-left: -25px} #PUI02 { margin-left: -21px} #PUI03, #PUI04, #PUI05, #PUI06 { margin-left: -24px} #PUI07 { margin-left: -23px} #PUI08 { margin-left: -18px} } @media (max-width: 520px) { #PUsageList { -webkit-justify-content: space-around; justify-content: space-around} .PUItem { width: 44%; padding-top: 44%} .PUItem, .PUItem:nth-of-type(-n+4) { margin-top: 5%} } @media (max-width: 400px) { .PUItem { width: 45.5%; padding-top: 45.5%} .PUItem, .PUItem:nth-of-type(-n+4) { margin-top: 4%} .PUIco { top: 21.5%} .PUKind { top: 61%} } @media (max-width: 374px) { #SHeadST { font-size: 2.4rem; letter-spacing: .05em}} @media (max-width: 369px) { .PUIco { top: 19%} .PUKind { top: 61%; font-size: 1.3rem} } @media (max-width: 340px) { #SHeadST { font-size: 2.3rem; letter-spacing: .025em} .pageST::before { top: 4px} #PUsageST { font-size: 2.5rem; line-height: 2.2} .PUIco { top: 15%; transform: scale(.9)} #PUI01 { margin-left: -25px} #PUI02 { margin-left: -21px} #PUI03, #PUI04, #PUI05, #PUI06 { margin-left: -24px} #PUI07 { margin-left: -23px} #PUI08 { margin-left: -18px} .PUKind { top: 60%; line-height: 1.25; letter-spacing: 0} } /* Scanning */ #scanningST, #modelproductST, #sequipmentST { color: #f2eee7; width: auto} .serviceAP { color: #eee; font-size: 1.6rem; letter-spacing: .075em} #scanningCList, #modelPList { width: 100%; max-width: 1060px; margin: 60px auto 0} .SCLItem { margin-top: 40px; -webkit-align-items: center; align-items: center} .scanImage { width: 47.169%} .scanGuide { width: calc(47.169% - 25px); padding-right: 36px} .scanGuide02 { width: calc(47.169% - 36px); padding: 0 0 0 36px} .SCLTit, .SCLTit02 { color: #eee; font-size: 1.8rem; font-weight: bold; letter-spacing: .06em; margin: 0} .SCLInfo, .SCLInfo02 { color: #f2f2f2; font-size: 1.6rem; line-height: 2; letter-spacing: .06em; margin: 40px 0 0} .SCLTit02, .SCLInfo02 { text-align: right} #modelproduct { margin-top: 60px; padding-top: 50px} #modelPAppeal { color: #eee; top: 70px; text-indent: 220px} @media (max-width: 1060px) { .SCLInfo, .SCLInfo02 { margin-top: 30px} .SCLInfo02 br { display: none} } @media (max-width: 960px) { #scanning .sec01 { padding-bottom: 60px} #scanningAppeal { font-size: 1.5rem; padding-top: 40px} .scanGuide, .scanGuide02 { width: 56%; margin: 0; padding: 0} .SCLItem { margin-top: 50px; -webkit-align-items: center; align-items: center} .scanImage { width: 38%} .SCLTit, .SCLTit02 { font-size: 1.6rem} .SCLInfo, .SCLInfo02 { font-size: 1.4rem; margin-top: 20px} #modelPAppeal { top: inherit; font-size: 1.6rem; text-indent: 0; margin: 30px auto 0; position: relative} #modelPList { margin-top: 40px} #modelPList .SCLItem:first-of-type { margin-top: 0} } @media (max-width: 820px) { #scanningCList { margin-top: 50px} .SCLItem { -webkit-align-items: stretch; align-items: stretch}} @media (max-width: 660px) { #scanningAppeal { width: 80%} #scanningCList, #modelPList { margin-top: 40px} .SCLItem { width: 80%; margin: 40px auto 0} .scanGuide, .scanGuide02 { width: 100%} .scanImage { width: 75%; margin: 0 auto} .SCLTit, .SCLTit02 { margin-top: 30px} .scanGuide02 { order: 2} .SCLTit02, .SCLInfo02 { text-align: left} #modelproduct { margin-top: 40px} } @media (max-width: 600px) { #SHead, #scanning .sec01 { padding-top: 50px} #scanning .sec01 { padding-bottom: 50px} #scanningST, #modelproductST, #sequipmentST { font-size: 2.6rem} #scanningST::before, #modelproductST::before, #sequipmentST::before { top: 2px} #scanningAppeal { font-size: 1.5rem; width: 100%; padding-top: 40px} .SCLItem { width: 90%} } @media (max-width: 540px) { #modelPAppeal { font-size: 1.5rem} } @media (max-width: 480px) { #scanningST { font-size: 2.5rem; line-height: 1.2} #scanningST::before { top: 12px} .SCLItem { width: 100%} .scanImage { width: 80%} #modelPAppeal { text-align: left; line-height: 1.8; letter-spacing: .1em; width: 16em} } @media (max-width: 400px) { #scanningST .STEN { letter-spacing: .09em} } @media (max-width: 390px) { .scanImage { width: 90%} } @media (max-width: 374px) { .SCLTit, .SCLTit02 { font-size: 1.5rem} } @media (max-width: 350px) { .SCLTit, .SCLTit02 { letter-spacing: .025em;} } @media (max-width: 340px) { #scanningST { font-size: 2.4rem} .SCLTit02 { line-height: 1.5; width: 16em} } /* Equipment */ #equipment { border-top: 1px solid #999} #EQInner { padding-bottom: 65px} #equipList { max-width: 1200px; margin: 45px auto 0;} .equipItem { width: calc(25% - 30px)} .EQImage { width: 100%} .EQData { color: #e5e5e5; margin: 25px 0 0;} .EQName { font-size: 1.6rem; font-weight: bold; letter-spacing: .06em;} .EQModel { font-size: 1.4rem; font-weight: normal; line-height: 1.5; letter-spacing: .05em; margin-top: 12px; display: block} .EQInfo { font-size: 1.4rem; line-height: 1.8; letter-spacing: .05em; margin: 18px 0 0; padding: 0} @media (min-width: 1280px) { .EQModel br { display: none !important} .DSWNarrow::before { content: '/'; font-size: 1.1rem; vertical-align: .17em; padding: 0 .4em; display: inline-block} } @media (min-width: 1400px) { #equipList { padding: 0 50px} } @media (max-width: 1110px) { .EQName { font-size: 1.5rem} } @media (max-width: 1040px) { .EQName { font-size: 1.4rem} } @media (max-width: 990px) { .EQModel { font-size: 1.3rem; line-height: 1.6; margin-top: 1em} } @media (max-width: 980px) { .EQName { letter-spacing: .035em} } @media (max-width: 960px) { #EQInner { padding: 50px 5vw 55px} .equipItem { width: calc(25% - 16px)} } @media (max-width: 920px) { .EQName { line-height: 1.4} } @media (max-width: 768px) { .equipItem { width: calc(50% - 20px)} .equipItem:nth-of-type(n+3) { margin-top: 40px} } @media (max-width: 600px) { .equipItem { width: calc(50% - 2.75%)} } @media (max-width: 480px) { .EQModel { margin-top: 10px;} .EQInfo { font-size: 1.3rem; margin-top: 12px;} } @media (max-width: 420px) { #equipList { width: 82%} .equipItem { width: 100%; margin-left: auto; margin-right: auto} .equipItem:nth-of-type(n+2) { margin-top: 40px} } @media (max-width: 400px) { #equipList { width: 86%} } @media (max-width: 340px) { #equipList { width: 95%} } /* Flow */ #SFlowList { max-width: 1000px; margin: 30px auto 0} .SFItem { min-height: 100px; margin-top: 20px; padding-bottom: 25px; position: relative} .SFItem::before { content: ''; position: absolute; top: 70px; left: 23px; background: #c2e0b2; width: 4px; height: calc(100% - 75px)} .SFItem::after { content: ''; position: absolute; bottom: 0; left: 14px; width: 0; height: 0; border-style: solid; border-width: 0 13px 20px 0; border-color: transparent #c2e0b2 transparent transparent} .SFItem:last-of-type { padding-bottom: 0} .SFItem:last-of-type::before, .SFItem:last-of-type::after { display: none} .SFIST { color: #4e4e4e; font-size: 2rem; font-weight: bold; line-height: 2.6; margin: 0; padding-left: 68px; position: relative} .SFNum { position: absolute; top: 0; left: 0; color: #fff; font-size: 3.6rem; font-style: normal; font-weight: normal; text-align: center; text-indent: .035em; line-height: 1.33; width: 50px; z-index: 1} .SFNum::before { content: ''; position: absolute; top: 0; left: 0; background: #82be62; width: 50px; height: 50px; border-radius: 50%; display: block; z-index:-1} .SFInfo { color: #5e5e5e; font-size: 1.6rem; font-weight: bold; line-height: 1.8; letter-spacing: .06em; margin: 0; padding: 30px 10px 0 140px} #SFContactBox { margin: 35px 10px 0 140px} .SFCItem { text-decoration: none; width: calc(46% - 4px); padding: 2px; position: relative; z-index: 1} .SFCInner { text-align: center; padding: 52px 0; position: relative} #SFTelephone .SFCInner { border: 1px solid #e2eed9} #SFForm .SFCInner { border: 1px solid #f0e7e2; padding-bottom: 55px} #SFTelephone::before, #SFTelephone::after, #SFForm::before, #SFForm::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block} #SFTelephone::before { background: #6ea359; z-index: -2} #SFForm::before { background: #b57770; z-index: -2} #SFTelephone::after, #SFForm::after { -webkit-transform: scale(0); transform: scale(0); z-index: -1} #SFTelephone::after { background: #557e3e} #SFForm::after { background: #956055} #SFTelephone:hover::after, #SFForm:hover::after { -webkit-transform: scale(1); transform: scale(1)} #SFTelephone { color: #e9ffd7} #SFForm { color: #f0e5de} .SFCName { font-size: 1.8rem; letter-spacing: .1em; margin: 0} #SFTelephone .SFCName, #SFTel { color: #edfae5; text-shadow: -1px -1px 0 rgba(56,118,25,.8)} #SFTel { font-size: 3rem; text-align: center; letter-spacing: .06em; margin: 20px 0 0; position: relative} .SFTelSign { position: absolute; top: 7px; left: 50%; background-position: -260px -70px; width: 21px; height: 21px; margin-left: -4.25em; display: block} #SFTelephone:hover .SFTelSign { margin-left: -4.15em; -webkit-transform: rotate(25deg); transform: rotate(25deg)} #SFForm .SFCName { text-shadow: 1px 1px 0 rgba(114,71,57,.75)} #SFContact { font-size: 2.5rem; text-align: center; letter-spacing: .1em; margin: 22px 0 0; position: relative} .SFFormSign { position: absolute; top: 0; left: 50%; background-position: -300px -80px; width: 28px; height: 24px; margin-left: -4.6em; display: block} #SFForm:hover .SFFormSign { -webkit-transform: rotate(30deg); transform: rotate(30deg)} #SFTelephone:hover #SFTel, #SFForm:hover #SFContact { color: #fff766; -webkit-transform: translate3d(1px,-1px,0); transform: translate3d(1px,-1px,0)} @media (min-width: 961px) { .SFCItem { min-width: 332px} } @media (max-width: 960px) { #flowST { width: auto} .SFInfo { padding-left: 68px} #SFContactBox { margin: 35px 30px 0 68px} .SFCInner { padding: 30px 0} #SFForm .SFCInner { padding-bottom: 33px} } @media (max-width: 820px) { .SFCItem { width: 46.5%} } @media (max-width: 768px) { #SFTel { letter-spacing: .035em} .SFTelNum { padding-left: 22px} .SFTelSign { margin-left: -3.65em} .SFContLink { padding-left: 25px} .SFFormSign { margin-left: -3.95em} } @media (max-width: 700px) { .SFCName { font-size: 1.5rem} #SFTel { font-size: 2.6rem} #SFForm .SFCInner { padding-bottom: 31px} #SFContact { font-size: 2.3rem} .SFTelSign, .SFFormSign { transform: scale(.85)} .SFTelSign { top: 4px} .SFFormSign { top: -1px; margin-left: -3.9em} } @media (max-width: 660px) { #SFContactBox { margin-right: 0} } @media (max-width: 600px) { #serviceFlow .sec01 { padding: 50px 5vw 45px} #SFlowList { margin-top: 40px} .SFItem { padding-bottom: 15px} .SFItem::before { top: 60px; left: 18px} .SFItem::after { left: 9px} .SFNum { font-size: 3rem; line-height: 1.3; width: 40px} .SFNum::before { width: 40px; height: 40px} .SFIST { line-height: 2.1; padding-left: 55px} .SFInfo { font-size: 1.5rem; padding: 15px 10px 0 55px} #SFContactBox { margin: 25px 10px 5px 55px} } @media (max-width: 580px) { #SFContactBox { margin: 25px 20px 0 55px} .SFCItem { width: 60vw; margin: 0 auto} #SFForm { margin-top: 30px} } @media (max-width: 420px) { .SFCItem { width: 70vw} } @media (max-width: 400px) { .SFItem::before { top: 52px; left: 15px; height: calc(100% - 68px)} .SFItem::after { left: 6px} .SFNum { font-size: 2.6rem; line-height: 1.3; width: 34px} .SFNum::before { width: 34px; height: 34px} .SFIST { font-size: 1.8rem; line-height: 2.075; padding-left: 48px} .SFInfo { font-size: 1.5rem; padding: 10px 10px 0 48px} #SFContactBox { margin: 20px 10px 5px 48px} } /* ------------------------------------------- Works Gallery ------------------------------------------- */ #worksGallery { padding: 30px 60px 50px; border: none} #worksGList { max-width: 1340px; margin: 0 auto} #worksGList::after { content: ''; width: calc(50% - 10px); display: block} .WGItem { text-decoration: none; width: calc(25% - 15px); margin-top: 30px} .WGImage { position: relative} .WGData { letter-spacing: .06em; margin: 0; padding: 10px} .WGMeta { color: #e4ddd7; font-size: 1.6rem; line-height: 1.5; margin: 12px 0 0} .WGSub { font-size: 1.3rem; margin-top: 3px; display: block} .WGInfo { color: #e4ddd7; font-size: 1.4rem; line-height: 1.8; margin: 12px 0 0} .WGItem:hover { background: rgba(0,0,0,.5)} .WGItem:hover .WGMeta, .WGItem:hover .WGInfo { color: #ff994e} .WGImage::after { content: ''; position: absolute; top: 0; left: 0; background: rgba(36,12,0,.4); width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0)} .WGItem:hover .WGImage::after { -webkit-transform: scale(1); transform: scale(1)} #worksPageNavi { max-width: 1340px; margin: 30px auto 0; padding-top: 30px; border-top: 1px solid #aea08e} @media (max-width: 1200px) { #worksGallery { padding: calc(5vw - 30px) 5vw 5vw} } @media (max-width: 1099px) { .WGMeta { font-size: 1.5rem} } @media (max-width: 999px) { .WGInfo { font-size: 1.3rem; margin-top: 8px} } @media (max-width: 767px) { #worksGallery { margin-top: 10px} #worksContents { margin-top: 280px; border: none} #worksGList::after { content: ''; width: 31%; display: block} .WGItem { width: 31%} .WGData { padding: 5px 0 0} } @media (max-width: 600px) { #worksGList::after { display: none} .WGItem { width: 47.5%; margin-top: 25px} } @media (max-width: 480px) { #worksPageNavi { margin: 25px 0 0; padding: 25px 0 20px} } @media (max-width: 440px) { #worksGList { margin-top: 15px} .WGItem { width: 90%; margin: 25px auto 0} } @media (max-width: 385px) { .WGItem { width: 95%} .WGItem { margin-top: 20px} } /* ------------------------------------------- Company Page ------------------------------------------- */ #companyImage { background: url(../company/images/3d_office.jpg) no-repeat center top / cover} /* Outline */ #outline { padding-top: 60px} #compOutline, #groupOutline { font-size: 1.6rem; line-height: 1.6; letter-spacing: .06em; max-width: 1200px; margin: 50px auto 0; border-top: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7} #groupOutline { margin-bottom: 10px} .COKind, .COInfo { padding: 24px 4.22% 24px 4.72%; border-bottom: 1px solid #a7a7a7} .COKind { float: left; width: 5.5em; margin: 0} .COInfo { width: calc(100% - 5.75em - 18.1%); margin: 0; border-left: 1px solid #a7a7a7 } .COKind:last-of-type, .COInfo:last-of-type { border-bottom: none} /* Admin */ #adminST { color: #f2eee7} .adminImages, #CGroupImages { max-width: 1200px; margin: 30px auto 0; padding: 0 50px} #adminInfo { color: #f0f0f0; font-size: 1.5rem; text-align: center; letter-spacing: .075em; margin: 50px 0 20px} .AIMST { font-size: 2.4rem; text-align: center; letter-spacing: .08em; margin: 60px 0 0} .AIMAinItem { width: 100%; margin: 30px 0 0} .AIItem { width: calc(50% - 30px); margin: 60px 0 0} /* Group */ #CGroup { max-width: 1340px} #mitomiAppeal { -webkit-align-items: center; align-items: center; width: calc(100% - 100px); max-width: 1040px; margin: 50px auto 0} #CGroupInfo { font-size: 1.6rem; line-height: 2.2; letter-spacing: .07em; max-width: calc(100% - 270px); margin: 0} #mitomiLogo { float: left; width: 220px; margin-right: 50px} #CGWorksST { font-size: 2.8rem; line-height: 1.95; letter-spacing: .06em; padding-bottom: 10px} #CGroupImages { margin-top: 30px} .CGItem { width: calc(33.33% - 20px); margin: 30px 0 0} .CGItem02 { width: 23.25% !important} /* Access */ #CAccess { padding-bottom: 80px} #accessST { color: #ddd7d2} #accessInfo { color: #d9d5d0; font-size: 1.5rem} #mapContainer { max-width: 1340px; margin: 40px auto 0} #GMap { background: #d4eef9; height: 40vw; max-height: 540px; margin: 0} @media (max-width: 1020px) { #CGroupInfo { line-height: 1.8} #CGroupImages { margin-top: 50px} } @media (max-width: 960px) { #mitomiAppeal { width: 100%} #CGroupImages { padding: 0} #accessInfo { width: calc(100% - 10vw); padding: 0 5vw; text-align: right} #GMap { height: 46vw !important} } @media (max-width: 768px) { #companyImage { background-position: 35% top} .adminImages { padding: 0} .AIItem { width: calc(50% - 20px); margin: 40px 0 0} #groupOutline { margin-bottom: 0} #CGroupInfo { font-size: 1.5rem} #CGroupImages { margin-top: 45px} #CGWorksST { padding-bottom: 0} } @media (max-width: 720px) { #accessInfo { position: relative; top: inherit; text-align: center; width: 100%; padding: 35px 0 0} #GMap { height: 50vw !important} } @media (max-width: 640px) { #mitomiLogo { float: none; margin: 0 auto} #CGroupInfo { width: 100%; max-width: inherit; margin-top: 25px} #CGroupImages { margin-top: 35px} .CGItem { width: 47.5%} .CGItem02 { width: 30% !important} } @media (max-width: 600px) { #outline { padding-top: 50px} #compOutline, #groupOutline { margin-top: 40px} #CGroup, #CAccess { padding: 50px 5vw} .AIMST { margin-top: 40px;} .COKind, .COInfo { padding: 15px 4% 15px 4.72%} #CGWorksST { font-size: 2.4rem; line-height: 2.2} #CGWorksST .SLST { padding: 0 2.2em} #CAccess { padding-bottom: 60px} #GMap { height: 60vw !important} } @media (max-width: 500px) { #compOutline .spNBlock { display: block} #groupOutline .spNBlock { display: block} #accessInfo { text-align: left; padding-left: 56px} #accessInfo > .spNBlock { margin-top: 12px; display: block} } @media (max-width: 480px) { #outlineST::before, #CGroupST::before, #accessST::before { top: 6px} .AIMST { font-size: 2rem;} #GMap { height: 70vw !important} .AIMAinItem, .AIItem, .AIItem:nth-of-type(3), .AIItem:nth-of-type(4), .CGItem { width: 90%; margin: 5vw auto 0} .CGItem02 { width: 60% !important} } @media (max-width: 440px) { .COKind { padding: 15px 5px} .COInfo { padding: 15px 0 15px 3.25%} .COInfo { width: calc(100% - 5.75em - 6.5%)} } @media (max-width: 360px) { #compOutline, #groupOutline { font-size: 1.5rem} .AIMAinItem, .AIItem, .AIItem:nth-of-type(3), .AIItem:nth-of-type(4), .CGItem { width: 100%} .CGItem02 { width: 66.7% !important} } @media (max-width: 349px) { #accessInfo { padding-left: 0} } @media (max-height: 450px) and (orientation: landscape) { #GMap { height: 40vw !important} } /* ------------------------------------------- News CMS ------------------------------------------- */ /* News Top */ #newsTop { border: none} #NTWrapp { padding: 20px 60px 0} #newsList { max-width: 1340px; margin: 0 auto} #newsList:after { content: ''; width: 30.5%; display: block} .newsItem { text-decoration: none; width: 30.5%; max-width: 385px; margin-top: 40px} @media (min-width: 1400px) { .newsItem { max-width: inherit} } .NIImage { width: 100%; overflow: hidden; position: relative; opacity: 1} .NIImage::after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0,0,0,.4); width: 100%; height: 100%; transform: scale(0);} .newsItem:hover .NIImage::after { transform: scale(1)} .newsItem:hover .NIIM { -webkit-transform: scale(1.2); transform: scale(1.2)} .newsItem .NIDate, .NATime { color: #8e7762; font-size: 1.5rem; letter-spacing: .1em; margin: 15px 0 0; display: block} .newsItem .NITitle { color: #666; font-size: 1.6rem; font-weight: bold; line-height: 1.4; letter-spacing: .05em; margin: 9px 0 0} .newsItem:hover .NIDate { color: #f58e3e} .newsItem:hover .NITitle { color: #e60} @media (max-width: 1119px) { .newsItem .NIDate { font-size: 1.4rem} .newsItem .NITitle { font-size: 1.5rem} } @media (max-width: 820px) { .newsItem { width: calc(50% - 2.4vw); margin-top: 30px} #NTWrapp { padding: 20px 5vw 0} } @media (max-width: 767px) { #newsTop { margin-top: 280px; border: none} } @media (max-width: 600px) { .newsItem { margin-top: 15px} } @media (max-width: 430px) { #NTWrapp { padding-top: 5px} .newsItem { width: 90%; margin: 30px auto 0}} @media (max-width: 430px) { .newsItem { width: 100%}} /* News Individual */ #NPostMeta { max-width: 1600px; margin: 0 auto; padding-bottom: 50px} #newsIndBL { padding: 20px 0 10px 120px} @media (max-width: 1200px) { #newsIndBL { padding-left: 5vw} } #NPostTitle { margin-top: 35px; padding-bottom: 20px} #newsIndividual { padding-bottom: 5vw; border: none} #newsIssue { margin-bottom: 2px; padding: 5vw 5vw 0} .newsArticle { background: rgba(255,255,255,.7); max-width: 1100px; margin: 0 auto; padding: 50px 70px} .NATime { margin: 0} .NATitle { font-size: 2.8rem; line-height: 1.25; letter-spacing: .06em; margin: 8px 0 0; padding-bottom: 10px; border-bottom: 2px solid #e7ddd5; position: relative} .newsBody { padding-top: 15px} .newsBody p { font-size: 1.5rem; line-height: 2; letter-spacing: .06em; margin: 1em 0 0} .newsBody img { width: 100%; max-width: 90%; height: auto; margin: 30px auto 0 !important; display: block !important} @media (max-width: 960px) { #NPostTitle { margin-top: 50px} } @media (max-width: 767px) { #NPostMeta { padding-bottom: 75px; position: relative} #NPostTitle { margin-top: 65px; padding-bottom: 20px} #newsIndBL { line-height: 1.5; padding: 0 5vw} .BreadcrumbList { top: inherit; bottom: 12px} .newsArticle { padding: 5vw} .NATitle { font-size: 2.4rem} .NATime { font-size: 1.4rem} } @media (max-width: 640px) { #NPostMeta { padding-bottom: 85px} #NPostTitle { padding-bottom: 15px} } @media (max-width: 430px) { .NATitle { font-size: 2.2rem} .NATime { font-size: 1.3rem} } @media (max-width: 400px) { #newsIndividual { padding-bottom: 0} #newsIssue { padding: 3vw 3vw}} @media (max-width: 340px) { .NATitle { font-size: 2rem} } /* ------------------------------------------- CMS Navi ------------------------------------------- */ /* Blog List Navigation */ #newsPageNavi { max-width: 1340px; margin: 50px auto 0; padding: 33px 0 50px; border-top: 2px solid #dcd0c0} #blogPagination { text-align: center; margin: 0 auto; padding: 0 7px 0 0} #blogPagination li { font-size: 1.6rem; margin: 7px 0 0 7px; display: inline-block} .link_page, .current_page { width: 40px; height: 40px; margin-top: 5px; display: block; position: relative; z-index: 1} .link_page:before, .link_page:after, .current_page:before { content: ''; position: absolute; top: -11px; left: 0; width: 40px; height: 40px; border-radius: 50%} .link_page:before { background: rgb(80,192,30); z-index: -2} .current_page:before { background: #c2bbac; z-index: -1} .link_page:after { background: #f07e00; -webkit-transform: scale(0); transform: scale(0); z-index: -1} .link_page:hover:before { opacity: 0} .link_page:hover:after { -webkit-transform: scale(1); transform: scale(1)} #blogPagination a { color: #fff; text-decoration: none; cursor: pointer; display: block} #blogPagination .current_page { color: #f9f9f9} #blogPagination .link_before, #blogPagination .link_next { color: #666; font-size: 2.6rem; padding: 0 10px; vertical-align: -.07em; display: inline-block} #worksGallery #blogPagination .link_before, #worksGallery #blogPagination .link_next { color: #fff} #blogPagination .link_before:hover, #blogPagination .link_next:hover, #worksGallery #blogPagination .link_before:hover, #worksGallery #blogPagination .link_next:hover { color: #f06e00} @media (max-width: 767px) { #newsPageNavi { margin-top: 40px; padding-bottom: 35px} } @media (max-width: 480px) { #newsPageNavi { padding: 30px 0 30px} #paginationList li { font-size: 1.5rem} .link_page, .current_page { width: 35px; height: 35px} .link_page:before, .link_page:after, .current_page:before { top: -10px; width: 35px; height: 35px} #blogPagination .link_before, #blogPagination .link_next { font-size: 2.2rem; padding: 0 3px; vertical-align: 0em} } /* Individual Pagination */ #postNavi { background: rgba(255,255,255,.7); max-width: 1200px; margin: 0 auto; padding: 0 20px 20px} #newsIndNavi { margin: 0 auto; padding: 0; position: relative} .win .indPageNavi { font-weight: 500} .indPageNavi a { color: #796255; font-size: 1.5rem; text-align: center; letter-spacing: .06em; text-decoration: none; padding: 18px 0 28px; display: block; position: relative; z-index: 1} .indPageNavi a:hover { color: #fff; text-shadow: none} .previousEntry, .nextEntry { letter-spacing: .06em; width: calc(33.5% - 2px)} .previousEntry { border-right: 2px solid #fff} .nextEntry { border-left: 2px solid #fff} .returnList { letter-spacing: .2em; width: 33%} .previousEntry a:before, .returnList a:before, .nextEntry a:before, .previousEntry a:after, .returnList a:after, .nextEntry a:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: -1} .previousEntry a:before, .previousEntry a:after { -webkit-border-radius: 6px 0 0 6px; border-radius: 6px 0 0 6px} .nextEntry a:before, .nextEntry a:after { -webkit-border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0} .previousEntry a:before, .nextEntry a:before { background: #eeece5} .returnList a:before { background: #e5e3dd} .previousEntry a:after, .returnList a:after, .nextEntry a:after { background: #777; -webkit-transform: scaleX(0); transform: scaleX(0)} .previousEntry a:after { -webkit-transform-origin: top right; transform-origin: top right} .returnList a:after { -webkit-transform-origin: 50%; transform-origin: 50%} .nextEntry a:after { -webkit-transform-origin: top left; transform-origin: top left} .previousEntry a:hover:after, .returnList a:hover:after, .nextEntry a:hover:after { -webkit-transform: scaleX(1); transform: scaleX(1)} @media (max-width: 767px) { #postNavi { padding: 0 5vw 20px}} @media (max-width: 640px) { .indPageNavi a { font-size: 1.4rem} } @media (max-width: 540px) { .indPageNavi a { font-size: 1.3rem} } @media (max-width: 480px) { #postNavi { padding: 0 5px 5px} } @media (min-width: 341px) and (max-width: 540px) { .previousEntry, .nextEntry { width: calc(30% - 2px)} .returnList { width: 40%}} @media (max-width: 340px) { .returnList .spFalse { display: none} } /* Individual Pagination Signs */ .PESign, .NESign, .RLSign, .PESign::before, .NESign::before, .RLSign::before { position: absolute; bottom: 15px; left: 50%; background: #997e66; width: 30px; height: 1px; margin-left: -16px; transition: inherit} .RLSign { bottom: 10px; margin-left: -15px} .PESign::before, .NESign::before, .RLSign::before { content: ''; width: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg)} .PESign::before, .NESign::before { bottom: 2px} .NESign::before { margin-left: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg)} .RLSign::before { bottom: 10px; margin-left: -3px} .RLSign:after { content: ''; position: absolute; bottom: 0; right: 0; width: 15px; height: 8px; border-top: 1px solid #bfa787; border-right: 1px solid #bfa787; transition: inherit} a:hover .PESign { transform: translateX(-15px); background: #fff} a:hover .NESign { transform: translateX(15px); background: #fff} a:hover .PESign::before, a:hover .NESign::before { background: #fff} a:hover .RLSign { background: #fff; width: 15px; margin-left: 0} a:hover .RLSign::before { background: #fff; margin-left: -23px} a:hover .RLSign:after { border-color: #fff; width: 30px} /* ------------------------------------------- CONTACT ------------------------------------------- */ #contact { padding-top: 60px} #contactContents { max-width: 1200px; margin: 0 auto; padding: 50px 5vw} .CHCopy { font-size: 1.6rem; text-align: center; letter-spacing: .06em; margin: 0} .contactPC { padding-bottom: 2px} #contactContents { padding: 50px 5vw 0} .contactItem { background: #fff; padding: 50px; position: relative} #contactForm { margin-top: 50px} .contactST { position: absolute; top: 50px; left: 50px; margin: 0} .PCEN.CTEN { font-size: 2.4rem; letter-spacing: .08em} .PCJP { font-size: 1.5rem; letter-spacing: .075em; margin-top: 10px; display: block} #contactTel { background: #fff; width: 42%; margin: 0 auto} .CTelNum { font-size: 3.8rem; text-align: center; letter-spacing: .035em; margin: .1em 0 0} .CTelNum a { color: #33a200; text-decoration: none; cursor: pointer; display: inline-block; position: relative} .CTelNum a:hover { color: #f97700; -webkit-transform: translate3d(2px,-1px,0); transform: translate3d(2px,-1px,0)} .ETelSign { position: absolute; top: 13px; left: 0; background-position: -150px -50px; width: 20px; height: 20px; margin-left: -25px} .CTelNum a:hover .ETelSign { -webkit-transform: rotate(20deg); transform: rotate(20deg)} .ETelTime { color: #696969; font-size: 1.3rem; text-align: center; letter-spacing: .045em; margin: 10px 0 0} .contactForm { margin-top: 45px} @media (max-width: 960px) { .CHCopy { font-size: 1.5rem; line-height: 1.8} .contactST { position: relative; top: inherit; left: inherit} .contactItem { padding: 30px} #contactTel { width: 100%; margin-top: 18px} .PCEN.CTEN { position: absolute; top: 0; left: 0} .contactST .PCJP { text-align: center; width: 100%; height: 24px; margin-top: 4px; display: inline-block} .contactForm { margin-top: 0} #contactHead { padding: 30px 5vw} #contactContents { padding: 5vw 2.5vw 0} } @media (max-width: 767px) { #contactWrapp { margin-top: 280px; border: none} #contactContents { padding: 5vw 0 0} #contactForm { margin-top: 5vw;} .PCEN.CTEN { position: relative; top: inherit; left: inherit} .CHCopy { text-align: left} .contactST .PCJP { text-align: left; height: auto; margin-top: 8px} #contactTel { margin-top: 12px} } @media (max-width: 700px) { #contact { padding-top: 40px} } @media (max-width: 600px) { .CTelNum { font-size: 3.4rem} .ETelSign { top: 10px} } @media (max-width: 480px) { #contact { padding-top: 30px} #contactContents { padding-top: 27px} .PCEN.CTEN { font-size: 2rem} .contactST .PCJP { font-size: 1.4rem} } @media (max-width: 400px) { .CHCopy { letter-spacing: .045em} } @media (max-width: 460px) { .contactItem { padding: 5vw} } @media (max-width: 389px) { .contactItem { padding: 20px} .CTelNum { font-size: 3.2rem} .ETelSign { top: 9px; left: 2px} .ETelTime { letter-spacing: 0} } @media (max-width: 340px) { #contact { padding: 30px 4vw} .contactItem { padding: 5vw 4vw} .ETelTime .spNFalse { display: none} } /* Progress Area */ .formProgress { min-height: 75px; margin: 50px 0 0; padding: 0 280px; position: relative} .formProgress::before { content: ''; position: absolute; top: 46px; left: 0; background: #ccc; width: 100%; height: 1px} @media (max-width: 1140px) { .formProgress { padding: 0 240px}} @media (max-width: 960px) { .formProgress { max-width: 50%; min-height: 65px; margin: 30px auto 0; padding: 0} } @media (max-width: 960px) and (min-width: 601px) { .formProgress:before { width: 200%; margin-left: -50%} } @media (max-width: 600px) { .formProgress { max-width: 60%} .formProgress:before { width: 166.6%; margin-left: -33.33%} } @media (max-width: 500px) { .formProgress { max-width: 70%} .formProgress:before { width: 142.85%; margin-left: -21.5%} } @media (max-width: 410px) { .formProgress { max-width: 80%} .formProgress:before { width: 125%; margin-left: -12.5%} } @media (max-width: 410px) { .formProgress { max-width: 90%} .formProgress:before { width: 111.11%; margin-left: -5.5%} } #FPInput, #FPConfirm, #FPCompletion { color: #7e7e7e; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: .4em; text-indent: .25em; width: 60px; position: relative} #FPInput { text-indent: .45em} #FPInput::before, #FPConfirm::before { content: ''; position: absolute; top: 35px; left: 20px; width: 0; height: 0; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #aeaeae} #FPCompletion::before { content: ''; position: absolute; top: 36px; left: 19px; width: 20px; height: 20px; background: #aeaeae; -webkit-border-radius: 50%; border-radius: 50%} #FPInput.FPOnPhase::before, #FPConfirm.FPOnPhase::before { top: 32px; left: 12px; border-width: 30px 18px 0 18px; border-color: #fa7e2e transparent transparent transparent} #FPInput.FPOnPhase::after, #FPConfirm.FPOnPhase::after { content: ''; position: absolute; top: 38px; left: 22px; width: 0; height: 0; border-style: solid; border-width: 14px 8px 0 8px; border-color: #fff transparent transparent transparent} #FPCompletion.FPOnPhase::before { top: 32px; left: 14px; background: #fa7e2e; width: 30px; height: 30px} #formNotice { font-size: 1.6rem; letter-spacing: .06em; margin: 30px 0 0; padding-left: 90px; position: relative} #formNotice::before, .required::before, #MFConsent::before { content: ''; position: absolute; top: 2px; width: 12px; height: 6px; border-left: 2px solid #f0521e; border-bottom: 2px solid #f0521e; -webkit-transform: rotate(-50deg); transform: rotate(-50deg)} #formNotice::before { left: 70px} .required::before { left: 0} #MFConsent::before { top: 41px; left: 8px} @media (max-width: 960px) { #FPInput, #FPConfirm, #FPCompletion { font-size: 1.5rem} #FPInput:before, #FPConfirm:before { top: 35px} #FPCompletion:before { top: 36px} #FPInput.FPOnPhase:before, #FPConfirm.FPOnPhase:before { top: 32px} #FPInput.FPOnPhase::after, #FPConfirm.FPOnPhase::after { top: 38px} #formNotice { font-size: 1.4rem; margin-left: 70px; padding-left: 16px} #formNotice:before, .required:before, #MFConsent:before { top: 2px} #formNotice:before { left: 0} #MFConsent:before { top: 38px; left: 50%; margin-left: -14.25em} } @media (max-width: 800px) { #formNotice { margin-left: 40px} } @media (max-width: 700px) { #formNotice { margin-left: 20px} } @media (max-width: 600px) { #formNotice { margin-left: 0} } @media (max-width: 430px) { .SPF02 { display: none !important} } @media (max-width: 369px) { #formNotice .spFalse { display: none} } /* Form Area */ #mfp_hidden { display: none} #formContents { padding: 10px 70px 0} .MFSelect, .MFItem { margin: 35px 0 0; position: relative} .required, .optional { font-size: 1.6rem; letter-spacing: .06em; text-indent: 20px} .optional:before { content: ''; position: absolute; top: 2px; left: 0; background: #ccc; width: 12px; height: 12px} .MFIKind { font-style: normal; display: block} .MFSelect, .inp01, .mail, textarea { color: #006eb2; font-size: 1.6rem; letter-spacing: .06em; padding: 10px; margin-top: 12px; border: none; outline: none; vertical-align: .2em; border: 1px solid #bbb; -webkit-appearance: none} .MFSelect { -webkit-border-radius: 5px; border-radius: 5px} .inp01, .mail { width: 64%} textarea { font-size: 1.8rem !important; line-height: 1.8; letter-spacing: .15em !important; width: calc(100% - 34px); height: 18em !important; padding: 10px 15px} .inp01, #contactContents { -webkit-appearance: none; } ::-webkit-input-placeholder { color:#888} :-ms-input-placeholder { color:#888} ::placeholder{ color:#888} ::placeholder {font-size: 1.5rem} input::-webkit-input-placeholder {font-size: 1.5rem} input:-moz-placeholder {font-size: 1.5rem} input::-moz-placeholder {font-size: 1.5rem} input:-ms-input-placeholder {font-size: 1.5rem} #MFConsent { font-size: 1.6rem; text-align: center; letter-spacing: .1em; width: 500px; margin: 0 auto; padding-top: 40px; position: relative} #consent { margin: 0 6px 0 5px; vertical-align: 3px} .win7.chrome #consent, .ie10 #consent, .edge #consent { vertical-align: 0} #consentLabel { color: #82694e; font-weight: bold; text-indent: 0em; display: inline-block; position: relative; z-index: 1; cursor: pointer} #MFBTArea { padding-top: 25px} .TFSend, #MFContainer p.TFReset { text-align: center; margin: 0; padding: 0; border: none} #sendMessage, .mfp_element_button { font-size: 1.8rem; line-height: 2; letter-spacing: .1em; width: calc(50% - 25px); text-transform: uppercase; padding: .5em 0 .5em .1em; position: relative; border: none; outline: none; cursor: pointer; -webkit-appearance: none} .win10.chrome .mfp_element_button, .win8_1.chrome .mfp_element_button { padding: .55em 0 .5em .1em} @media (min-width: 960px) { #sendBT { display: none} #sendBT[type='submit'] { position: absolute; visibility: hidden !important} #sendButton, #sendMessage { background-color: transparent; width: 320px; display: block} #sendButton { height: 54px; margin: 0 auto; border: 1px solid #ccc; position: relative} #sendMessage { position: absolute; top: 0; left: 0; color: #444; text-align: center; overflow: hidden; z-index: 5} #sendMessage:hover { color: #fff} #sendBT[type='submit'] + #sendButton::before, #sendBT[type='submit'] + #sendButton::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; display: block; -webkit-box-sizing: border-box; box-sizing: border-box} #sendBT[type='submit'] + #sendButton::before { background: #fffa32; width: 100%; z-index: 0} #sendBT[type='submit'] + #sendButton::after { background: #7e7e7e; width: 0; -webkit-transition: all .35s cubic-bezier(.075, .82, .165, 1) .1s; transition: all .35s cubic-bezier(.075, .82, .165, 1) .1s; z-index: 1} #sendBT[type='submit'] + #sendButton:hover::after { width: 100%} } #sendBT { display: none} #sendBT[type='submit'] { position: absolute; visibility: hidden !important} #sendButton, #sendMessage { background-color: transparent; width: 320px; display: block} #sendButton { height: 54px; margin: 0 auto; position: relative} #sendMessage { position: absolute; top: 0; left: 0; color: #fff; text-align: center; overflow: hidden; z-index: 5} #sendMessage:hover { color: #fff} #sendBT[type='submit'] + #sendButton:before, #sendBT[type='submit'] + #sendButton:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; display: block; -webkit-box-sizing: border-box; box-sizing: border-box} #sendBT[type='submit'] + #sendButton:before { background: #69ae52; width: 100%; z-index: 0} #sendBT[type='submit'] + #sendButton:after { background: #e9922e; width: 0; -webkit-transition: all .35s cubic-bezier(.075, .82, .165, 1) .1s; transition: all .35s cubic-bezier(.075, .82, .165, 1) .1s; z-index: 1} #sendBT[type='submit'] + #sendButton:hover:after { width: 100%} #mfp_button_send { color: #fff; background: #69ae52; border: 1px solid #ccc} #mfp_button_cancel { color: #fff; background-color: #777; border: 1px solid #fff} #mfp_button_send:hover { color: #fff; background: #e9922e; border: 1px solid #cc8955} #mfp_button_cancel:hover { color: #4e4e4e; background: transparent; border-color: #bbb} .mfp_element_button:hover { transform: translateY(-5px)} #sendBT, #mfp_button_send, #mfp_button_cancel { -webkit-appearance: none} @media (max-width: 960px) { .required, .optional { font-size: 1.5rem} .MFSelect, .inp01, .inp02, .inp03, .mail, .numInput, textarea { border: 2px solid #ccc} .inp01, .mail { width: 80%} .MFSelect { width: 100%} .inp02 { width: calc(100% - 20px)} textarea { letter-spacing: .08em !important} #MFConsent { letter-spacing: .025em; padding-top: 35px} #MFBTArea { padding-top: 35px} .mfp_element_button { font-size: 1.6rem; width: calc(50% - 15px); padding: 5px 0 6px 1px} #sendBT { color: #fff; background: #69ae52; font-size: 1.6rem; letter-spacing: .1em; width: 60%; margin: 0 auto; padding: 12px 0 12px 1px; border: none; border: 1px solid #ccc; position: relative; display: block} #mfp_button_send { color: #fff; background: #69ae52; border: 1px solid #ccc} #mfp_button_cancel { color: #fff; background-color: #777; border: 1px solid #fff} #sendBT, #mfp_button_send, #mfp_button_cancel { -webkit-appearance: none} } @media (max-width: 800px) { #formContents { padding: 10px 40px 0} #spConsent { font-weight: bold} } @media (max-width: 700px) { #formContents { padding: 10px 20px 0} } @media (max-width: 600px) { #formContents { padding: 10px 0 0} .MFSelect, .inp01, .inp02, .inp03, .mail, .numInput, textarea { font-size: 1.5rem; margin-top: 10px} #MFConsent { width: 100%} #consentLabel { display: block} #MFConsent:before { margin-left: -10.5em} #sendBT { width: 70%} #MFBTArea { padding-top: 54px} } @media (max-width: 480px) { #sendBT { width: 80%} } @media (max-width: 420px) { #sendButton, #sendMessage { width: 100%} } @media (max-width: 400px) { #spConsent { letter-spacing: .025em} #MFConsent:before { margin-left: -10.1em} #sendBT { width: 100%} } @media (max-width: 389px) { #spConsent .spNFalse { display: none} #MFConsent:before { margin-left: -9.6em} } @media (max-width: 364px) { #spConsent { font-size: 1.4rem !important} #MFConsent:before { margin-left: -9.1em} } @media (max-width: 360px) { .inp01, .mail { width: calc(100% - 7.5vw)} } @media (max-width: 350px) { #formNotice:before { top: 1px} } @media (max-width: 340px) { #MFConsent .required { font-size: 1.4rem; letter-spacing: 0} #spConsent { letter-spacing: 0} #MFConsent:before { margin-left: -8.85em} #MFConsent:before { top: 37px; } .mfp_element_button { width: calc(50% - 10px)} } @media (min-width: 560px) and (min-width: 960px) { .MFSelect { width: calc(80% + 20px)} } @media (min-width: 640px) and (min-width: 960px) { .mfp_element_button { width: calc(48% - 15px)} } /* Form Privacy */ .formPrivacy { height: 210px; margin: 30px 0 0; padding: 30px 0; border: 2px solid #ccc; position: relative; overflow: hidden} .FPInner { height: 100%; padding: 0 15px; position: relative; -webkit-overflow-scrolling: touch; overflow: auto} .FPTitle { color: #82694e; font-size: 1.8rem; font-weight: bold; text-align: center; letter-spacing: .06em; margin: 0} #FPList dt, #FPList dd, .formPrivacy p { font-size: 1.5rem; letter-spacing: .06em; line-height: 1.8; padding: 0} #FPList dt { font-weight: bold; margin: 12px 0 0} #FPList dd { font-size: 1.4rem; margin: 0; padding: 0 0 0 1em} #FPList ul { margin: 0; padding: 0 0 0 2.5em} #FPList li { list-style-type: circle} .formPrivacy p { color: #82694e; font-weight: bold; margin: 0} @media (max-width: 960px) { .formPrivacy { height: 180px; padding: 20px 0; border: 1px solid #ccc} .FPTitle { font-size: 1.6rem; letter-spacing: .1em; margin: 0 0 10px} #FPList dt, #FPList dd, .formPrivacy p { font-size: 1.4rem} #FPList dt { margin: 15px 0 0} #FPList dd { font-size: 1.3rem; padding: 3px 0 0} .formPrivacy p { margin: 0} } @media (max-width: 480px) { .FPTitle .spNFalse { display: none} } /* Checkbox */ .repItem, .mfp_element_hidden { display: none} .repItem[type='checkbox'] { position: absolute; visibility: hidden !important} .repItem[type='checkbox'] + label::before, .repItem[type='checkbox'] + label::after, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label:before, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::after { content: ''; position: absolute; top: inherit; left: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: rotate(0); transform: rotate(0)} @media (min-width: 601px) { #MFConsent .repItem[type='checkbox'] + label::before, #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::before, #MFConsent .repItem[type='checkbox'] + label::after, #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::after { left: -30px} .repItem[type='checkbox'] + label::before, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::before { bottom: 0; background: #fff; width: 40px; height: 20px; margin-left: -20px; border: 1px solid #92a2b2; -webkit-border-radius: 15px; border-radius: 15px} .repItem[type='checkbox'] + label::after, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::after { bottom: 1px; background: #92a2b2; width: 18px; height: 18px; margin-left: -19px; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; -webkit-border-radius: 50%; border-radius: 50%; z-index: 10} .repItem[type='checkbox']:checked + label::after, .repItem[type='checkbox']:checked + .mfp_element_hidden[type='hidden'] + label::after { background: #00bb0e; margin-left: 1px} .win10.edge #MFConsent .repItem[type='checkbox'] + label::before, .win10.edge #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::before, .win8_1.edge #MFConsent .repItem[type='checkbox'] + label::before, .win8_1.edge #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::before { bottom: -1px} .win10.edge #MFConsent .repItem[type='checkbox'] + label::after, .win10.edge #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::after, .win8_1.edge #MFConsent .repItem[type='checkbox'] + label::after, .win8_1.edge #MFConsent .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label::after { bottom: 0} } @media (max-width: 600px) { .repItem[type='checkbox'] + label:before, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label:before { top: 32px; background: #fff; width: 40px; height: 20px; margin-left: -20px; border: 1px solid #92a2b2; -webkit-border-radius: 15px; border-radius: 15px} .repItem[type='checkbox'] + label:after, .repItem[type='checkbox'] + .mfp_element_hidden[type='hidden'] + label:after { top: 33px; background: #92a2b2; width: 18px; height: 18px; margin-left: -19px; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; -webkit-border-radius: 50%; border-radius: 50%; z-index: 10} .repItem[type='checkbox']:checked + label:after, .repItem[type='checkbox']:checked + .mfp_element_hidden[type='hidden'] + label:after { background: #00bb0e; margin-left: 1px} } /* SSL Info */ #siteSsl { margin-top: 40px; padding-top: 30px; border-top: 1px solid #ddd} .sslInfo { font-size: 1.4rem; text-align: center; letter-spacing: .05em; width: 100%; margin: 5px 0 0} @media (max-width: 960px) { #siteSsl { margin: 35px auto 0; padding-top: 18px; display: block} .sslInfo { font-size: 1.3rem; text-align: left; line-height: 1.5; margin: 0} } /* Error Message */ .mfp_err { color: #d20; background: url(../contact/images/mfp_error.gif) no-repeat 0px 14px; font-size: 1.4rem; text-align: left; line-height: 1; margin: 0; padding-top: 15px; clear: both; display: none} #MFConsent .mfp_err { margin-left: 36px; padding-left: 21px} .mfp_parent_error { border: solid 2px #f00} .problem { background-color: #fCC; } #mfp_error { background-color: #fee; padding: 10px; border: solid 1px #f00; display: none} #mfp_error p { font-size: 1.4rem; text-align: center; padding: 0; margin: 0} #mfp_error p strong { color: #d20; font-size: 1.8rem} @media (max-width: 600px) { .mfp_err { color: #d20; background-position: 0 15px; line-height: 1.2; letter-spacing: .025em} #MFConsent .mfp_err { margin-top: 32px; padding-left: 20px} } /* Confirm */ #mfp_phase_confirm h4 { color: #f26500; font-size: 2.6rem; text-align: center; letter-spacing: .1em; margin: 25px 0 0} #mfp_confirm_table, .mfp_buttons { width: calc(100% - 140px)} #mfp_confirm_table { margin: 35px auto 0; border: none; border-spacing: 1px; border-bottom: 1px solid #ddd} #mfp_confirm_table th, #mfp_confirm_table td { font-size: 1.5rem; line-height: 1.5; letter-spacing: .06em; padding: 15px} #mfp_confirm_table th { color: #4e4e4e; text-align: left; width: 28%; vertical-align: top} #mfp_confirm_table td { color: #623e0e; padding-left: 20px} .ie #mfp_confirm_table th, .ie #mfp_confirm_table td { padding: 18px 15px 12px} #mfp_confirm_table tr:nth-of-type(odd) th, #mfp_confirm_table tr:nth-of-type(odd) td { background: #f5f5f5} #mfp_confirm_table tr:nth-of-type(even) th { border-right: 1px solid #ddd} .mfp_buttons { margin: 40px auto} @media (max-width: 960px) { #mfp_phase_confirm h4 { font-size: 2.2rem} #mfp_confirm_table { width: 100%; margin: 30px 0 0} #mfp_confirm_table th, #mfp_confirm_table td { letter-spacing: .06em; width: 100%; display: block} #mfp_confirm_table th { width: calc(100% - 40px); padding: 12px 20px 0; border: none} #mfp_confirm_table tr:nth-of-type(even) th { border: none} #mfp_confirm_table td { width: calc(100% - 40px); padding: 6px 20px 12px} .mfp_buttons { width: 100%; margin: 30px auto} #mfp_button_send, #mfp_button_cancel { width: 47.25%} } @media (max-width: 460px) { #mfp_confirm_table th, #mfp_confirm_table td { width: calc(100% - 24px); padding-left: 12px; padding-right: 12px} } @media (max-width: 410px) { #mfp_phase_confirm h4 { font-size: 2rem; letter-spacing: .06em} } @media (max-width: 340px) { #mfp_phase_confirm h4 { font-size: 1.9rem} #mfp_confirm_table th, #mfp_confirm_table td { font-size: 1.4rem} } @media (min-width: 560px) and (max-width: 960px) { #mfp_confirm_table td { width: calc(100% - 50px); padding-left: 30px}} /* completion */ #completionContents { border: none} #completion { max-width: 1200px; margin: 0 auto; padding: 70px 5vw} #completionItem { padding-top: 10px} #completionContainer { padding: 60px 0} #completionContainer #formContact { margin: 0 auto} #completionST { color: #393; font-size: 3.2rem; text-align: center; letter-spacing: .1em; margin: 30px 0 0} .completionInfo { font-size: 1.5rem; line-height: 2; letter-spacing: .06em; margin: 40px 0 0; padding: 0 50px} .completionInfo > .PPad12 { padding-top: 12px; display: block} #completionTel { margin-top: 5px} .completionTelKind { text-align: center; margin: 0} .completionTelKind:before { display: none} #completion #contactTelephone { margin-top: 50px} @media (max-width: 1100px) { .completionInfo { padding: 0 1em} } @media (max-width: 960px) { #completion { padding: 60px 5vw} #completion #contactTelephone { margin-top: 5vw} #completionItem { padding-top: 1px} #completion #contactTel, #completion .CTelNum { margin-top: 0} } @media (max-width: 767px) { #completionPage #pagesMeta { padding: 70px 0} #completionPage #pageTitle { font-size: 3rem; padding-bottom: 15px} #completionContents { margin-top: 210px} #completion { padding: 50px 5vw} #completionST { margin-top: 25px} .completionInfo { margin-top: 30px} } @media (max-width: 600px) { #confirmWrapp { padding: 20px 10px} #completionST { font-size: 2.8rem} .completionInfo .PPad12 { padding-top: 16px} .completionInfo { font-size: 1.5rem; line-height: 1.8; letter-spacing: .06em; margin: 30px 0 0; padding: 0 5px} } @media (max-width: 480px) { #completion { padding: 40px 5vw} #completionPage #completionItem { padding: 1px 5vw 25px} #completionST { font-size: 2.6rem} } @media (max-width: 380px) { #completion { padding-top: 30px} } @media (max-width: 360px) { #completionST { font-size: 2.4rem} } @media (max-width: 340px) { #completionST { letter-spacing: .065em} } /* ------------------------------------------- Legal Page ------------------------------------------- */ #privacyCInfo { font-size: 1.5rem; max-width: 920px; margin: 0 auto; padding: 40px 50px 0} @media (max-width: 1110px) { #privacyCInfo { max-width: 920px}} #policyContainer { background: rgba(255,255,255,.6); max-width: 920px; margin: 40px auto 0; padding: 50px} .policyKind { font-size: 1.9rem; letter-spacing: .1em; margin: 40px 0 0} .policyKind:first-of-type { margin-top: 0} .policyCopy { font-size: 1.5rem; line-height: 1.8; letter-spacing: .06em; margin: 1em 0 0} #policyContainer .policyList { margin: 0; padding: 0 0 0 50px} #policyContainer .policyList li { font-size: 1.5rem; line-height: 1.8; letter-spacing: .06em; list-style-type: circle} .pl01 { padding-left: 18px} .ml-01 { font-style: normal; margin: 0 5px 0 -18px} .PCWin { padding-left: 11.2em} .environment { font-size: 1.6rem; margin: 25px 0 0; padding-bottom: 5px; border-bottom: 2px solid #ccc; display: inline-block} @media (max-width: 960px) { #legalST { width: auto} } @media (max-width: 767px) { #legalPage #PCStart { padding: 50px 5vw} #legalPage #pagesMeta { padding: 70px 0} #legalPage #pageTitle { padding-bottom: 15px} #legalContents { margin-top: 210px; border: none} #legalST { font-size: 2.6rem; padding-left: 55px} #legalST::before { top: 3px} #privacyCInfo { padding: 30px 5vw 0} #policyContainer { margin-top: 30px; padding: 5vw} #policyContainer .policyList { padding-left: 3.15em} } @media (max-width: 480px) { #legalPage #pageTitle { font-size: 3rem; padding-bottom: 13px} #legalST { font-size: 2.4rem; padding-left: 55px} } @media (max-width: 640px) { #privacyCInfo { padding: 30px 0 0} #policyContainer .policyList { padding: 1em 0 0 2em} .policyKind { line-height: 1.2; margin-top: 30px} } @media (max-width: 480px) { #privacyCInfo { line-height: 1.8} .policyKind { font-size: 1.8rem} .policyCopy{ font-size: 1.4rem} } @media (max-width: 430px) { #legalST { font-size: 2.2rem; padding-left: 50px} } @media (max-width: 379px) { #legalST { width: 9.9em} #legalST .thc02 { line-height: 1.25} } @media (max-width: 359px) { .policyKind { font-size: 1.7rem} } @media (max-width: 340px) { #legalPage #pageTitle { letter-spacing: 0} .policyKind { letter-spacing: .04em} } /* ------------------------------------------- Plugins ------------------------------------------- */ /*! Lity - v2.3.1 - 2018-04-20 http://sorgalla.com/lity/ Copyright (c) 2015-2018 Jan Sorgalla; Licensed MIT */ .lity{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;white-space:nowrap;background:#0b0b0b;background:rgba(0,0,0,0.5);outline:none !important;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity.lity-opened{opacity:1}.lity.lity-closed{opacity:0}.lity *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lity-wrap{z-index:9990;position:fixed;top:0;right:0;bottom:0;left:0;text-align:center;outline:none !important}.lity-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em}.lity-loader{z-index:9991;color:#fff;position:absolute;top:50%;margin-top:-0.8em;width:100%;text-align:center;font-size:14px;font-family:Arial,Helvetica,sans-serif;opacity:0;-webkit-transition:opacity .3s ease;-o-transition:opacity .3s ease;transition:opacity .3s ease}.lity-loading .lity-loader{opacity:1}.lity-container{z-index:9992;position:relative;text-align:left;vertical-align:middle;display:inline-block;white-space:normal;max-width:100%;max-height:100%;outline:none !important}.lity-content{z-index:9993;width:100%;-webkit-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;-o-transition:-o-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease}.lity-loading .lity-content,.lity-closed .lity-content{-webkit-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);transform:scale(.8)}.lity-content:after{content:'';position:absolute;left:0;top:0;bottom:0;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6)}.lity-close{z-index:9999;width:40px;height:45px;position:fixed;right:3vw;top:3vw;-webkit-appearance:none;cursor:pointer;text-decoration:none;text-align:center;padding:0;color:#fff77e;font-style:normal;font-size:70px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out}.lity-close::-moz-focus-inner{border:0;padding:0}.lity-close:hover,.lity-close:focus,.lity-close:active,.lity-close:visited{text-decoration:none;text-align:center;padding:0;color:#ff922e;font-style:normal;font-size:70px;font-family:Arial,Baskerville,monospace;line-height:35px;text-shadow:0 1px 2px rgba(0,0,0,0.6);border:0;background:none;outline:none;-webkit-box-shadow:none;box-shadow:none}.lity-close:active{top:90px}.lity-image img{max-width:100%;display:block;line-height:0;border:0}.lity-iframe .lity-container,.lity-youtube .lity-container,.lity-vimeo .lity-container,.lity-facebookvideo .lity-container,.lity-googlemaps .lity-container{width:100%;max-width:91%}.lity-iframe-container{width:100%;height:0;padding-top:56.25%;overflow:auto;pointer-events:auto;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-overflow-scrolling:touch}.lity-iframe-container iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.6);box-shadow:0 0 8px rgba(0,0,0,0.6);background:#000}.lity-hide{display:none} .lity { background: rgba(0,0,0,.8)} .lity-wrap { max-width: 1380px; margin: 0 auto; padding: 0 7vw} /* ------------------------------------------- Text Link ------------------------------------------- */ .tLink, .newsBody p a { color: #08b; text-decoration: none} .tLink { display: inline-block; position: relative } .tLink:hover, .newsBody p a:hover { color: #f57e33} .tLink:after { content: ''; position: absolute; bottom: 2px; left: -1px; background: #f57e33; width: 6px; height: 1px; display: block; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s; transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s} .tLink:hover:after { width: 100%; height: 2px} .newsBody p a:hover { text-decoration: underline} /* ------------------------------------------- Image Action ------------------------------------------- */ @-webkit-keyframes IMDraw { 0% { -webkit-transform: scale(0,1); } 40% { -webkit-transform: scale(1,1); } 55% { -webkit-transform: scale(1,1); } 100% { -webkit-transform: scale(1,0)} } @keyframes IMDraw { 0% { transform: scale(0,1); } 40% { transform: scale(1,1); } 55% { transform: scale(1,1); } 100% { transform: scale(1,0)} } @-webkit-keyframes BGF { 0%,50% { -webkit-transform: scale(1,1); opacity: 1} 100% { transform: scale(0,1); opacity: 0} } @keyframes BGF { 0%,70% { transform: scale(1,1); opacity: 1} 100% { transform: scale(0,1); opacity: 0} } .imCover { position: absolute; bottom: 0; left: 0; z-index: 10; background: #333; width: 100%; height: 100%; display: inline-block; border-radius: 13px; -webkit-animation: IMDraw 1s cubic-bezier(.075, .82, .165, 1); animation: IMDraw 1s cubic-bezier(.075, .82, .165, 1); -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both} .BGFade { content: ''; position: absolute; top: 0; left: 0; z-index: 5; background: rgb(218,213,209); width: 100%; height: 100%; display: block; border-radius: 13px; -webkit-animation: BGF .5s ease-in-out .1s; animation: BGF .5s ease-in-out .1s; -webkit-transform-origin: right top; transform-origin: right top; -webkit-animation-fill-mode: both; animation-fill-mode: both } /* ------------------------------------------- Common Animation ------------------------------------------- */ .homeLink, #globalNav a, .instaLogo, .FNLink, .BreadcrumbList a, #retTop::before, .BLSign, .ONItem a, .ORInstaLogo, #sendMessage, .sendSign, .mfp_element_button, .PNLink, .link_before, .link_next { -webkit-transition: all .15s ease-in-out; transition: all .15s ease-in-out} .homeLink::after, .ORTNum, .ORTSign, .linkBT01 a, .remodal-close::after, .BNItem, .BNItem .BNTime, .BNItem .BNTitle, .TWItem, .TWICap, .NIDate, .NITitle, .link_page:before, .link_page:after, .previousEntry a:after, .returnList a:after, .nextEntry a:after, .indPageNavi a, .PESign, .NESign, .RLSign, .PESign::before, .NESign::before, .RLSign::before, .WGItem, .WGMeta, .WGInfo, .CTelNum a, .ETelSign { -webkit-transition: all .15s ease-in-out .1s; transition: all .15s ease-in-out .1s} .newsBody p a, .NIImage::after { -webkit-transition: all .25s ease-in-out .1s; transition: all .25s ease-in-out .1s} .NIIM { -webkit-transition: all .3s ease-in-out .1s; transition: all .3s ease-in-out .1s} .TCImage:before, #globalNav, .homeLink:before, .linkBT01 a::before, #retTop::after, #retTop a::after, .ONItem a::before, .FTelNum, .FTelNum .FTElSign, .Sign01, .BLSign, .Sign01::before, .BLSign::before, .BNImage::after, .TWImage::after, .remodal-close, .PNLink::after, .SFCItem::after, #SFTel, #SFContact, .SFTelSign, .SFFormSign, .WGImage::after { -webkit-transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s; transition: all .5s cubic-bezier(.075, .82, .165, 1) .1s} /* Return Buttun */ @-webkit-keyframes RBTIn { 0%,35%{ -webkit-transform: translate3d(60px,60px,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes RBTIn { 0%,35%{ transform: translate3d(60px,60px,0); opacity: 0} 100%{ transform:none; opacity: 1} } #returnBT { -webkit-animation: RBTIn 1s cubic-bezier(.075, .82, .165, 1); animation: RBTIn 1s cubic-bezier(.075, .82, .165, 1)} /* Top Print Image */ @-webkit-keyframes TPrintRota { 0%,20%{ -webkit-transform: rotate(5deg); opacity: 0} 100%{ -webkit-transform: rotate(-5deg); opacity: 1} } @keyframes TPrintRota { 0%,20%{ transform: rotate(5deg); opacity: 0} 100%{ transform: rotate(-5deg); opacity: 1} } .TPrintRota { -webkit-animation: TPrintRota 1.6s cubic-bezier(.075, .82, .165, 1); animation: TPrintRota 1.6s cubic-bezier(.075, .82, .165, 1)} /* Top Works Item */ @-webkit-keyframes TWorkItem01 { 0%,20%{ -webkit-transform: translateY(20px) rotate(3deg); opacity: 0} 100%{ -webkit-transform: translateY(0) rotate(-2deg); opacity: 1} } @keyframes TWorkItem01 { 0%,20%{ transform: translateY(20px) rotate(3deg); opacity: 0} 100%{ transform: translateY(0) rotate(-2deg); opacity: 1} } @-webkit-keyframes TWorkItem02 { 0%,20%{ -webkit-transform: translateY(30px) rotate(-3deg); opacity: 0} 100%{ -webkit-transform: translateY(20px) rotate(2deg); opacity: 1} } @keyframes TWorkItem02 { 0%,20%{ transform: translateY(30px) rotate(-3deg); opacity: 0} 100%{ transform: translateY(20px) rotate(2deg); opacity: 1} } @-webkit-keyframes TWorkItem03 { 0%,20%{ -webkit-transform: translateY(20px) rotate(4deg); opacity: 0} 100%{ -webkit-transform: translateY(0) rotate(-1deg); opacity: 1} } @keyframes TWorkItem03 { 0%,20%{ transform: translateY(20px) rotate(4deg); opacity: 0} 100%{ transform: translateY(0) rotate(-1deg); opacity: 1} } @-webkit-keyframes TWorkItem04 { 0%,20%{ -webkit-transform: translateY(30px) rotate(-4deg); opacity: 0} 100%{ -webkit-transform: translateY(20px) rotate(1deg); opacity: 1} } @keyframes TWorkItem04 { 0%,20%{ transform: translateY(30px) rotate(-4deg); opacity: 0} 100%{ transform: translateY(20px) rotate(1deg); opacity: 1} } @media (max-width: 600px) { @-webkit-keyframes TWorkItem02 { 0%,20%{ -webkit-transform: translateY(15px) rotate(-3deg); opacity: 0} 100%{ -webkit-transform: translateY(5px) rotate(2deg); opacity: 1} } @keyframes TWorkItem02 { 0%,20%{ transform: translateY(15px) rotate(-3deg); opacity: 0} 100%{ transform: translateY(5px) rotate(2deg); opacity: 1} } @-webkit-keyframes TWorkItem03 { 0%,20%{ -webkit-transform: translateY(20px) rotate(5deg); opacity: 0} 100%{ -webkit-transform: translateY(0) rotate(1deg); opacity: 1} } @keyframes TWorkItem03 { 0%,20%{ transform: translateY(20px) rotate(5deg); opacity: 0} 100%{ transform: translateY(0) rotate(1deg); opacity: 1} } @-webkit-keyframes TWorkItem04 { 0%,20%{ -webkit-transform: translateY(15px) rotate(-6deg); opacity: 0} 100%{ -webkit-transform: translateY(5px) rotate(-1deg); opacity: 1} } @keyframes TWorkItem04 { 0%,20%{ transform: translateY(15px) rotate(-6deg); opacity: 0} 100%{ transform: translateY(5px) rotate(-1deg); opacity: 1} } } .TWorkItem01 { -webkit-animation: TWorkItem01 .5s ease-in-out; animation: TWorkItem01 .5s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both} .TWorkItem02 { -webkit-animation: TWorkItem02 .6s ease-in-out; animation: TWorkItem02 .6s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both} .TWorkItem03 { -webkit-animation: TWorkItem03 .7s ease-in-out; animation: TWorkItem03 .7s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both} .TWorkItem04 { -webkit-animation: TWorkItem04 .8s ease-in-out; animation: TWorkItem04 .8s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both} /* form Progress */ @-webkit-keyframes progressIn { 0%,35%{ -webkit-transform: translate3d(-60px,0,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes progressIn { 0%,35%{ transform: translate3d(-60px,0,0); opacity: 0} 100%{ transform:none; opacity: 1} } .progressOn { -webkit-animation: progressIn 1s cubic-bezier(.075, .82, .165, 1); animation: progressIn 1s cubic-bezier(.075, .82, .165, 1)} /* Common */ @-webkit-keyframes fadeIn { 0%{ opacity: 0} 100%{ opacity: 1} } @keyframes fadeIn { 0%{ opacity: 0} 100%{ opacity: 1} } .fadeIn { -webkit-animation: fadeIn .6s ease-in-out; animation: fadeIn .6s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both} .fadeIn02 { -webkit-animation: fadeIn .8s ease-in-out; animation: fadeIn .8s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both} .fadeIn03 { -webkit-animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both} @-webkit-keyframes fadeOut { 0%{ opacity: 1} 100%{ opacity: 0} } @keyframes fadeOut { 0%{ opacity: 1} 100%{ opacity: 0} } .fadeOut { -webkit-animation: fadeOut .6s ease-in-out; animation: fadeOut .6s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both} @-webkit-keyframes fadeDown { 0%,25%{ -webkit-transform: translate3d(0,-30px,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes fadeDown { 0%,25%{ transform: translate3d(0,-30px,0); opacity: 0} 100%{ transform:none; opacity: 1} } #globalHeader, .fadeDown01 { -webkit-animation: fadeDown .8s ease-in-out; animation: fadeDown .8s ease-in-out} .fadeDown02 { -webkit-animation: fadeDown 1s ease-in-out; animation: fadeDown 1s ease-in-out} @-webkit-keyframes fadeUp { 0%,25%{ -webkit-transform: translate3d(0,20px,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes fadeUp { 0%,25%{ transform: translate3d(0,20px,0); opacity: 0} 100%{ transform:none; opacity: 1} } .fadeUp01, #pageTitle { -webkit-animation: fadeUp .75s ease-in-out; animation: fadeUp .75s ease-in-out} .fadeUp02, .PTEN { -webkit-animation: fadeUp .9s ease-in-out; animation: fadeUp .9s ease-in-out} .fadeUp03, #pageTitle::after { -webkit-animation: fadeUp 1.05s ease-in-out; animation: fadeUp 1.05s ease-in-out} .fadeUp04, .pageNavi { -webkit-animation: fadeUp 1.2s ease-in-out; animation: fadeUp 1.2s ease-in-out} .fadeUp04 { -webkit-animation: fadeUp 1.3s ease-in-out; animation: fadeUp 1.3s ease-in-out} @-webkit-keyframes leftIn { 0%,25%{ -webkit-transform: translate3d(-30px,0,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes leftIn { 0%,25%{ transform: translate3d(-30px,0,0); opacity: 0} 100%{ transform:none; opacity: 1} } .leftIn00 { -webkit-animation: leftIn .4s ease-in-out; animation: leftIn .4s ease-in-out} .leftIn01, #homeLogo { -webkit-animation: leftIn .6s ease-in-out; animation: leftIn .6s ease-in-out} .leftIn02 { -webkit-animation: leftIn .8s ease-in-out; animation: leftIn .8s ease-in-out} .leftIn03 { -webkit-animation: leftIn 1s ease-in-out; animation: leftIn 1s ease-in-out} @-webkit-keyframes rightIn { 0%,25%{ -webkit-transform: translate3d(30px,0,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} } @keyframes rightIn { 0%,25%{ transform: translate3d(30px,0,0); opacity: 0} 100%{ transform:none; opacity: 1} } .rightIn00 { -webkit-animation: rightIn .4s ease-in-out; animation: rightIn .4s ease-in-out} .rightIn01, #GNav { -webkit-animation: rightIn .6s ease-in-out; animation: rightIn .6s ease-in-out} .rightIn02, #trigger-overlay { -webkit-animation: rightIn .8s ease-in-out; animation: rightIn .8s ease-in-out} .rightIn03 { -webkit-animation: rightIn 1s ease-in-out; animation: rightIn 1s ease-in-out} @-webkit-keyframes scaleUp {0%,30%{-webkit-transform:scale(0);opacity:0} 100%{-webkit-transform: scale(1);opacity:1}} @keyframes scaleUp {0%,30%{transform:scale(0);opacity:0} 100%{transform: scale(1);opacity:1}} .scaleUp01 { -webkit-animation: scaleUp .9s cubic-bezier(.075,.82,.165,1); animation: scaleUp .9s cubic-bezier(.075,.82,.165,1); -webkit-transform-origin:center; transform-origin:center} .scaleUp02 { -webkit-animation: scaleUp 1.2s cubic-bezier(.075,.82,.165,1); animation: scaleUp 1.2s cubic-bezier(.075,.82,.165,1); -webkit-transform-origin:center; transform-origin:center} .scaleUp03 { -webkit-animation: scaleUp 1.5s cubic-bezier(.075,.82,.165,1); animation: scaleUp 1.5s cubic-bezier(.075,.82,.165,1); -webkit-transform-origin:center; transform-origin:center} /* Lettering Animation */ @-webkit-keyframes typing01 {0%,25%{-webkit-transform:translate3d(-10px,0,0);opacity:0} 100%{-webkit-transform:none;opacity:1}} @keyframes typing01 {0%,25%{transform:translate3d(-10px,0,0);opacity:0} 100%{transform:none;opacity:1}} .onChar1{display:inline-block;-webkit-animation:typing01 .2s ease;animation:typing01 .2s ease}.onChar2{display:inline-block;-webkit-animation:typing01 .3s ease;animation:typing01 .3s ease}.onChar3{display:inline-block;-webkit-animation:typing01 .4s ease;animation:typing01 .4s ease}.onChar4{display:inline-block;-webkit-animation:typing01 .5s ease;animation:typing01 .5s ease}.onChar5{display:inline-block;-webkit-animation:typing01 .6s ease;animation:typing01 .6s ease}.onChar6{display:inline-block;-webkit-animation:typing01 .7s ease;animation:typing01 .7s ease}.onChar7{display:inline-block;-webkit-animation:typing01 .8s ease;animation:typing01 .8s ease}.onChar8{display:inline-block;-webkit-animation:typing01 .9s ease;animation:typing01 .9s ease}.onChar9{display:inline-block;-webkit-animation:typing01 1s ease;animation:typing01 1s ease}.onChar10{display:inline-block;-webkit-animation:typing01 1.1s ease;animation:typing01 1.1s ease}.onChar11{display:inline-block;-webkit-animation:typing01 1.2s ease;animation:typing01 1.2s ease}.onChar12{display:inline-block;-webkit-animation:typing01 1.3s ease;animation:typing01 1.3s ease}.onChar13{display:inline-block;-webkit-animation:typing01 1.4s ease;animation:typing01 1.4s ease}.onChar14{display:inline-block;-webkit-animation:typing01 1.5s ease;animation:typing01 1.5s ease}.onChar15{display:inline-block;-webkit-animation:typing01 1.55s ease;animation:typing01 1.55s ease}.onChar16{display:inline-block;-webkit-animation:typing01 1.6s ease;animation:typing01 1.6s ease}.onChar17{display:inline-block;-webkit-animation:typing01 1.65s ease;animation:typing01 1.65s ease}.onChar18{display:inline-block;-webkit-animation:typing01 1.7s ease;animation:typing01 1.7s ease}.onChar19{display:inline-block;-webkit-animation:typing01 1.75s ease;animation:typing01 1.75s ease}.onChar20{display:inline-block;-webkit-animation:typing01 1.8s ease;animation:typing01 1.8s ease}.onChar21{display:inline-block;-webkit-animation:typing01 1.85s ease;animation:typing01 1.85s ease}.onChar22{display:inline-block;-webkit-animation:typing01 1.9s ease;animation:typing01 1.9s ease}.onChar23{display:inline-block;-webkit-animation:typing01 1.95s ease;animation:typing01 1.95s ease}.onChar24{display:inline-block;-webkit-animation:typing01 2s ease;animation:typing01 2s ease}.onChar25{display:inline-block;-webkit-animation:typing01 2.05s ease;animation:typing01 2.05s ease}.onChar26{display:inline-block;-webkit-animation:typing01 2.1s ease;animation:typing01 2.1s ease}.onChar27{display:inline-block;-webkit-animation:typing01 2.15s ease;animation:typing01 2.15s ease}.onChar28{display:inline-block;-webkit-animation:typing01 2.2s ease;animation:typing01 2.2s ease}.onChar29{display:inline-block;-webkit-animation:typing01 2.25s ease;animation:typing01 2.25s ease}.onChar30{display:inline-block;-webkit-animation:typing01 2.3s ease;animation:typing01 2.3s ease}.onChar31{display:inline-block;-webkit-animation:typing01 2.35s ease;animation:typing01 2.35s ease}.onChar32{display:inline-block;-webkit-animation:typing01 2.4s ease;animation:typing01 2.4s ease}.onChar33{display:inline-block;-webkit-animation:typing01 2.45s ease;animation:typing01 2.45s ease}.onChar34{display:inline-block;-webkit-animation:typing01 2.5s ease;animation:typing01 2.5s ease}.onChar35{display:inline-block;-webkit-animation:typing01 2.55s ease;animation:typing01 2.55s ease}.onChar36{display:inline-block;-webkit-animation:typing01 2.6s ease;animation:typing01 2.6s ease}.onChar37{display:inline-block;-webkit-animation:typing01 2.65s ease;animation:typing01 2.65s ease}.onChar38{display:inline-block;-webkit-animation:typing01 2.7s ease;animation:typing01 2.7s ease}.onChar39{display:inline-block;-webkit-animation:typing01 2.75s ease;animation:typing01 2.75s ease}.onChar40{display:inline-block;-webkit-animation:typing01 2.8s ease;animation:typing01 2.8s ease} .thc01 .onChar7, .thc01 .onChar9 { width: 8px} .thc01 .onChar8 { font-size: 3vw} @media (max-width: 767px) { .thc01 .onChar8 { font-size: 4.75vw} .thc01 .onChar7, .thc01 .onChar9 { width: 3px} } @media (max-width: 600px) { .thc01 .onChar8 { font-size: 5.6vw} } @media (max-width: 480px) { .thc01 .onChar8 { font-size: 6.4vw} .thc01 .onChar7, .thc01 .onChar9 { width: 2px} } @media (max-width: 430px) { .thc01 .onChar8 { font-size: 6.6vw} } #TCI02 .TCJPName .onChar12 { font-size: 1.6vw; margin: 0 -3px} #scanningST .onChar7 { margin: 0 -2px} .thc02 .onChar1{display:inline-block;-webkit-animation:typing01 1s ease;animation:typing01 1s ease}.thc02 .onChar2{display:inline-block;-webkit-animation:typing01 1.1s ease;animation:typing01 1.1s ease}.thc02 .onChar3{display:inline-block;-webkit-animation:typing01 1.2s ease;animation:typing01 1.2s ease}.thc02 .onChar4{display:inline-block;-webkit-animation:typing01 1.3s ease;animation:typing01 1.3s ease}.thc02 .onChar5{display:inline-block;-webkit-animation:typing01 1.4s ease;animation:typing01 1.4s ease}.thc02 .onChar6{display:inline-block;-webkit-animation:typing01 1.5s ease;animation:typing01 1.5s ease}.thc02 .onChar7{display:inline-block;-webkit-animation:typing01 1.6s ease;animation:typing01 1.6s ease}.thc02 .onChar8{display:inline-block;-webkit-animation:typing01 1.7s ease;animation:typing01 1.7s ease}.thc02 .onChar9{display:inline-block;-webkit-animation:typing01 1.8s ease;animation:typing01 1.8s ease}.thc02 .onChar10{display:inline-block;-webkit-animation:typing01 1.85s ease;animation:typing01 1.85s ease}.thc02 .onChar11{display:inline-block;-webkit-animation:typing01 1.9s ease;animation:typing01 1.9s ease}.thc02 .onChar12{display:inline-block;-webkit-animation:typing01 1.95s ease;animation:typing01 1.95s ease}.thc02 .onChar13{display:inline-block;-webkit-animation:typing01 2s ease;animation:typing01 2s ease}.thc02 .onChar14{display:inline-block;-webkit-animation:typing01 2.05s ease;animation:typing01 2.05s ease}.thc02 .onChar15{display:inline-block;-webkit-animation:typing01 2.1s ease;animation:typing01 2.1s ease}.thc02 .onChar16{display:inline-block;-webkit-animation:typing01 2.15s ease;animation:typing01 2.15s ease}.thc02 .onChar17{display:inline-block;-webkit-animation:typing01 2.15s ease;animation:typing01 2.15s ease}.thc02 .onChar18{display:inline-block;-webkit-animation:typing01 2.2s ease;animation:typing01 2.2s ease}.thc02 .onChar19{display:inline-block;-webkit-animation:typing01 2.25s ease;animation:typing01 2.25s ease}.thc02 .onChar20{display:inline-block;-webkit-animation:typing01 2.3s ease;animation:typing01 2.3s ease}.thc02 .onChar21{display:inline-block;-webkit-animation:typing01 2.35s ease-in-out;animation:typing01 2.35s ease}.thc02 .onChar22{display:inline-block;-webkit-animation:typing01 2.4s ease;animation:typing01 2.4s ease}.thc02 .onChar23{display:inline-block;-webkit-animation:typing01 2.45s ease;animation:typing01 2.45s ease}.thc02 .onChar24{display:inline-block;-webkit-animation:typing01 2.5s ease;animation:typing01 2.5s ease} @media (max-width: 480px) { #scanningST .thc02 .onChar7 { width: 48vw !important} } @media (max-width: 440px) { #scanningST .thc02 .onChar7 { width: 43.75vw !important} } @media (max-width: 400px) { #scanningST .thc02 .onChar7 { width: 39vw !important} } @media (max-width: 365px) { #scanningST .thc02 .onChar7 { width: 35vw !important} } @media (max-width: 340px) { #scanningST .thc02 .onChar7 { width: 32.5vw !important} } /* ------------------------------------------- Displey Setting ------------------------------------------- */ .homeLink, #bottomLogo, #ORName, .BLName { text-indent: 400%; white-space: nowrap; overflow: hidden} .homeLink, #globalNav a, #returnBT a, .SFCItem { text-decoration: none; display: block; cursor: pointer; overflow: hidden} #globalNav a { overflow: visible} #globalNav .current { cursor: default} /* ------------------------------------------- Clearfix ------------------------------------------- */ .clearfix:after { content: ""; clear: both; display: block; height: 0}