@charset "utf-8";
/* -------------------------------------------
  Auther: design studio tom'sOne / Tommy Tsutsui / https://toms1.net/
  Issued in: 05/Jun/2024 / Last modefied: 05/Jun/2024
------------------------------------------- */

/* -------------------------------------------
  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 */


/* -------------------------------------------
  Fonts
------------------------------------------- */
body, button {
  font-family: -apple-system, "Noto Sans JP", "游ゴシック体", 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; font-optical-sizing: auto; font-style: normal}

.NS400, .FNItem, .botAItem, .ONItem, #mfp_phase_confirm td, #copyright { font-weight: 400}

.NS500, .footCatch, .TNNItem, .TWClient, .TWKind, .compLDD, .WIkind, .DIInfo, .NLCopy, button { font-weight: 500}

.NS600, #globalNav, #topCatch, .TECopy, .TSTJP, .PTJP, .indPTJP, .pageST, .TMessageCopy, .compLDT, .WCItem,
.formProgress, #mfp_phase_confirm h4, #mfp_phase_confirm th,
.newsBody h2, .newsBody h3, .newsBody h4, .newsBody h5 { font-weight: 600}

.NS700 { font-weight: 700}

.figtree, .FI400, .FI500, .FI600, .FI700, .FI800, .topST, .ONItem em, .linkBT01, .PSTEn, .TWTime, .WTime, .TNNTime, .PTEn, .NLTime {
  font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-style: normal}

.FI400, .HNMenuSign, .NLTime, .newsTime { font-weight: 400}
.FI500, .ONItem em, .PSTEn, .linkBT01, .TWTime { font-weight: 500}
.FI600, .PTEn .LBT01, .TECap01, .TECap02, .TECap03 { font-weight: 600}
.FI700, .PNPName, .indPTEn { font-weight: 700}
.FI800, .JTypeST::after { font-weight: 800}


/* -------------------------------------------
  Common
------------------------------------------- */
* {min-height: 0vw}

body {
  position: relative; color: #333; background: #fff; -webkit-text-size-adjust: 100%; font-size: 1rem;
  line-height: 1; width: 100%; min-width: 1120px; height: 100%; position: relative; z-index: 1}

.mag0 { margin: 0 !important} .mag20 { margin-top: 20px !important} .mag50 { margin-top: 50px !important}
.magLM02 { margin-left: -.25em !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} .ls12 { letter-spacing: .125em !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}

.lsM01 { letter-spacing: -.01em !important} .lsM02 { letter-spacing: -.025em !important}
.lsM05 { letter-spacing: -.05em !important} .lsM07 { letter-spacing: -.075em !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}

.lsW03 { margin: 0 3px !important}
.lsN01 { margin: 0 -1px !important} .lsN02 { margin: 0 -2px !important}
.lsEM02 { margin: 0 -.2em !important} .lsEM03 { margin: 0 -.35em !important}

#topST02 .onChar9 { font-size: 2.6rem; font-weight: 300; vertical-align: 14px}

.patent01 { font-size: 2.4rem; font-weight: 300}
.patent02 { color: #555; font-size: 2rem; font-weight: 300; margin-right: -2px; vertical-align: 5px;}

.patentCopyright { font-size: 1.8rem; font-weight: 300; vertical-align: 1px; margin-right: 3px}

figure img { width: 100% !important; height: auto; vertical-align: top}


/* Common Image */
.homeLink, .ANlangSign, .FANlangSign, .ANInstaLink, .FNInstaLink, .ORInstaLink, .botHomeLink, .BATMark, #ORLogo, .accTmark {
 background-image: url(../common_im/common.svg); background-repeat: no-repeat; background-size: 186px 150px}

/* Flex Container
------------------------------------------- */
.flexC, #headNav, .ANList, #globalNav, .formProgress {
  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
------------------------------------------- */
#globalHeader {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 99px; margin: 0; -webkit-transition: all .6s; transition: all .6s}

.GHInner {
  background: rgba(255,255,255,.75); width: 100%; height: 100%; margin: 0 auto; position: relative; z-index: 100}
.GHInner:hover { background: rgba(255,255,255,.95)}

#homeLogo { position: fixed; top: 29px; left: 5vw; width: 173px; margin: 0; z-index: 9999}

.homeLink { background-position: 0 0; width: 173px; height: 42px; display: block; position: relative; opacity: 1}
.homeLink:hover { opacity: .7}

.fixed #homeLogo { position: fixed; top: 20px; width: 120px; height: 34px}
.fixed .homeLink { background-size: 150px auto; width: 140px; height: 34px}

#headNav {
  position: absolute; top: 40px; right: calc(100px + 3.5vw); -webkit-flex-flow: column; flex-flow: column; align-items: flex-end;
  width: 52%; min-width: 600px; max-width: 760px; height: 36px; z-index: 999}

/* Global nav */
#GNav { position: absolute; bottom: 0; right: 0; width: 100%}

#globalNav { font-size: 1.5rem; letter-spacing: .06em; margin: 0; padding: 0}

.GNON { letter-spacing: .05em; margin: 0; white-space: nowrap; display: block; position: relative}

#globalNav a { color: #555; text-decoration: none; padding: 7px 0}
#globalNav a:hover { color: #2299a7}

#globalNav .current { position: relative}
#globalNav .current, #globalNav .current:hover { color: #f55e00}

.current:after {
  content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 0; margin-left: -4px; display: block;
  border-style: solid; border-width: 5px 4px 0 4px; border-color: #f57e00 transparent transparent transparent}

#globalHeader.fixed {
 position: fixed; top: 0; left: 0; background: rgba(255,255,255,.95);
 min-height: 0; height: 60px; overflow: visible; z-index: 9999}

.ANInstaLink { background-position: 0 -120px; width: 25px; height: 25px; margin-top: -4px; display: block}

.FNInsta, .ORInsta { width: 100%; height: 30px; margin: 75px 0 0; position: relative}
.ORInsta  { margin-top: 50px}
.FNInstaLink, .ORInstaLink { background-position: -50px -120px; width: 30px; height: 30px; display: block}
.FNInstaLink { position: absolute; top: 0; right: 0}
.ORInstaLink { margin: 0 auto; opacity: .85}

.ANInstaLink:hover, .FNInstaLink:hover, .ORInstaLink:hover {
  opacity: .7; -webkit-transform: translate(2px,-2px); transform: translate(2px,-2px)}
.ORInstaLink:hover { opacity: .55}

#GNLine {
  position: absolute; bottom: 10px; height: 2px; background-color:#f57e33;
  -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index: 9960}

/* Overlay Navi */
#trigger-overlay {
  position: fixed; top: 0; right: 0; text-decoration: none; width: 100px; height: 100px; display: block; z-index: 9999}

.HMBox { position: fixed; top: 34px; right: 32px; width: 36px; height: 34px}

#trigger-overlay::before, #trigger-overlay::after {
  content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; display: block}
#trigger-overlay::before { background: rgba(20,104,173,.9); z-index: -2}
#trigger-overlay::after { background: rgba(0,150,160,.9); -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)}

.menu-trigger, .menu-trigger span { display: inline-block; box-sizing: border-box}

.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: 4px; 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: 10px; -webkit-transition-delay: .08s; transition-delay: .08s}
.menu-trigger .HMBar:nth-child(3) { width: 27px; top: 20px; -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)}

.HNMenuSign {
  color: #fff; font-size: 1.1rem; text-align: center; letter-spacing: .1em; text-indent: .05em;
  width: 100%; margin-top: 75px; display: block; position: relative}

.fixed #trigger-overlay::before, .fixed #trigger-overlay::after { width: 80px; height: 80px}
.fixed .HMBox { top: 24px; right: 22px}
.fixed .HNMenuSign { display: none}

/* Overlay */
.overlay {
  position: fixed; top: 0; right: 0; background: rgba(45,45,45,.95);
  width: 100%; height: 100vh; overflow: auto; z-index: 9980;
  -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px)}

