@charset "utf-8";
@import url("/cmn/css/top.css");
@import url("/cmn/css/jirei.css");
@import url("/cmn/css/contact.css");
@import url("/recruit/css/recruit.css");

@font-face {
  font-family: 'Arciform';
  src: url("/cmn/webfont/Arciform.woff2")  format('woff2'),
       url("/cmn/webfont/Arciform.woff")  format('woff');
}
@font-face {
  font-family: 'mplus';
  src: url("/cmn/webfont/mplus.woff2")  format('woff2'),
       url("/cmn/webfont/mplus.woff")  format('woff');
}
.Arciform {font-family: 'Arciform','Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}
.mplus {font-family: 'mplus','Roboto','Droid Sans',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

/*reset*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea,section{ margin:0;padding:0; border:0; font-size:100%; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0; outline:none;}

body{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:'Roboto','Droid Sans','mplus',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; line-height:1.8;}
button{font-family:'Roboto','Droid Sans','mplus',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; cursor:pointer;}

a{cursor:pointer; text-decoration: none;}
a:link{ color:#fff;}
a:visited{ color:#fff;}
a:hover {color:#fff;}
a:active{color:#fff;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
.clr{clear:both;}
.hide{position:absolute !important; left:-9999px !important; top:-9999px !important;}
section {clear:both; zoom:1;}
article:after,section:after,.clrFx:after{content:''; clear:both; display:block;}
img{-ms-interpolation-mode:bicubic;}

/* chrome bug fix*/
*{max-height:999999px;}
*,*::before,*::after {will-change:all;}
textarea,input[type="email"],input[type="password"],input[type="text"],input[type="button"],input[type="submit"]{-webkit-appearance:none;}
textarea{resize:vertical;}
input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,1) inset; outline:none;}
input,button{outline:none;}
area{border:none;outline:none;}


/*
	BASE SET
__________________________________________________*/
/*html{overflow:visible;}*/
html,body {margin:0; padding:0;}
body {position:static; overflow:auto; width:auto; *overflow-y:hidden; color:#fff; font-size:20px; line-height:1.5; z-index:0;}
.over-section{margin:0 -410px; zoom:1; position:relative; *overflow-y:hidden; clear:both; padding:0;}
.over-section:after{content:''; clear:both; display:block;}
main {width:100%;}
section {width:100%; margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0;}
.wrap   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:100; padding:0; max-width: 1400px; min-width: 1200px;}
article   {margin:0 auto; clear:both; zoom:1; position:relative; z-index:10; padding:0;}
article:after,section:after,.wrap:after{content:''; clear:both; display:block;}
*,*::before,*::after {box-sizing:border-box; outline: none;}
i{font-style: normal;}