/* 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: 300px; margin: 0 auto; padding: 4vw;
  -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%)}

.ORNav { position: relative}

.overlayNav { margin: 0; padding: 0}

.ONItem { font-size: 1.6rem; letter-spacing: .12em; margin: 20px 0}
.ONItem:first-of-type { margin: 0}

.ONItem em { color: #b5b5b5; font-size: 1.4rem; font-style: normal; padding-top: 2px; float: right}

.ONCI { margin: 5px 0 0}

.ONKind { color: #f7dd99; padding: 0 15px 10px .6em; display: inline-block; position: relative}

.ONKind::after { content: ''; position: absolute; top: 50%; right: 0; background: #f7dd99; margin-top: -8px;
  width: 8px; height: calc(8px / 2 * tan(60deg)); display: inline-block; opacity: .65; clip-path: polygon(0 0, 100% 0, 50% 100%)}

.ONItem a {
  background: inherit; color: #e5e5e5; text-decoration: none; padding: 8px 10px 10px;
  position: relative; display: block; cursor: pointer; overflow: hidden}
.ONItem a:hover { color: #fff} .ONItem a:hover em { color: #d9d9d9}

.ONItem a::before {
  content: ''; position: absolute; top: 0; left: auto; right: 0; z-index: -1; background: rgb(0,150,160);
  width: 0; height: 100%; border-radius: 2px; display: block}
.ONItem a:hover::before { left: 0; right: auto; width: 100%}

.ORActionNav { width: 230px; margin: 30px auto 0}

.ORAppDownload { width: 300px; margin: 40px auto 0}

#ORLogo {
  background: url(../common_im/jp_logo.svg) no-repeat 0 0 / cover; width: 254px; height: 40px; margin: 50px auto 0; opacity: .8}

/* -------------------------------------------
 Footer
------------------------------------------- */
footer { background: #222; padding: 70px 5% 90px; position: relative; z-index: 1}

#footInner { max-width: 1600px; margin: 0 auto}

/* Bottom ID */
.footLeft { width: 39%; max-width: 385px}
.footRight { width: 52%; max-width: 580px}

.footCatch { color: #ddd; font-size: 1.4rem; letter-spacing: .04em; margin: 0;}

#botLogo { width: 186px; margin: 50px 0 0}
#botLogo:hover { opacity: .7; -webkit-transform: translate(3px,-3px); transform: translate(3px,-3px)}

.botHomeLink { background-position: 0 -50px; width: 186px; height: 60px; display: block; cursor: pointer}

#bottomAdd { margin: 50px 0 0; padding: 0}

.botAItem { color: #ddd; font-size: 1.5rem; letter-spacing: .05em; margin: 0}
.BAITel { margin-top: 1em}

.BAITLink { color: #ddd; text-decoration: none; padding-left: 18px; display: inline-block; position: relative}

.BATMark {
  position: absolute; top: 2px; left: 2px; background-position: -100px -120px; width: 12px; height: 14px; display: block}
  
.BAITLink:hover { color: #7ed2e5; -webkit-transform: translate(1px,-1px); transform: translate(1px,-1px)}
.BAITLink:hover .BATMark { -webkit-transform: translate(2px,-1px) rotate(25deg); transform: translate(2px,-1px) rotate(25deg)}

.botFax { padding-left: 20px}

.FNList { margin: 0; padding: 0}

.FNItem { font-size: 1.5rem; letter-spacing: .06em; display: block}

.FNLink { color: #c2c2c2; text-decoration: none; padding-bottom: 9px; display: block; position: relative; cursor: pointer; overflow: hidden}

#footAddress { margin-top: 48px}

#copyright { color: #c2c2c2; font-size: 1.5rem; text-align: right; letter-spacing: .08em; width: 100%; margin: 74px 0 0; display: block}

/* -------------------------------------------
  Return Button
------------------------------------------- */
#returnBT { position: fixed; bottom: 0; right: 0; margin: 0; z-index: 9999}

#retTop { margin: 0; position: relative}

#retTop::before, #retTop::after {
 content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: block;
 z-index: -1; -webkit-transform-origin: center; transform-origin: center}
#retTop::before { background: rgba(105,105,105,.85)}
#retTop::after { background: rgba(0,160,175,.9); -webkit-transform: scale(0); transform: scale(0)}
#retTop:hover::before { -webkit-transform: scale(0); transform: scale(0)}
#retTop:hover::after { -webkit-transform: scale(1); transform: scale(1)}

#retTop a { color: #fff; width: 90px; height: 70px; margin: 0; text-indent: -9999px; position: relative}

#retTop a::before {
 content: 'page top'; position: absolute; bottom: 23px; left: 0; display: block; cursor: pointer; z-index: 1000;
 color: #fff; font-size: 12px; text-align: center; text-indent: .089em; letter-spacing: .08em; 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: 20px}


/* -------------------------------------------
 Banner Area
------------------------------------------- */
#mainBanner, #botomBanner { margin-top: 6px; padding-top: 6px; border-top: 1px solid #bbb}
#pageMainBanner { margin-top: 6px}

.MBItem { width: calc(50% - 3px); margin: 0; position: relative}
.BBItem { width: calc(33.33% - 4px); margin: 0; position: relative}

.MBLink, .BBLink { text-decoration: none; padding: 60px 0; display: block; cursor: pointer; overflow: hidden}
.BBLink { padding: 82px 0}

.MBLink::before, .MBLink::after, .BBLink::before, .BBLink::after { content: ''; position: absolute; top: 0; height: 100%}
.MBLink::before, .BBLink::before { left: 0; width: 100%; z-index: -2}
.MBLink::after, .BBLink::after { left: auto; right: 0; background: #0099a2; width: 0; z-index: -1}

.MBTRAVELERS::before { background: #eee}
.MBAccomodation::before { background: #444}

.BBQA::before { background: #555}
.BBCompany::before { background: #909090}
.BBContact::before { background: #f7f7f7; border: 1px solid #ccc; border-right: none}

.MBLink:hover::after, .BBLink:hover::after { left: 0; right: auto; width: 100%}

.MBCopy, .BBCopy { text-align: center; margin: 0}

.MBSubCatch, .MBMainCatch, .MBENCopy, .BBEN, .BBJP { display: block}

.MBSubCatch { font-size: 1.8rem; letter-spacing: .035em;}
.MBTRAVELERS .MBSubCatch, .MBTRAVELERS .MBMainCatch { color: #333}
.MBAccomodation .MBSubCatch, .MBAccomodation .MBMainCatch { color: #e9e9e9}

.MBMainCatch { font-size: 3.6rem; letter-spacing: .05em; margin-top: 22px}

.MBENCopy { font-size: 2.4rem; font-style: normal; letter-spacing: .1em; margin-top: 20px}
.MBTRAVELERS .MBENCopy { color: #f96600}
.MBAccomodation .MBENCopy { color: #aed7f5}

.MBTRAVELERS:hover .MBSubCatch, .MBTRAVELERS:hover .MBMainCatch { color: #f5f5f5}

.BBEN { font-size: 3.4rem; letter-spacing: .05em; } .BBJP { font-size: 1.9rem; margin-top: 23px}

.BBQA .BBEN, .BBQA .BBJP { color: #e9e9e9} 
.BBCompany .BBEN, .BBCompany .BBJP { color: #fff} 
.BBContact .BBEN, .BBContact .BBJP { color: #444} 

.MBCurrent { opacity: .6; cursor: default}
.MBTRAVELERS.MBCurrent::before { background: #888}
.MBCurrent::after { display: none}

.MBCurrent.MBTRAVELERS:hover .MBSubCatch, .MBCurrent.MBTRAVELERS:hover .MBMainCatch { color: inherit}
.BBContact:hover .BBEN, .BBContact:hover .BBJP { color: #fff}

/* -------------------------------------------
 Main Container
------------------------------------------- */
/* Container
------------------------------------------- */
#topStage, #stage { background: transparent; position: relative; overflow: hidden}
#stage { padding-top: 100px; border-top: 1px solid #bbb;}
#stage::before { content: ''; position: absolute; top: 99px; left: 0; background: #bbb; width: 100vw; height: 1px}

.TSInner { max-width: 1540px; margin: 0 auto; padding: 5vw; position: relative}
.topSec { border-top: 1px solid #bbb}

.PTWrapp { width: calc(50% - 5vw - 20px); padding-left: 5vw}
.PTWrapp02 { width: calc(100% - 5vw); padding-left: 5vw}

.pageWrapp { width: 100%; margin: 0; border-top: 1px solid #bbb}

.pageNamePlate { width: 69px; padding-top: 35px; border-right: 1px solid #bbb}

.PNPName { color: #555; font-size: 2rem; writing-mode: vertical-rl; text-align: center; letter-spacing: .1em; margin: 0 auto;}

.pageContents { width: calc(100% - 70px); overflow: hidden}

.pageWrapp01 { padding: 80px 5vw 74px}
.pageWrapp02 { padding: 80px 5vw 74px; border-top: 1px solid #bbb}

.pageSec { max-width: 1340px; margin: 0 auto; position: relative}

.BGGray { background: #e9e9e9}

.MG0 { margin-top: 0 !important} .MG01 { margin-top: 1em !important} .MG20 { margin-top: 20px !important}
.MG30 { margin-top: 30px !important} .MG40 { margin-top: 40px !important} .MG50 { margin-top: 50px !important}
.MG60 { margin-top: 60px !important} .MG70 { margin-top: 70px !important} .MG80 { margin-top: 80px !important}
.MG90 { margin-top: 90px !important} .MG100 { margin-top: 100px !important}


/* Breadcrum Navi
------------------------------------------- */
.breadcrumb { width: 100%; border-top: 1px solid #bbb}

.BreadcrumbNav { max-width: 1600px; margin: 0 auto; height: 50px; padding: 0; position: relative}

.BreadcrumbList { position: absolute; top: 0; right: 70px; display: inline-block;}

.BCLink, .BCCurrent { font-size: 1.4rem; letter-spacing: .05em; padding: 8px 0; display: inline-block;}

.BCLink { position: relative}

.BLSign { content: ">"; color: #666; font-size: 1.5rem; text-align: center; width: 2.5em; margin-top: -3px; display: inline-block}

.BreadcrumbList a {
  color: #333; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid #7eaebb;
  display: inline-block; position: relative}

.BreadcrumbList a:hover { color: #39b; border: none}


/* Page Eyecatch
------------------------------------------- */
.pageEC { background-repeat: no-repeat; width: calc(50% - 35px); height: 500px; position: relative; z-index: 1}

#travelresEC { background: url(../travelers/images/eyecatch02.webp) no-repeat center / cover}
#accomodationEC { background: url(../partnership/images/eyecatch02.webp) no-repeat center / cover}

.no-webp #travelresEC { background: url(../travelers/images/eyecatch02.jpg) no-repeat center / cover}
.no-webp #accomodationEC { background: url(../partnership/images/eyecatch02.jpg) no-repeat center / cover}


/* Page Titles
------------------------------------------- */
.pageTitle { margin: 110px 0 0}

.officialPTitle { margin: 126px 0 134px}

.individualTitle { margin: 86px 0 94px;}

.PTEn, .indPTEn { font-size: 6rem; letter-spacing: .06em; font-style: normal}
.indPTEn { font-size: 4.2rem}

#travelersPTE, .officialPT { color: #333}
#accPTE { color: #2e4e7e; letter-spacing: .02em}

.PTJP, .indPTJP { color: #1e7ecc; font-size: 2.5rem; letter-spacing: .04em; margin-top: 15px; display: block}
.indPTJP { font-size: 1.9rem; letter-spacing: .1em}

/* Sub Titles
------------------------------------------- */
.topST, .pageST { color: #333; margin: 0; padding: 5px 15px 1px 15px; display: inline-block; position: relative}
.topST { font-size: clamp(5.2rem,4vw,6.4rem); letter-spacing: .04em; margin: 0 0 24px}
.pageST { font-size: 4.2rem; letter-spacing: .035em; width: fit-content; margin: 0 0 18px; padding: 10px 15px 15px 15px; overflow: visible}

.topST::before, .topST::after, .pageST::before, .pageST::after, #worksCatTit::before, #worksCatTit::after {
  content: ''; position: absolute; width: .8rem; height: .8rem}
.topST::before, .pageST::before, #worksCatTit::before {
  top: 0; left: 0; border-top: #f1352b solid .3rem; border-left: #f1352b solid .3rem; border-radius: .2rem 0 0 0}
.topST::after, .pageST::after, #worksCatTit::after {
  bottom: 0; right: 0; border-bottom: #f1352b solid .3rem; border-right: #f1352b solid .3rem; border-radius: 0 0 .2rem 0}

.TSTJP { position: absolute; bottom: -24px; left: 15px; color: #1e7ecc; font-size: 1.9rem; display: block}
.PSTEn {
  position: absolute; bottom: -18px; left: 18px; color: #999;
  font-size: 1.7rem; font-style: normal; letter-spacing: .08em; white-space: nowrap; margin: 14px 0 0; display: block}

.st18, .st20, .st22, .NTLST, .MDHST, .MDHST02 { letter-spacing: .06em; margin: 0}
.st18 { font-size: 1.8rem}
.st20 { font-size: 2rem}
.st22, .NTLST { font-size: 2.2rem}

.NTLST { margin-top: 45px}

.stCenter, .PCopyCenter { text-align: center}


/* Page Copy
------------------------------------------- */
.PCopy16, .PCopy17, .PCopy18, .PCopy19 { letter-spacing: .06em}
.PCopy16 { font-size: 1.6rem}
.PCopy17 { font-size: 1.7rem}
.PCopy18 { font-size: 1.8rem}
.PCopy19 { font-size: 1.9rem}
.PCopy20 { font-size: 2rem}
.PCopy22 { line-height: 2; letter-spacing: .05em}
.PCopy22 { font-size: 2.2rem}

.PTTPad01 { margin: 0; padding-top: 1em !important}

.PTTPad10 { margin: 0; padding-top: 10px !important}
.PTTPad20 { margin: 0; padding-top: 20px !important}
.PTTPad25 { margin: 0; padding-top: 25px !important}
.PTTPad30 { margin: 0; padding-top: 30px !important}
.PTTPad40 { margin: 0; padding-top: 40px !important}
.PTTPad50 { margin: 0; padding-top: 50px !important}
.PTTPad60 { margin: 0; padding-top: 60px !important}

/* Nav Sign
------------------------------------------- */
.sign01, .sign02 {
  width: 22px; height: 22px; margin-left: 7px; vertical-align: -4px; border-radius: 50%; display: inline-block; position: relative}
.sign01 { background: #459ee5}

.sign01::before, .sign01::after, .sign02::before, .sign02::after { content: ''; position: absolute; top: 50%; height: 2px}
.sign01::before, .sign02::before { left: 6px; width: 10px; margin-top: -1px}
.sign01::before, .sign01::after { background: #fff}
.sign02::before, .sign02::after { background: #37b2e7}
.sign01::after { right: 7px; width: 4px; margin-top: -3px; -webkit-transform: rotate(45deg); transform: rotate(45deg)}

/* Link Button
------------------------------------------- */
.linkBT01 { font-size: 2.1rem; letter-spacing: .1em; text-indent: .1em; text-align: center}

.TWorksBT { margin: 40px 0 0}
.TRecBT { position: absolute; bottom: 0; left: 0; margin: 0}
.TNewsBT { position: absolute; bottom: 5vw; left: 5vw; margin: 0}

.LBT01 { color: #fff; text-decoration: none; width: 30.75%; padding: 15px 0 14px; display: block; position: relative; z-index: 1}
.TWorkLBT { width: 30.75%; margin: 0 auto}
.TRecLBT { width: 27.675vw; max-width: 474px; margin: 0}

.LBT01:hover { letter-spacing: .4em; text-indent: .4em; -webkit-transform: translate(1px,-1px); transform: translate(1px,-1px);}

.LBT01::before, .LBT01::after { content: ''; position: absolute; top: 0; left: 0; height: 100%}
.LBT01::before { background: #666; width: 100%; z-index: -2}
.LBT01::after { right: auto; background: #4985bb; width: 0; z-index: -1}

.LBT01:hover::after { width: 100%}


/* -------------------------------------------
 Loader
------------------------------------------- */
#tp-loader { position: fixed; top: 0; left: 0; background: #e2e2e2; width: 100vw; height: 100vh; z-index: 100}
 
#loader {
 position: absolute; top: 50%; left: 50%; color: #fff; text-align: center;
 width: 200px; margin: 15px 0 0 -100px; z-index: 101}

@-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg)}}
@keyframes loader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.loader {
 width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; display: inline-block; vertical-align: middle;
 border: solid .25rem #f5f5f5; border-top-color: #ff6347; border-left-color: #ff6347;
 -webkit-border-radius: 50%; border-radius: 50%;
 -webkit-animation: loader 750ms linear infinite; animation: loader 750ms linear infinite}

 /* -------------------------------------------
 Slider Revolution
------------------------------------------- */
.tp-static-layers{position:absolute;z-index:505;top:0;left:0}.tp-caption.tp-hidden-caption,.tp-hide-revslider{visibility:hidden!important;display:none!important}.tp-caption{z-index:1;white-space:nowrap}.tp-caption-demo .tp-caption{position:relative!important;display:inline-block;margin-bottom:10px;margin-right:20px!important}.tp-simpleresponsive .caption,.tp-simpleresponsive .tp-caption{position:absolute;visibility:hidden;-webkit-font-smoothing:antialiased!important}.tp-simpleresponsive img{max-width:none}.tpclear{clear:both}.tp-bullets{z-index:1000;position:absolute;opacity:1;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;-webkit-transform:translateZ(5px);transform:translateZ(5px)}.tp-bullets.hidebullets{opacity:0}.tp-bullets.simplebullets.round{height:21px}.tp-bullets.simplebullets.round .bullet{cursor:pointer;position:relative!important;background:rgba(0,0,0,.5)!important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;width:5px!important;height:5px!important;border:8px solid transparent!important;display:inline-block;margin-right:5px!important;margin-bottom:0!important;-webkit-transition:background-color .2s,border-color .2s;transition:background-color .2s,border-color .2s;float:none!important;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}.tp-bullets.simplebullets.round .bullet.last{margin-right:0}.tp-bullets.simplebullets.round .bullet.selected,.tp-bullets.simplebullets.round .bullet:hover{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:#666!important;width:5px!important;height:5px!important;border:8px solid rgba(255,255,255,1)!important}.tparrows{opacity:1;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;-webkit-transform:translateZ(5000px);transform:translateZ(5000px);-webkit-transform-style:flat;transform-style:flat;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:600;position:relative}.tp-leftarrow.default,.tp-rightarrow.default{z-index:100;cursor:pointer;position:relative;width:40px;height:40px}.tparrows.hidearrows{opacity:0}.tp-leftarrow.default{background:url(assets/large_left.png)}.tp-rightarrow.default{background:url(assets/large_right.png)}.tp-leftarrow:hover,.tp-rightarrow:hover{background-position:bottom left}.tp-bannertimer{width:100%;height:5px;background:url(assets/timer.png);position:absolute;z-index:200;top:0}.tp-bannertimer.tp-bottom{bottom:0;height:5px;top:auto}@media only screen and (min-width:0px) and (max-width:479px){.responsive .tp-bullets,.responsive .tparrows{display:none}}.tp-loader{top:50%;left:50%;margin-top: 51px !important;z-index:100;position:absolute}.tp-loader.spinner3{margin:-9px 0 0 -35px;width:70px;text-align:center}.tp-loader.spinner3 .bounce1,.tp-loader.spinner3 .bounce2,.tp-loader.spinner3 .bounce3{width:18px;height:18px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);border-radius:100%;display:inline-block;-webkit-animation:tp-bouncedelay 1.4s infinite ease-in-out;animation:tp-bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.tp-loader.spinner3 .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.tp-loader.spinner3 .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes tp-bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes tp-bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}

/* BANNER CONTAINERS */
.tp-bannertimer { display: none}

.tp-banner-container, .tp-banner { width:100vw; position: relative; overflow: hidden}
.tp-banner-container { position: relative}

.tp-banner-container, .tp-banner-fullscreen-container { padding:0}

.tp-banner ul { margin: 0; padding: 0}

.tp-leftarrow.default, .tp-rightarrow.default { margin-top: 0px !important}

.tp-bullets { bottom: 30px !important}

.topMovie { 
  width:100vw; height: auto; min-height: 800px !important}

@media (max-width: 1440px) { .topMovie { width: auto; height: 100% !important; min-height: inherit !important} }

/* -------------------------------------------
 Top Page
------------------------------------------- */
/* Top Eyecatch */
#topEyecatch { width: 100%; overflow: hidden}

.TECopy, #topHeadCopy, .TECap01, .TECap02, .TECap03, #topCatch, #sp-topCatch { position: absolute; left: 6vw; margin: 0}

.TEC01, .TEC02, .TEC03, #topCatch {
  top: 60%; color: #f7f7f7; font-size: clamp(2.8vw,5.2rem,3.3vw);
  text-shadow: 0 0 5px rgba(0,0,0,.6); letter-spacing: .04em !important}

.TEC02 { margin-top: 4.5% !important}
.TEC03 { margin-top: 9%!important}


.TECap01, .TECap02, .TECap03 { top: 60%; font-size: 1.4vw; letter-spacing: .06em !important;}
.TECap01 { color: #f7f7f7; margin-top: 9.75% !important}
.TECap02 { color: #000; margin-top: 13.75% !important}

.TECBlack { color: #000; text-shadow: -1px -1px 3px rgba(255,255,255,.7)}

@media (min-width: 1540px) {
  .TEC01, .TEC02, .TEC03, .TEC04, .TECap01, .TECap02, .TECap03 { top: 55%}
  .TEC02 { margin-top: 4.1% !important} .TEC03 { margin-top: 8.1%!important}
  .TECap01 { color: #f7f7f7; margin-top: 9% !important} .TECap02 { color: #000; margin-top: 13% !important}
}

#sp-topCatch { top: 55vh; color: #e2e2e2; font-size: 7.5vw; letter-spacing: .2em}
.thc02, .thc03 { margin-top: 1.8vw; display: block}
.thc03 { font-size: 1.8vw}
.thc03 .onChar5 { width: 7px; letter-spacing: 0}

#TEVideo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  
  min-width: auto; height: 100% !important; z-index: 1; overflow: hidden}

.TVOverlay {
  position: absolute; top: 0; left: 0; background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 50%);
  background-size: 3px 3px; width: 100%; height: 800px; z-index: 2}

/* Top About and Top Works */
#topAboutST .onChar10 { width: 1.4vw}

.topAboutLogo {
  position: absolute; top: 5vw; right: 5vw; background: url(../common_im/jp_logo.svg) no-repeat 0 0;
  width: 500px; height: 79px; margin: 0}

.topAboutCopy { margin: 0; padding-top: clamp(60px,5vw,70px)}

.TAboutList, .TWorksList { margin: 60px auto 0; padding: 0}

.TALItem, .TWLItem { width: 30.75%}

.TALLink { color: #333; text-decoration: none}

.TALImage, .TWLImage { width: 100%; height: auto; display: block; position: relative; overflow: hidden; z-index: 1}
.TALImage::before, .TWLImage::before, .TWLImage::before, .TWLImage::after {
  content: ''; position: absolute; top: 0; left: 0; right: auto;
  background: rgba(0,0,0,.4); width: 0; height: 100%; display: block; z-index: 2}

.TALCap { position: absolute; bottom: 10px; left: 10px; color: #fff; font-size: 3.4rem; letter-spacing: .04em; z-index: 5}

.TALName { font-size: 1.8rem; letter-spacing: .06em; margin: 10px 0 0; display: block}

.TWLLink { text-decoration: none}

.TWLName, .WLName { font-size: 1.7rem; letter-spacing: .05em; margin: 20px 0 0}
.WLName { font-size: 1.8rem}

.TWClient { color: #333; margin-bottom: 7px; display: block}

.TWTime, .WTime { color: #777; font-size: 1.4rem}
.WTime { font-size: 1.5rem}
.TWHyphen { color: #777; font-size: 1.2rem; margin: 0 6px 0 5px; vertical-align: 1px; display: inline-block}
.TWKind, .WKind { color: #777; font-size: 1.5rem}
.WKind { font-size: 1.5rem}

.TALLink:hover .TALImage::before, .TWLLink:hover .TWLImage::before { width: 100%}
.TWLLink:hover .TWLIM { -webkit-transform: scale(1.2); transform: scale(1.2);}
.TALLink:hover .TALCap { font-size: 4.8rem; -webkit-transform: translate(10px,-4px); transform: translate(10px,-4px);}
.TALLink:hover .sign01, .TWLLink:hover .TWLName { transform: translateX(10px); -webkit-transform: translateX(10px)}
.TALLink:hover .TALName, .TWLLink:hover .TWClient { color: #1e7ecc}
.TWLLink:hover .TWKind, .TWLLink:hover .WKind { color: #fa5e00}

/* Top recruit */
.topRecruit { height: 480px; position: relative; overflow: hidden;}

.TRecImage { position: absolute; top: 0; right: 0; width: 68%; height: 480px; z-index: -1}
.TRecImage img {
  position: absolute; top: 50%; left: 50%; width: auto; height: 100%;
  -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.TRecInfo { position: absolute; bottom: 0; left: 0; background: #fff; width: 48%; height: 280px; z-index: 1;}

.TRecCopy {font-size: 1.7rem; line-height: 2; letter-spacing: .06em; margin: 0; padding: 60px 62px 0 0;}

/* Top News */
#topNews { align-items: start}

.TNewsNav { width: 64%}

.TNNList { margin: 0; padding: 0; border-bottom: 1px solid #bbb}

.TNNItem { font-size: 1.6rem; letter-spacing: .06em; margin: 0; border-top: 1px solid #bbb}
.TNNItem::after { clear: both}

.TNNTime { float: right; color: #666;}

.TNNLink { color: #333; text-decoration: none; padding: 34px 15px; display: block; position: relative; cursor: pointer; overflow: hidden}
.TNNLink:hover { color: #005970; -webkit-transform: translate(1px,-1px); transform: translate(1px,-1px)}

.TNNLink::after {
  content: ''; position: absolute; top: 0; left: 0; right: auto;
  background: #aed7e2; width: 0; height: 100%; display: block; z-index: -1}
.TNNLink:hover::after { width: 100%}

.TNIndexBT { position: absolute; bottom: 0; left: 0; font-size: 1.6rem; letter-spacing: .05em; text-indent: .02em}

.TNILink {
  color: #555; text-decoration: none; padding: 12px 16px 13px 15px; border: 1px solid #a7a7a7;
  display: block; cursor: pointer; overflow: hidden}
.TNILink:hover { color: #fff; border-color: transparent; -webkit-transform: translateY(-2px); transform: translateY(-2px)}

.TNILink::after {
  content: ''; position: absolute; top: 0; left: 0; right: auto;
  background: #0099a2; width: 0; height: 100%; display: block; z-index: -1}
.TNILink:hover::after { width: 100%}


/* -------------------------------------------
 Service
------------------------------------------- */
.serviceInfo { display: flex; flex-direction: column; width: calc(100% - 580px)}

.serviceStIco {
  position: absolute; top: 8px; left: 240px;
  background: url(../service/images/seevice_ico.svg) no-repeat 0 0 / 54px 174px; width: 54px; height: 54px; display: block}
#SSIco02 { background-position: 0 -60px}
#SSIco03 { background-position: 0 -120px}

.serviceCopy { font-size: 1.7rem; letter-spacing: .06em; line-height: 2; margin-top: auto;}

.serviceIM01 { width: 500px; height: 350px}

.serviceGallery { max-width: 1340px; margin: 3.25% auto 0}

.serviceIM02 { width: 31%}
.SIM01, .SIM02, .appPortIM { width: 100%; height: auto}

#appPort { padding-bottom: 10px}

.appPortInfo { font-size: 2.4rem; letter-spacing: .07em; margin: 0}

.applicablePortion { width: 800px; height: 480px; margin: 50px auto 0; display: block}
.applicablePortion, .appPortIM { border-radius: 40px}

@media (min-width: 1600px) { .serviceGallery { margin-top: 3%} }
@media (min-width: 1720px) { .serviceGallery { margin-top: 2.75%} }
@media (min-width: 1950px) { .serviceGallery { margin-top: 42px} }

/* -------------------------------------------
 COMPANY
------------------------------------------- */
.TMessageCopy { color: #555; font-size: 1.7rem; line-height: 2.2; letter-spacing: .06em; max-width: 52.75em; margin: 2em auto 0}
.TMessageCopy:first-of-type { margin-top: 70px}
.TMCSignature { text-align: right}

#compOverview { align-items: start; padding-bottom: 20px}

.compST { width: 200px}

.compListBox { width: calc(100% - 340px)}

.compList { margin: 0; padding: 0}

.compList { color: #595959; font-size: 1.6rem; line-height: 1.8; letter-spacing: .075em}

.compLDT { width: 140px; margin: 0; padding: 22px 0 21px 10px; border-top: 2px solid #1e7ecc}
.compLDT:last-of-type { border-bottom: 2px solid #1e7ecc}

.compLDD { width: calc(100% - 160px); margin: 0; padding: 21px 0 20px 10px; border-top: 1px solid #bbb}
.compLDD:last-of-type { border-bottom: 1px solid #bbb}

/* Access */
#accDetail { margin: 50px auto 0}

.accMeta { width: 380px; padding-left: 15px; position: relative}

.accessCopy { font-size: 1.5rem; line-height: 2; letter-spacing: .06em; margin: 50px 0 0}
.aCCKind { font-size: 1.6rem}

.accTelNum { font-size: 1.6rem; font-style: normal}

.accLink { color: #333; text-decoration: none; vertical-align: -.04em; padding-left: 17px; cursor: pointer; position: relative; overflow: hidden}
.accLink:hover { color: #1e8eb7}

.accTmark {
  position: absolute; top: 6px; left: 2px;
  background-position: -100px -120px; width: 12px; height: 14px; display: inline-block}

.accLink:hover .accTmark { -webkit-transform: rotate(12deg) translate(3px,-1px); transform: rotate(12deg) translate(3px,-1px)}

.accPhoto {
  position: absolute; bottom: 0; left: 0;
  width: 100%; height: auto; min-height: 280px; background: #cef; margin-top: 25px}

.mapContainer { width: calc(100% - 430px); border: 1px solid #bbb;}
#GMap, #GMap02 { background: #d4eef9; height: 40vw; min-height: 448px; max-height: 498px; margin: 0}

@media (min-width: 1200px) { .mapContainer { width: calc(100% - 450px)}}

/* -------------------------------------------
  PHILOSOPHY
------------------------------------------- */
#philosophyContents { padding-bottom: 100px}
.philoSec01, .philoSec02 { align-items: start}
.philoSec02 { margin-top: 100px}

.philoKind { width: calc( 100% - 320px - 30px); max-width: 760px;}

#PSTJP01 .onChar6 { margin: 0 -2px 0 -5px}
#PSTJP01 .onChar8, #PSTJP02 .onChar7 { margin: 0 -3px}
#PSTJP11 .onChar5, #PSTJP02 .onChar9, #PSTJP33 .onChar5 { margin: 0 6px}
#PSTJP11 .onChar8 { font-size: 3.5rem; margin: 0 -6px}
#PSTJP03 .onChar7 { margin-left: -5px}
#PSTJP03 .onChar13 { margin-right: -2px}

.philoCopy { color: #555; font-size: clamp(1.6rem,1.425vw,2rem); line-height: 2.8; letter-spacing: .06em; margin: 50px 0 0 15px}

#philoCopy03 { line-height: 2.4}

.philoKindIM { width: 30%; min-width: 320px}
.PKIM { width: 100%; height: auto}

/* -------------------------------------------
  WORKS
------------------------------------------- */
#worksCat { align-items: start}

#worksCatST { font-size: 3.4rem; letter-spacing: .065em; width: fit-content; margin: 0; padding-bottom: 8px}

/* Works Category Navi */
#worksCatNav { width: calc(100% - 400px); padding-right: 50px}

.WCNList {
  display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around;
  -webkit-flex-flow: row; flex-flow: row; margin: 0; padding: 6px 0 0}

.WCItem { font-size: 2rem; letter-spacing: .1em; text-indent: .1em; margin: 0; padding: 10px 10px 16px; position: relative}

.WCLink { color: #444; text-decoration: none; display: block}

.WCLSign {
  content: ''; position: absolute; bottom: 0; left: 50%;
  background: #1e7ecc; width: 10px; height: 8px; margin-left: -5px; clip-path: polygon(0 0, 100% 0, 50% 100%)}

.WCLink:hover { color: #1e7ecc; margin-top: -2px}
.WCLink:hover .WCLSign { bottom: -2px; background: #f96600}

/* Works List */
#worksWrapp { padding-bottom: 50px}

#worksList .TWLItem:nth-child(n+4) { margin-top: 45px}

/* Works Category List */
#worksCatName { justify-content: flex-start}

#worksCatNameST { font-size: 3rem; letter-spacing: .05em; margin: 15px 0 0}
#worksCatNameST .onChar13 { width: 10px}
#worksCatNameST .onChar14 { font-weight: 500 !important}

#worksCatTit {
  font-size: 4rem; letter-spacing: .1em; width: fit-content; margin: 0 0 0 15px; padding: 5px 10px 15px 10px;
  overflow: visible; position: relative}

/* Works Individual */
.WIndMeta { max-width: 980px; margin: 0 auto;}

.WIndClientName { font-size: 3.2rem; line-height: 1.6; letter-spacing: .06em; margin: 0;}

.WIndData { width: 100%; margin: 40px auto 0; padding: 0; border-bottom: 1px solid #bbb}
.WIkind, .DIInfo { color: #555; font-size: 1.8rem; letter-spacing: .06em; margin: 0; padding: 1em 10px; border-top: 1px solid #bbb; }
.WIkind { width: 120px} .DIInfo { width: calc(100% - 170px)}
.DIInfo a { text-decoration: none; position: relative;}

.WIMainImage { width: 100%; max-width: 1040px; margin: 80px auto 0}

.indIMGallery { justify-content: space-around; width: 100%; max-width: 1340px; margin: 0% auto; position: relative}

.indGItem { width: 45%; margin-top: 5%}
.IGIM { width: 100%; height: auto}

/* -------------------------------------------
  RECRUIT
------------------------------------------- */
.recruitWrapp { margin-top: 90px}
.recruitWrapp:first-of-type { margin-top: 50px}

#recPW02 { padding-bottom: 100px}

.recJobType { font-size: 2.2rem; font-weight: 600; letter-spacing: .06em; margin: 0}
.JTypeST { background: #cce2f5; padding: 7px 9px 9px; display: inline-block; position: relative}
.JTKind { background: #1e7ecc; color: #fff; margin-left: 26px; padding: 7px 12px 9px 12px; display: inline-block}

.JTypeST::after {
  content: ">"; position: absolute; top: 50%; right: -22px; color: #1e7ecc; font-size: 2.4rem; font-weight: 800;
  display: block; -webkit-transform: translateY(-.5em) scaleX(.75); transform: translateY(-.5em) scaleX(.75)}

.recList { max-width: 960px; margin: 40px auto 0; padding: 5px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc}

.recLDT, .recLDD { font-size: 1.7rem; font-weight: 500; line-height: 1.75; letter-spacing: .06em; margin: 0; padding: 18px 15px}
.recLDT { width: calc(6em + 3px)}
.recLDD { width: calc(100% - 7em - 52px)}

.recLDT:nth-of-type(odd), .recLDD:nth-of-type(odd) { background: #e9e9e9;}

/* -------------------------------------------
 NEWS
------------------------------------------- */
/* News List */
.newsWrapp { padding: 0 5vw 80px}

.newsList { max-width: 1340px; margin: 0 auto; position: relative}

.NLLink {
  text-decoration: none; padding: 65px 20px; border-bottom: 1px solid #bbb;
  display: block; position: relative; z-index: 1; cursor: pointer; overflow: hidden}

.NLLink::after {
  content: ''; position: absolute; top: 0; left: 0; right: auto; background: #e2f2fa; width: 0; height: 100%; z-index: -1}
.NLLink:hover::after { width: 100%}

.NLTit { color: #333; font-size: 1.8rem; line-height: 1.8; letter-spacing: .06em; margin: 0}

.NLTime { color: #7e7e7e; letter-spacing: .1em}

.NLLink:hover .NLTit  { color: #1e7ecc; -webkit-transform: translateX(5px); transform: translateX(5px)}
.NLLink:hover .NLTime  { color: #5ea5c2}

.NLCopy { padding-left: 80px}

.NLSign {
  position: absolute; top: 50%; right: 20px;
  background: #bbb; width: 22px; height: 22px; margin-top: -11px; display: block}

.NLSign::before, .NLSign::after { content: ''; position: absolute; top: 50%; background: #fff; height: 2px}
.NLSign::before { left: 6px; width: 10px}
.NLSign::after { right: 7px; width: 4px; margin-top: -2px; -webkit-transform: rotate(45deg); transform: rotate(45deg)}

.NLLink:hover .NLSign { right: 15px; background: #3ea2c2}

/* News Post */
.newsArticle { max-width: 1120px; padding-top: 80px}

.newsAHead { padding-bottom: 90px; border-bottom: 1px solid #bbb}

.newsTitle { font-size: 3rem; line-height: 1.6; letter-spacing: .05em; margin: 0; padding-bottom: 15px}

.newsTime { color: #777; font-size: 1.8rem; letter-spacing: .08em; margin-top: 12px; display: block}

.newsBody { padding-top: 60px}

.newsBody p, .newsBody li { font-size: 1.7rem; line-height: 2.5; letter-spacing: .06em; margin: 1.5em 0 0}
.newsBody h2, .newsBody h3, .newsBody h4, .newsBody h5 { color: #494949; line-height: 1.8; letter-spacing: .075em; margin: 1.5em 0}
.newsBody h2 { font-size: 2.7rem; margin: 1.5em 0 0; padding-bottom: 7px; border-bottom: 2px solid #ccc; display: inline-block}
.newsBody h3 { font-size: 2.4rem}
.newsBody h4 { font-size: 2.1rem; margin-bottom: 1.1em}
.newsBody h5 { font-size: 1.9rem; margin-bottom: 1.1em}
.newsBody ul { margin: 0; padding: 0 0 0 36px}
.newsBody li { margin: 0; list-style-type: circle}

.newsBody img { width: 100% !important; max-width: 1000px; height: auto !important; margin: 0 auto; padding: 10px 0; display: block}
.newsBody a img { text-decoration: none; border: none; outline: none}

/* CMS List Navigation */
#CMSPagination { padding: 45px 5vw 70px; border-top: 1px solid #bbb}

#newsPageNavi { padding-top: 45px;}

#paginationList { text-align: center; margin: 0 auto; padding: 0 7px 0 0}

#paginationList 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;
  -webkit-border-radius: 50%; border-radius: 50%}

#paginationList .link_page:before { background: #399eb5; z-index: -2}
#paginationList .current_page:before { background: #b5b5b5; z-index: -1}

#paginationList .link_page:after {
  background: #00c2cc; -webkit-transform: scale(0); transform: scale(0); z-index: -1}

#paginationList .link_page:hover:before { opacity: 0}
#paginationList .link_page:hover:after { -webkit-transform: scale(1); transform: scale(1)}

#paginationList a { color: #fff; text-decoration: none; cursor: pointer; display: block}

.current_page { color: #f9f9f9; }

#paginationList .link_before, #paginationList .link_next {
  color: #4799d5; font-size: 2.2rem; padding: 0 2px; vertical-align: -.15em; display: inline-block}
.win #paginationList .link_before, .win #paginationList .link_next { -webkit-transform: scaleY(1.4); transform: scaleY(1.4)}
#paginationList .link_before:hover, #paginationList .link_next:hover { color: #00c2cc}


/* Individual Pagination */
.CMSIndNavi { margin: 0 auto; padding: 5px; border-top: 1px solid #bbb; position: relative}

.indPageNavi { margin: 0; padding: 0}

.win .indPageNavi { font-weight: 500}

.indPageNavi a {
 color: #555; font-size: 1.5rem; text-align: center; letter-spacing: .1em; text-decoration: none;
 padding: 52px 0 53px; display: block; position: relative; z-index: 1}
.win.firefox .indPageNavi a { padding: 51px 0 54px}

.indPageNavi a:hover { color: #fff; text-shadow: none}

.previousEntry, .nextEntry { letter-spacing: .06em; width: calc(33.5% - 5px)}
.previousEntry { border-right: 2px solid #fff}
.nextEntry { border-left: 2px solid #fff}
.returnList { letter-spacing: .2em; width: 33%}
.returnList .spFalse { margin-right: 10px}

.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, .nextEntry a:before { background: #e0e0e0}
.returnList a:before { background: #d2d2d2}

.previousEntry a:after, .returnList a:after, .nextEntry a:after {
 background: #5ea2c2; -webkit-transform: scaleX(0); transform: scaleX(0)}
.returnList a:after { background: #777}

.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)}

/* Pagination Link Sign */
.RLSign, .PESign, .NESign { position: absolute; top: 50%; background: #444; height: 1px; transition: inherit; pointer-events: none}

.RLSign { top: inherit; bottom: 30px; left: calc(50% - 20px); background: #555; width: 50px}
.PESign { top: calc(50% + 1px); left: 20%; background: #555; width: 30px}
.NESign { top: calc(50% + 1px); right: 20%; background: #555; width: 30px}

.PLSign:before, .NESign:before {
  content: ''; position: absolute; right: 0; bottom: 0; transition: inherit;
  border-top: 2px solid transparent; border-right: 5px solid transparent;
  border-left: 3px solid #555; border-bottom: 4px solid #555}

.PESign:before, .returnList a i:before {
  content: ''; position: absolute; left: 0; bottom: 0; transition: inherit; border-top: 1px solid transparent;
  border-left: 6px solid transparent; border-right: 3px solid #555; border-bottom: 4px solid #555}
.NESign:before { border-left: 3px solid #555; border-bottom: 4px solid #555}

.returnList a .RLSign:before {
  content: ''; position: absolute; bottom: 10px; left: 22px; transition: inherit; border-top: 1px solid transparent;
  border-left: 6px solid transparent; border-right: 3px solid #555; border-bottom: 4px solid #555}
.returnList a .RLSign:after {
  content: ''; position: absolute; bottom: 0;right: 0; width: 18px; height: 10px;
  border-top: 1px solid #555; border-right: 1px solid #555; transition: inherit; }

a:hover .PESign { left: 16%; background: #fff}
a:hover .PESign:before { border-right: 3px solid #fff; border-bottom: 4px solid #fff}
a:hover .NESign { right: 16%; background: #fff}
a:hover .NESign:before { border-left: 3px solid #fff; border-bottom: 4px solid #fff}
  
.returnList a:hover i { left: 50%; background: #fff; width: 20px}
.returnList a:hover i:before {
    left: -15px; border-right: 3px solid #fff; border-bottom: 4px solid #fff}
.returnList a:hover i:after { width: 28px; border-color: #fff}


/* -------------------------------------------
  Contact Page
------------------------------------------- */
#contact { padding-top: 60px}

#contactHead { max-width: 1200px; margin: 0 auto; padding: 50px 5vw}
#contactHead { padding-top: 0}

.telephoneContact { max-width: 1060px; margin: 0 auto}

.telConInner {
  -webkit-justify-content:flex-start; justify-content:flex-start; align-items: center;
  max-width: 1060px; margin: 0 auto; padding: 0 70px}

.telConCopy { font-size: 1.8rem; letter-spacing: .075em; margin: 40px 0 0; padding: 10px 30px 0 0}

#contactForm { background: #fff; max-width: 1060px; margin: 0 auto; position: relative}

.contactST { color: #555; font-size: 3.2rem; letter-spacing: .05em; margin: 0}

.telephoneNum { font-size: 4rem; font-weight: 600; letter-spacing: .04em; margin: 40px 0 0}

.telephoneLink { color: #1e7ecc; text-decoration: none; padding-left: 28px; display: inline-block; position: relative}
.telephoneLink:hover { color: #4eaeff; -webkit-transform: translate(1px,-2px); transform: translate(1px,-2px)}

.telMark {
  position: absolute; top: 10px; left: 0; background: url(../contact/images/tel_mark.svg) no-repeat 0 0 / 22px 26px;
  width: 22px; height: 26px; display: block; opacity: .8}
  .telephoneLink:hover .telMark { -webkit-transform: translateX(5px) rotate(20deg); transform: translateX(5px) rotate(20deg); opacity: 1}

/* Contact Main */
.contactForm { margin-top: 10px}

/* Progress Area */
.formProgress { min-height: 75px; margin: 0; padding: 0 24%; position: relative}
.formProgress::before {
  content: ''; position: absolute; top: 46px; left: 0; background: #ccc; width: 100%; height: 1px}

#FPInput, #FPConfirm, #FPCompletion {
  color: #707070; font-size: 1.6rem; text-align: center; letter-spacing: .5em; text-indent: .5em; width: 60px; position: relative}

#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: #33b3d0 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: #33b3d0; 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}


/* 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: .05em; padding: 10px; margin-top: 12px;
  border: none; outline: none; vertical-align: .2em; border: 1px solid #bbb; -webkit-appearance: none; appearance: none}

.MFSelect { -webkit-border-radius: 5px; border-radius: 5px}
.MFSelect, .inp01, .mail { width: 64%}

.MFNotice { color: #006eb2; font-size: 1.4rem; margin: 10px 0 0 10px; display: block}

textarea {
  font-size: 1.7rem !important; line-height: 1.8; letter-spacing: .15em !important;
  width: calc(100% - 34px); height: 18em !important; padding: 10px 15px}

.inp01 { -webkit-appearance: none; appearance: none}

::-webkit-input-placeholder { color:#888} ::placeholder{ color:#888; font-size: 1.5rem}

input::-webkit-input-placeholder {font-size: 1.5rem} input::-moz-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}
.ie10 #consent, .edge #consent { vertical-align: 0}

#consentLabel { color: #82694e; font-weight: bold; text-indent: 0; display: inline-block; position: relative; z-index: 1; cursor: pointer}

#MFBTArea { padding-top: 25px; position: relative}

.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% - 30px); text-transform: uppercase; padding: .4em 0 .6em;
  position: relative; border: none; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none}

.win10.chrome .mfp_element_button, .win8_1.chrome .mfp_element_button { padding: .55em 0 .5em .1em}

#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}

#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: #4985bb; width: 100%; z-index: 0}
#sendBT[type='submit'] + #sendButton::after {
  background: #0099a2; 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: #4985bb; border: 1px solid #4985bb; margin-right: 4px}
#mfp_button_cancel { color: #fff; background-color: #777; border: 1px solid #fff}
#mfp_button_send:hover { color: #fff; background: #0099a2; border: 1px solid #0099a2}
#mfp_button_cancel:hover { color: #4e4e4e; background: transparent; border-color: #999}

#sendBT, #mfp_button_send, #mfp_button_cancel { -webkit-appearance: none; appearance: none}

@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}
.FPTitle .spNFalse { font-weight: bold}

#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: 1em 0 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} }

/* 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}
}

/* 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}

/* 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}

/* Confirm */
#mfp_phase_confirm h4 { color: #f25900; font-size: 2.8rem; text-align: center; letter-spacing: .1em; margin: 40px 0 0}

#mfp_confirm_table, .mfp_buttons { width: calc(100% - 100px); }
#mfp_confirm_table { margin: 45px 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; border-right: 1px solid #ddd}
#mfp_confirm_table td { padding-left: 20px}

#mfp_confirm_table tr:nth-of-type(odd) th, #mfp_confirm_table tr:nth-of-type(odd) td { background: #f5f5f5}

.mfp_buttons { margin: 50px auto}

/* completion */
#completionBCList { padding-bottom: 18px}

#completion { padding-bottom: 100px}

#completionST { color: #4985bb; font-size: 3.4rem; text-align: center; letter-spacing: .1em; margin: 40px 0 0}

.completionInfo { font-size: 1.6rem; line-height: 2; letter-spacing: .06em; margin: 40px 0 0; padding: 0 40px}
.completionInfo > .PPad12 { padding-top: 12px; display: block}



/* -------------------------------------------
  Slick Slider
------------------------------------------- */
.slick-loading .slick-list{background:#fff}
.slick-next,.slick-prev{position:absolute;top:50%;background:rgba(0,0,0,.6);color:transparent;font-size:0;line-height:0;
  width:40px;height:40px;padding:0;display:block; border:none;outline:0;cursor:pointer;z-index:10;border-radius:50%;
  -webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
.slick-next:hover,.slick-prev:hover{color:transparent;outline:0;background:rgba(14, 149, 138, 0.6)}
.slick-next:focus:before,.slick-next:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:0}
.slick-next:before,.slick-prev:before{font-size:30px;line-height:1;opacity:.85;color:#fff;vertical-align: 4px;-webkit-font-smoothing:antialiased}
.slick-prev{left:15px}
[dir=rtl] .slick-prev{right:-15px;left:auto}
.slick-prev:before{content:'←'}
[dir=rtl] .slick-prev:before{content:'→'}
.slick-next{right:15px}
[dir=rtl] .slick-next{right:auto;left:-15px}
.slick-next:before{content:'→'}
[dir=rtl] .slick-next:before{content:'←'}
.slick-next:hover:before,.slick-prev:hover:before{color:#333}
.slick-dotted.slick-slider{margin-bottom:30px}
.slick-dots{display:none}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer}s
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
[dir=rtl] .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}


/* -------------------------------------------
 CSS Animation
------------------------------------------- */
/* Common Animation */
.GNLink, .GNLink::after, #botLogo, #retTop::after, #retTop a::after, .ANInstaLink, .FNInstaLink, .ORInstaLink, .BreadcrumbList a::after,
.sign01, .TALCap, .WCLink, .WCLSign, .BAITLink, .BATMark, .TALName, .TWLName, .TWClient, .telephoneLink, .telMark, .TWKind, .WKind, .TNNLink,
.TNNLink::after, .NLLink::after, .NLTit, .link_before, .link_next, .previousEntry a, .returnList a, .nextEntry a,
.accLink, .accTmark, .DIInfo a::after {
  -webkit-transition: all .15s ease-in-out .05s; transition: all .15s ease-in-out .05s}

#globalHead, .homeLink, #GNav, #trigger-overlay::before, #trigger-overlay::after, .FNLink::after, .ONItem a::before,
.TALImage::before, .TWLImage::before, .LBT01, #retTop::before, .LBT01::after,
.previousEntry a:before, .returnList a:before, .nextEntry a:before, .previousEntry a:after, .returnList a:after, .nextEntry a:after,
.RLSign, .PESign, .NESign, #mfp_button_send, #mfp_button_cancel {
 -webkit-transition: all .35s cubic-bezier(.075, .82, .165, 1) .05s; transition: all .35s cubic-bezier(.075, .82, .165, 1) .05s}

.link_page:before, .link_page:after, .link_before, .link_next { -webkit-transition: all .2s ease-in-out .1s; transition: all .2s ease-in-out .1s}

.TWLIM, .NLSign { -webkit-transition: all .25s ease-in-out .05s; transition: all .25s ease-in-out .05s}


/* Standerd */
@-webkit-keyframes fadeIn { 0%{ opacity: 0} 100%{ opacity: 1} }
@keyframes fadeIn { 0%{ opacity: 0} 100%{ opacity: 1} }
.fadeIn { -webkit-animation: fadeIn .75s ease-in-out; animation: fadeIn .75s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both}
.fadeIn02 { -webkit-animation: fadeIn 1s ease-in-out; animation: fadeIn 1s ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both}
.fadeIn03 { -webkit-animation: fadeIn 1.2s ease-in-out; animation: fadeIn 1.2s 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, #homeLogo { -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, #firstVBT { -webkit-animation: fadeUp .65s ease-in-out; animation: fadeUp .65s ease-in-out}
.fadeUp02, #recruitBT { -webkit-animation: fadeUp .8s ease-in-out; animation: fadeUp .8s ease-in-out}
.fadeUp03 { -webkit-animation: fadeUp .95s ease-in-out; animation: fadeUp .95s ease-in-out}
.fadeUp04 { -webkit-animation: fadeUp 1.1s ease-in-out; animation: fadeUp 1.1s ease-in-out}
.fadeUp05 { -webkit-animation: fadeUp 1.25s ease-in-out; animation: fadeUp 1.25s ease-in-out}

@-webkit-keyframes leftIn {
  0%,25%{ -webkit-transform: translate3d(-30px,10px,0); opacity: 0} 100%{ -webkit-transform:none; opacity: 1} }
@keyframes leftIn { 0%,25%{ transform: translate3d(-30px,10px,0); opacity: 0} 100%{ transform:none; opacity: 1} }
.leftIn00 { -webkit-animation: leftIn .4s ease-in-out; animation: leftIn .4s ease-in-out}
.leftIn01 { -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}
.leftIn04 { -webkit-animation: leftIn 1.15s ease-in-out; animation: leftIn 1.15s ease-in-out}

@-webkit-keyframes rightIn {
  0%,25%{ -webkit-transform: translate3d(30px,10px,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,#TCharaContainer { -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}
.rightIn04 { -webkit-animation: rightIn 1.15s ease-in-out; animation: rightIn 1.15s 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 .5s cubic-bezier(.075,.82,.165,1); animation: scaleUp .5s cubic-bezier(.075,.82,.165,1);
  -webkit-transform-origin:center; transform-origin:center}
.scaleUp02 {
  -webkit-animation: scaleUp .66s ease-in-out; animation: scaleUp .66s ease-in-out;
  -webkit-transform-origin:center; transform-origin:center}
.scaleUp03 {
  -webkit-animation: scaleUp .8s cubic-bezier(.62,-0.02,.22,.88); animation: scaleUp .8s cubic-bezier(.62,-0.02,.22,.88);
  -webkit-transform-origin:center; transform-origin:center}
.squareBG {
  -webkit-animation: scaleUp .65s cubic-bezier(.075,.82,.165,1); animation: scaleUp .65s cubic-bezier(.075,.82,.165,1);
  -webkit-transform-origin:right center; transform-origin:right center}

/* Lettering Animation */
@-webkit-keyframes typing01 {0%,50%{-webkit-transform:translate3d(-10px,-10px,0);opacity:0} 100%{-webkit-transform:none;opacity:1}}
@keyframes typing01 {0%,50%{transform:translate3d(-10px,10px,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}

.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}

@-webkit-keyframes movTyping {0%,70%{-webkit-transform:translate3d(-8px,8px,0);opacity:0} 100%{-webkit-transform:none;opacity:1}}
@keyframes movTyping {0%,70%{transform:translate3d(-8px,8px,0);opacity:0} 100%{transform:none;opacity:1}}
.movType .onChar1{display:inline-block;-webkit-animation:movTyping .8s ease;animation:movTyping .8s ease}.movType .onChar2{display:inline-block;-webkit-animation:movTyping .9s ease;animation:movTyping .9s ease}.movType .onChar3{display:inline-block;-webkit-animation:movTyping 1s ease;animation:movTyping 1s ease}.movType .onChar4{display:inline-block;-webkit-animation:movTyping 1.1s ease;animation:movTyping 1.1s ease}.movType .onChar5{display:inline-block;-webkit-animation:movTyping 1.2s ease;animation:movTyping 1.2s ease}.movType .onChar6{display:inline-block;-webkit-animation:movTyping 1.2s ease;animation:movTyping 1.2s ease}.movType .onChar7{display:inline-block;-webkit-animation:movTyping 1.3s ease;animation:movTyping 1.3s ease}.movType .onChar8{display:inline-block;-webkit-animation:movTyping 1.9s ease;animation:movTyping 1.9s ease}.movType .onChar9{display:inline-block;-webkit-animation:movTyping 2.1s ease;animation:movTyping 2.1s ease}.movType .onChar10{display:inline-block;-webkit-animation:movTyping 2.5s ease;animation:movTyping 2.5s ease}.movType .onChar11{display:inline-block;-webkit-animation:movTyping 2.9s ease;animation:movTyping 2.9s ease}.movType .onChar12{display:inline-block;-webkit-animation:movTyping 3.3s ease;animation:movTyping 3.3s ease}.movType .onChar13{display:inline-block;-webkit-animation:movTyping 2.8s ease;animation:movTyping 2.8s ease}.movType .onChar14{display:inline-block;-webkit-animation:movTyping 3.7s ease;animation:movTyping 3.7s ease}

.movType02 .onChar1{display:inline-block;-webkit-animation:movTyping 2.3s ease;animation:movTyping 2.3s ease}.movType02 .onChar2{display:inline-block;-webkit-animation:movTyping 2.4s ease;animation:movTyping 2.4s ease}.movType02 .onChar3{display:inline-block;-webkit-animation:movTyping 2.5s ease;animation:movTyping 2.5s ease}.movType02 .onChar4{display:inline-block;-webkit-animation:movTyping 2.6s ease;animation:movTyping 2.6s ease}.movType02 .onChar5{display:inline-block;-webkit-animation:movTyping 2.7s ease;animation:movTyping 2.7s ease}.movType02 .onChar6{display:inline-block;-webkit-animation:movTyping 2.8s ease;animation:movTyping 2.8s ease}.movType02 .onChar7{display:inline-block;-webkit-animation:movTyping 2.9s ease;animation:movTyping 2.9s ease}.movType02 .onChar8{display:inline-block;-webkit-animation:movTyping 2.9s ease;animation:movTyping 2.9s ease}.movType02 .onChar9{display:inline-block;-webkit-animation:movTyping 3s ease;animation:movTyping 3s ease}.movType02 .onChar10{display:inline-block;-webkit-animation:movTyping 3.1s ease;animation:movTyping 3.1s ease}.movType02 .onChar11{display:inline-block;-webkit-animation:movTyping 3.2s ease;animation:movTyping 3.2s ease}.movType02 .onChar12{display:inline-block;-webkit-animation:movTyping 3.3s ease;animation:movTyping 3.3s ease}.movType02 .onChar13{display:inline-block;-webkit-animation:movTyping 3.4s ease;animation:movTyping 3.4s ease}.movType02 .onChar14{display:inline-block;-webkit-animation:movTyping 3.5s ease;animation:movTyping 3.5s ease}.movType02 .onChar15{display:inline-block;-webkit-animation:movTyping 3.6s ease;animation:movTyping 3.6s ease}.movType02 .onChar16{display:inline-block;-webkit-animation:movTyping 3.7s ease;animation:movTyping 3.7s ease}.movType02 .onChar17{display:inline-block;-webkit-animation:movTyping 3.8s ease;animation:movTyping 3.8s ease}

#THEnCopy .thc01 .onChar3, #THEnCopy .thc01 .onChar11, #THEnCopy .thc01 .onChar22, #THEnCopy .thc02 .onChar5,
#THEnCopy .thc02 .onChar14, #THEnCopy .thc02 .onChar19, #THEnCopy .thc02 .onChar28 { margin-left: 8px}




/* -------------------------------------------
  Text Link Hover
------------------------------------------- */
.tLink01, .newsBody p a, .DIInfo a { color: #1e8eb7; text-decoration: none; display: inline-block; position: relative}
.tLink01:hover, .newsBody p a:hover { color: #f07700}
.FNLink:hover { color: #5ec9e5}

.BreadcrumbList a::after, .tLink01::after, .FNLink::after, .newsBody p a::after, .DIInfo a::after {
  content: ''; position: absolute; bottom: -3px; left: 0; background-color: #f07700; width: 100%; height: 2px;
  -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left bottom; transform-origin: left bottom}
.BreadcrumbList a::after { bottom: -1px}
.FNLink::after { bottom: 0; background: #3e7e8e}
.newsBody p a::after { bottom: 2px}
.newsBody p .NBPopIM::after { display: none}
.DIInfo a::after { bottom: -7px}

.BreadcrumbList a:hover::after, .tLink01:hover::after, .FNLink:hover::after, .newsBody p a:hover::after, .DIInfo a:hover::after {
  -webkit-ttransform: scaleX(1); transform: scaleX(1)}

/* -------------------------------------------
  Displey Setting
------------------------------------------- */
.homeLink, #retTop, #botLogo, #ORLogo, .topAboutLogo {
  text-indent: 400%; white-space: nowrap; overflow: hidden}

.homeLink, #retTop a {
  text-decoration: none; display: block; cursor: pointer; overflow: hidden}

#globalNav .current { cursor: default}