html{overflow:hidden; background: #000;}
html.windowloaded {overflow: visible;}

main {font-size:0; line-height:1; position:relative; opacity:1; transition:opacity 0.6s ease;}
.windowloaded main {opacity:1;}

#wrapper{opacity: 0;}
.windowloaded #wrapper {opacity: 1;}

#contents {position:relative; overflow:hidden; opacity:1; transition:opacity 0.6s ease; z-index: 0;}
.windowloaded #contents{opacity:1;}
.menuopen #contents{z-index: 0;}

#contentsmask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; backface-visibility: hidden;}



/* 

    SP
    
***********************************************************************************/

main p span.small{font-size:1.8vw;}

.sp-item {display:inline-block;}
.pc-item {display:none;}
.wrap   {min-width: inherit; max-width: inherit;}
.more {text-align: center;}
.more a {display: inline-block; margin: 0 auto; position: relative;width: calc(208/640*100vw); height: calc(60/640*100vw);}
.more a::after{content: ''; width: 100%; height: 100%; border: calc(3/640*100vw) solid #fff; border-radius: 4.375vw; position: absolute; left: 0; top: 0;}
.contact a  {display: inline-block; margin: 0 auto; position: relative;width: calc(465/640*100vw); height: calc(118/640*100vw);}
.contact a::after{content: ''; width: 100%; height: 100%; border: calc(3/640*100vw) solid #fff; border-radius: 9.375vw; position: absolute; left: 0; top: 0;}
.corp {text-align: center;}
.corp a {display: inline-block; margin: 0 auto; position: relative;width: calc(547/640*100vw); height: calc(83/640*100vw);}
.corp a::after{content: ''; width: 100%; height: 100%; border: calc(3/640*100vw) solid #fff; border-radius: 5.938vw; position: absolute; left: 0; top: 0;}

#wrapper {width: 100vw; overflow: hidden;}
#wrapper::after{content: ''; background: url(/cmn/img/bg.jpg) center top / cover; width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: -10;backface-visibility: hidden;}
#contents {padding-bottom:0; width:100vw; overflow:hidden; position:relative;}
main {position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
main img {width: 100%; height: auto;}

#siteheader {position: static; right: 0; top: 0; width:100vw; z-index: 1000;}
#menutoggle {position: fixed; right: 0; top: 0; opacity: 0;}
#spmenu {position: fixed; right: calc(20/640*100vw); top: calc(20/640*100vw); z-index: 10000; background-color: rgba(0,0,0,0.16); border-radius: 100%;}
#spmenu::after{content: ''; width:  calc(32/640*100vw); height:  calc(32/640*100vw); background: url(/cmn/img/nav_close.png) center/cover; position: absolute; left: 50%; top: 50%; margin: calc(-16/640*100vw) 0 0 calc(-16/640*100vw); opacity: 0; z-index: -1;}
#spmenu label {width: calc(62/640*100vw); height: calc(62/640*100vw); display: block; cursor: pointer;transition: 0.2s;}
#spmenu label::after{content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: calc(3/640*100vw) solid #fff; border-radius: 100%; transition: 0.5s;}
#spmenu i {position:absolute; left: 50%; top: 50%; width: calc(28/640*100vw); min-height: 1px; height: calc(1/640*100vw); background: #fff; margin: 0 0 0 calc(-14/640*100vw); cursor: pointer; transition: 0.5s ease-out; backface-visibility: hidden;}
#spmenu i:nth-of-type(2) {margin-top: calc(-6/640*100vw);}
#spmenu i:nth-of-type(3) {margin-top: calc(6/640*100vw);}

#siteheader nav {position: fixed; left: 0; top: 0; width: 100vw; height: 100%; z-index: 0; background: rgba(0,0,0,0.8); text-align: center; opacity: 0; transition: 0.2s 0.1s;}
#siteheader nav .wrap {display: flex; justify-content: center; align-items: center; height: 100%; transition: 0.2s; transform: scale(0.7); opacity: 0;}
#siteheader nav li {padding: calc(22/640*100vw) 0;}
#siteheader nav a{color: #fff; text-decoration: none; font-family: 'Arciform','Roboto','Droid Sans',sans-serif; font-size: calc(33/640*100vw); letter-spacing: 0.4em; position: relative; height: calc(60/640*100vw); display: block; display: flex; align-content: center; justify-content: center; align-items: center;}
#siteheader nav a::before{content: ''; width: calc(400/640*100vw); height: 100%; position: absolute; left: 50%; top: 0; margin-left: calc(-200/640*100vw); border: calc(3/640*100vw) solid #fff; border-radius: 4.688vw; transition: 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0;}
#siteheader nav a::after{content: ''; width: calc(400/640*100vw); height: 100%; position: absolute; left: 50%; top: 0; margin-left: calc(-200/640*100vw); border-radius: 4.688vw; transition: 0.2s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0; background: rgba(255,255,255,0.3);filter: blur(2px)}
#siteheader nav a img {width: 100vw; height: auto; transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
#siteheader nav a::before{transform: scale(0.9);}
#siteheader nav a.active::before{transform: scale(1); transition: 0.5s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 1;}
#siteheader nav a:hover::after{ transition: 0.5s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 1;}
#siteheader nav a:hover img{filter:drop-shadow(0 0 10px #333);}



/*
#siteheader nav a:hover {animation: _gnav 1.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;}
@keyframes _gnav{
20%{filter: drop-shadow(0 0 30px #fff),drop-shadow(0 0 130px #fff);}
100%{filter: drop-shadow(0 0 0px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
}
*/

#siteheader .btn.neon {opacity: 0; z-index: -1; font-size: 0; line-height: 1; position: absolute;}

/* open */
#menutoggle:checked ~ nav .wrap{transform: scale(1); transition: 0.8s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 1;}
#menutoggle:checked ~ nav {z-index: 2000; transition: 0.6s 0s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 1;}
#menutoggle:checked ~ #spmenu::after{opacity: 1; transition: 0.3s;}
#menutoggle:checked ~ #spmenu i{opacity: 0; transition: 0.3s;}
#menutoggle:checked ~ #spmenu label::after{opacity: 0; transform: scale(1.4);}
.menuanim #menutoggle ~ nav{z-index: 2000;}
.menuopen #spmenu {z-index: 10000;}
.menuopen #spmenu{background: none;}

#endwrap{background: rgba(0,0,0,0.7); position: relative; z-index: 0;}
/* contact */
#contact {/*background: rgba(0,0,0,0.7);*/ text-align: center; padding: calc(110/640*100vw) 0 0;}
#contact img {width: 100%; height: auto;}
#contact .contact{margin: calc(70/640*100vw) 0 calc(40/640*100vw);}

/* sitefooter */
#sitefooter {/*background: rgba(0,0,0,0.7);*/ padding: 0 0 calc(25/640*100vw); position: relative; z-index: 10;}
#sitefooter .sns {display: flex; justify-content: center; padding: calc(56/640*100vw) 0 calc(50/640*100vw)}
#sitefooter .sns li {padding: 0 calc(14/640*100vw);}

#sitefooter .footer-policy {display: block; padding-bottom:calc(30/640*100vw);}
#sitefooter .footer-policy a {position: relative; display: inline-block; text-decoration: none;}	
#sitefooter .footer-policy a::after {position: absolute; bottom: 1px; left: 0; content: ''; width: 100%; height: 1px; background: #fff; opacity: 0; visibility: hidden;transition: .3s;}
#sitefooter .footer-policy a:hover::after {bottom: -4px; opacity: 1; visibility: visible;}	

#sitefooter p{font-size: calc(15/640*100vw); line-height: calc(29/640*100vw); display: block; text-align: center;}
#sitefooter p b {font-weight: normal;}
#sitefooter .sns li img {width: calc(45/640*100vw); height: auto;}

/* table */
table {width: calc(600/640*100vw); margin: 0 calc(20/640*100vw); border: 2px solid #fff; text-align: left; }
table + table{margin-top:calc(40/640*100vw);}
table thead th {color: #073353; font-size: calc(22/640*100vw); line-height: calc(36/640*100vw); background: #fff; text-align: center; padding: calc(8/640*100vw); font-weight: bold;}
table tbody th {background:rgba(0,0,0,0.16); font-size: calc(19/640*100vw); line-height: calc(26/640*100vw); width: calc(216/640*100vw); vertical-align: top;border: 1px solid #fff; padding: calc(23/640*100vw) calc(28/640*100vw); font-weight: bold;}
table tbody td {font-size: calc(16/640*100vw); line-height: calc(26/640*100vw); vertical-align: top;border: 1px solid #fff; padding: calc(23/640*100vw) calc(28/640*100vw);}
table tbody td p + p {margin-top: 2em;}

/* archives */
.archives {margin-bottom:calc(40/640*100vw);}
.archives .item {display:inline-block; position: relative; text-decoration: none; color: #fff;}
.archives .item + .item {margin-top: calc(19/640*100vw);}
.archives .item header {padding: calc(27/640*100vw) 0;}
.archives .item h3 {font-size: calc(24/640*100vw); line-height: calc(30/640*100vw); letter-spacing: 0.16em; position: relative; padding: calc(13/640*100vw) 0; font-weight: bold;}
.archives .item h3 i {display: block; font-size: calc(16/640*100vw); line-height: calc(27/640*100vw); letter-spacing: 0.16em;}
.archives .item em{width: calc(334/640*100vw); background: #fff; height: 1px; display: block; margin: 0 auto;}
.archives .item h3 ~ p {font-size: calc(16/640*100vw); line-height: calc(27/640*100vw); letter-spacing: 0.16em; padding: calc(10/640*100vw) 0; font-weight: bold;}
/* archives > other */
#contents .archives.other .item img {height:calc(190/640*100vw); width: auto;}


.archives.other .item header {padding:calc(10/640*100vw) calc(10/640*100vw) calc(27/640*100vw);}
.archives.other .item h3 {font-size: calc(21/640*100vw);}
.archives.other .item h3 ~ p {font-size: calc(15/640*100vw);}
.archives.other .item em{width: calc(280/640*100vw);}

.secondlogo {transition: 0.5s; opacity: 0; z-index: -1; position: absolute;}

main .archives .item p.small{font-size:1.8vw;; line-height:3vw; margin-top:-1vw;}


@media screen and (min-width:641px){

/* 

    PC
    
***********************************************************************************/

main p span.small{font-size:11px;}

html.noscroll,body.noscroll {overflow: hidden;}
#contents {min-width:1200px; padding-bottom:0; font-size: 0; line-height: 1;}
#contents main { margin:0 auto 0; position:relative; z-index:10; font-size:0; line-height:1; text-align:center;}
.sp-item {display:none;}
.pc-item {display:inline-block;}

.more a {width:208px; height:60px; border-radius:30px;}
.more a::after{border: 3px solid #fff; border-radius:30px;}
.contact a {width: 465px; height: 118px; border-radius: 58px;}
.contact a::after{border: 3px solid #fff; border-radius:58px;}
.corp a {width: 547px; height: 83px; border-radius:40px;}
.corp a::after{border:3px solid #fff; border-radius:40px;}

#wrapper {width: 100%; min-width: 1200px;}
#wrapper::after{background: url(/cmn/img/bg-pc.jpg) center top no-repeat; width: 100%; height: 100vh;}
#contents {width:100%;}
#contents main img {width: inherit; height: inherit;}

#siteheader {width:100%; min-width: 1200px;}

#spmenu label {overflow: hidden; border-radius: 100%;}
#spmenu label:hover {animation: _flash 1.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;}

#spmenu {position: fixed; right: 20px; top: 20px;}
#spmenu::after{width:32px; height:32px; margin: -16px 0 0 -16px;}
#spmenu label {width: 62px; height:62px;}
#spmenu label::after{border: 3px solid #fff; border-radius: 100%;}
#spmenu i {width: 28px; height:1px; margin: 0 0 0 -14px;}
#spmenu i:nth-of-type(2) {margin-top:-6px;}
#spmenu i:nth-of-type(3) {margin-top:6px;}
#spmenu:hover i:nth-of-type(2) {transform: translateY(-3px);}
#spmenu:hover i:nth-of-type(3) {transform: translateY(3px);}

#siteheader nav {height: 100%; overflow: hidden; overflow-y: auto;}
#siteheader nav .wrap {min-height: 746px;}
#siteheader nav li {padding: 22px 0;}
#siteheader nav a{ font-size: 33px; height:60px;}
#siteheader nav a::before{width: 400px; margin-left: -200px; border: 3px solid #fff; border-radius: 30px;}
#siteheader nav a::after{width: 400px; margin-left: -200px; border-radius: 30px;}
#siteheader nav a img {width: 640px; height: auto;}

.secondlogo {position: absolute; left: 38px; top: 33px; z-index: 100; opacity: 1;}
body#top .secondlogo {opacity: 0; z-index: -1;}
.secondlogo img {backface-visibility: hidden; transition: 0.3s;}
.secondlogo:hover img{filter: drop-shadow(0 0 10px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}

/* contact */
#contact {padding: 110px 0 0;}
#contact img {width: auto;}
#contact .contact{margin:70px 0 40px;}

/* sitefooter */
#sitefooter {padding: 0 0 75px; text-align: center;}
#sitefooter .sns {padding:56px 0 50px;}
#sitefooter .sns li{padding: 0 14px;}
#sitefooter .footer-policy {display: block; padding-bottom:30px;}
#sitefooter .footer-policy a {position: relative; display: inline-block; text-decoration: none;}	
#sitefooter .footer-policy a::after {position: absolute; bottom: 1px; left: 0; content: ''; width: 100%; height: 1px; background: #fff; opacity: 0; visibility: hidden;transition: .3s;}
#sitefooter .footer-policy a:hover::after {bottom: -4px; opacity: 1; visibility: visible;}	
	
#sitefooter p { font-size: 15px; line-height: 1; display: inline-block; padding: 0 35px;}	
#sitefooter p b{padding: 0 1em;}
#sitefooter .sns li img {width: 45px; height: auto; backface-visibility: hidden; transition: 0.3s;}
#sitefooter .sns li a{display: inline-block; position: relative;}
#sitefooter .sns li a:hover img{filter: drop-shadow(0 0 10px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}

/* table */
table {width: 1164px; margin: 0 auto; border: 2px solid #fff;}
table + table {margin-top: 40px;}
table thead th {font-size: 22px; line-height: 36px; padding:8px;}
table tbody th {font-size: 19px; line-height: 26px; width:306px; border: 1px solid #fff; padding:13px 28px;}
table tbody td {font-size: 16px; line-height: 26px; border: 1px solid #fff; padding: 13px 28px;}
table tbody td p + p {margin-top: 2em;}

/* archives */
.archives {margin:0 auto 40px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; min-width: 1200px; max-width: 1920px;}
.archives .item {padding: 0; text-decoration: none; color: #000; margin: 70px 35px 0; display: inline-block; overflow: hidden;}
.archives .item + .item {margin-top: 70px;}
.archives .item header {padding:0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; flex-flow: column nowrap; overflow: hidden;}
.archives .item::after{content: '';position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.8); width: 100%; height: 100%;/* border-radius: 100%;*/
margin: -0px 0 0 -0px; z-index: 0;}
.archives .item header::before{content: '';position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,0.4); width: 660px; height: 660px; border-radius: 100%;
margin: -330px 0 0 -330px; z-index: 0;}
.archives .item header::after{content: '';position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,0.6); width: 660px; height: 660px; border-radius: 100%;
margin: -330px 0 0 -330px; z-index: 0;}
.archives .item h3 {font-size: 23px; line-height: 30px; padding: 13px 0; position: relative; z-index: 10;}
.archives .item h3 i {font-size:14px; line-height: 27px; position: relative; z-index: 10;}
.archives .item em{width: 334px; background: #000; position: relative; z-index: 10;}
.archives .item h3 ~ p {font-size: 15px; line-height: 27px; padding:10px; position: relative; z-index: 10;}
/* archives > other */
#contents .archives.other .item img {height:280px;}
.archives.other .item header {padding:10px 0 27px;}
.archives.other .item h3 {font-size:19px;}
.archives.other .item h3 ~ p {font-size:12px;}
.archives.other .item em{width: 280px;}

/* archives > data-viewcount=4 */
.archives .item {width: 400px; height: auto;}
.archives .item h3 {font-size: 18px;}
.archives .item h3 ~ p {font-size: 14px;}

main .archives .item p.small{font-size:11px; line-height:16px; margin-top:-10px;}

/* small */	
.archives.archives-small .item {width: 300px; height: auto; margin: 30px 15px 0;}
.archives.archives-small .item + .item {margin-top: 30px;}	
.archives.archives-small .item h3 {font-size: 16px; line-height:22px;}
.archives.archives-small .item h3 ~ p {font-size: 12px; line-height:20px;}
.archives.archives-small .item p.small {font-size: 10px; line-height:14px;}
.archives.archives-small .item:hover em{width: 270px;}
	



/* animation */
.archives .item::after{transform: translateY(0); transition: 0.4s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0;}
.archives .item header::before,
.archives .item header::after{opacity: 0; transform: scale(0); transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item header h3 {opacity: 0; transform: translate(0,30px); transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item header h3 ~ p {opacity: 0; transform: translate(0,-30px); transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item em,
.archives.other .item em{width: 0; transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.archives .item:hover::after{transform:translateY(0); opacity: 1; transition: 0.75s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item:hover header::after {transition-delay: 0.24s;}
.archives .item:hover::after {transition-delay: 0s;}
.archives .item:hover header h3 {opacity: 1; transform: translate(0,0); transition: 0.5s 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item:hover header h3 ~ p {opacity: 1; transform: translate(0,0); transition: 0.5s 0.45s cubic-bezier(0.215, 0.61, 0.355, 1);}
.archives .item:hover em{width: 334px; transition: 0.5s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);}
.archives.other .item:hover em{width: 280px; transition: 0.5s 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);}

}
@media screen and (min-width:1921px){
#wrapper::after {background-size: cover;}
}
@media screen and (max-width:1270px) and (min-width:641px){
.archives .item {margin: 40px 20px 0;}
.archives .item + .item {margin-top: 40px;}
}


/* 

    loader
    
***********************************************************************************/
#loader {background: rgba(0,0,0,0.0); width: 100%; height: 100%; z-index: 100000; position: fixed; left: 0; top: 0; display: block !important;}
#loader.cb {z-index: 10000000;}
#loader .loader{width: 64px; height: 64px; position: fixed; right: 50vw; top: 50%; margin: -32px -32px 0 0;}
#loader .loader i {width: 100%; height: 100%; border: 3px solid #fff; border-radius: 100%; display: block; position: absolute; left: 0; top: 0;}
#loader .loader i {opacity: 1; transform: scale(0); backface-visibility: hidden;}
#loader .loader i {animation: _loader 1.8s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;}
#loader .loader i + i {animation: _loader 1.8s 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;}
@keyframes _loader{
0%{ opacity: 1; transform: scale(0);}
10%{ opacity: 1;}
90%{opacity: 0.05; transform: scale(1);}
97%{opacity: 0; transform: scale(1);}
100%{opacity: 0; transform: scale(1);}
}

/*

    js styles
    
************************************************************************************************************************/
#baseVW{ width:100vw; position: fixed; left: -9999px; opacity: 0;}
.analytics {position:fixed; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden;}
#imageloaded {position: fixed; left: -9999px; font-size: 0; line-height: 1; height: 1px; width: 1px; overflow: hidden;}

.animation-up ,
.animation ,
.animation.itemshow ,
.animation-trigger,
.uatablet .animation {}

@keyframes _hover{0%{transform:translate3d(0, 0, 0)}20%{transform:translate3d(0, -2px, 0)}40%{transform:translate3d(-2px, 2px, 0)}60%{transform:translate3d(2px, -2px, 0)}80%{transform:translate3d(0, 2px, 0)}100%{transform:translate3d(0, 0, 0)}}
@keyframes _arrow{0%{transform:translate3d(0, 0, 0)}10%{transform:translate3d(0, 0, 0)}20%{transform:translate3d(0, 14px, 0)}100%{transform:translate3d(0, 0, 0)}}
@keyframes _blast{0%{transform:translate3d(0, 0, 0) scale(0.96)}15%{transform:translate3d(0, -3px, 0)}30%{transform:translate3d(-3px, 3px, 0)}45%{transform:translate3d(4px, -3px, 0)}60%{transform:translate3d(0, 3px, 0)}75%{transform:translate3d(0, -3px, 0)}90%{transform:translate3d(-3px, 3px, 0)}100%{transform:translate3d(0, 0, 0) scale(1)}}
@keyframes _blast2{0%{transform:translate3d(0, 0, 0) scale(0.96)}15%{transform:translate3d(0, -4px, 0)}30%{transform:translate3d(-4px, 4px, 0)}45%{transform:translate3d(6px, -4px, 0)}60%{transform:translate3d(0, 4px, 0)}75%{transform:translate3d(0, -4px, 0)}90%{transform:translate3d(-4px, 4px, 0)}100%{transform:translate3d(0, 0, 0) scale(1)}}
@keyframes _flash{
10%{background-color: rgba(255,255,255,0.3);}
100%{background-color: rgba(255,255,255,0.0);filter: drop-shadow(0 0 5px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
}
@keyframes _shat{0%{transform: translateY(-101%)}100%{transform: translateY(0)}}


/*
Colorbox Core Style:

*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:101000; overflow:hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{-moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box;}

#cboxOverlay{background:rgba(0,0,0,0.7);}
#colorbox{outline:0;}
#cboxContent{margin-top:80px; margin-bottom: 38px; overflow:visible;}
.cboxIframe{background:#fff;}
#cboxError{padding:80px 0; border:1px solid #ccc;}
#cboxLoadedContent{background:none; padding:0; border: none;}
#cboxLoadingGraphic{}
#cboxTitle{position:absolute; top:-0; left:0; color:#000;}
#cboxCurrent{position:absolute; top:-0; right:205px; text-indent:-9999px;}

#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px;}

#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

#cboxClose {display:block; width:  36px; height: 36px; background: url(/cmn/img/nav_close.png) center center no-repeat; position: absolute; margin: -50px 0 0 -0; position:absolute; top: 0; right: 1px; transition:0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; background-size: 36px auto; backface-visibility: hidden; text-indent: -9999px; overflow: hidden;}
#cboxClose:hover{opacity: 0.5;}

@media screen and (max-width:640px){
#cboxContent{margin-top:12vw; margin-bottom: 12vw;}
#cboxLoadingOverlay img {max-width: 100vw;}
#cboxClose {display:block; width:  calc(36/640*100vw); height:  calc(36/640*100vw); background-size: cover; right: 0; margin-top: calc(-50/640*100vw);}
}



/*

    animation
    
************************************************************************************************************************/
.animation.slideL{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(10vw,10vw)}
.animation.slideR{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(-10vw,10vw)}
.animation.slideT{transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: translate(0,5vw)}
img.animation.slideT {transform: translate(0,10vw);}
.animation.scale{transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1),opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1); opacity: 0; transform: scale(1.3);}
.animation.scale.fadein,
.animation.slideL.fadein,
.animation.slideR.fadein,
.animation.slideT.fadein{opacity: 1; transform: translate(0,0);}

.neon a {transition: 0.6s; backface-visibility: hidden; }
.neon a img {backface-visibility: hidden; transition: 0.3s;}
@media screen and (min-width:641px){
.neon a:hover{/*transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);*/ animation:_neon 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.neon a:hover img{filter: drop-shadow(0 0 4px rgba(0,0,0,0.2)); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.neon a:hover{filter: drop-shadow(0 0 5px #fff); transition:filter 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
}
@keyframes _neon{
10%{background-color: rgba(255,255,255,0.3);}
100%{background-color: rgba(255,255,255,0.0);}
}

/* scroll in */
.item{
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform: translate3d(0,25vh,20vh) perspective(80vh);
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) , opacity 1s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.item.animated{
  opacity: 1;
  transform: translate3d(0,0,0);
}
/*
[data-scroll]{
  opacity: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform: translate3d(0,30vh,20vh) perspective(80vh);
  transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) , opacity 1s 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll="in"]{
  opacity: 1;
  transform: translate3d(0,0,0);
}
*/
/*
[data-scroll] img{
backface-visibility: hidden;
  will-change: transform, opacity;
  transform: translateY(0) scale(1);
  transition: 1.0s 0s cubic-bezier(0.165, 0.84, 0.44, 1);
}
[data-scroll="in"] img{
  transform: translateY(0) scale(1);
}
*/