/*---------------------top_menu-----------------------*/
.fixed {
position: fixed;
top: 0;
z-index: 1000;
border-bottom:1px solid #ccc;
}
* html .fixed {
position: absolute;
top: expression(eval(document.documentElement.scrollTop-55));
z-index: 9000;
}
#top_menu{
background:white;
width:100%;
}
#top_menu ul {
width:85%;
max-width: 1280px;
margin: 0 auto;
overflow: hidden;
_zoom: 1;
}
@media only screen and (max-width: 1280px){
#top_menu ul{width:100%;max-width: 1100px;}
}
#top_menu ul li {
list-style-type: none;
float: left;
width: 9.090909090909091%;
}
a #top_menu ul li {
display: block;
overflow: hidden;
position: relative;
}
#top_menu li p img{width:100% !important;margin:0;}
#top_menu li{position:relative;}
.bton img{
position: absolute;
z-index:50;
}
.btoff img{
position:relative;
z-index:10;
display: block !important;
opacity:1 !important;
}
a .bton{display: none}
a:hover .bton{opacity:1}
a:hover .bton{display: block !important;}
@media only screen and (max-width: 767px){
#top_menu{display:none}
}

/*-------------202010--------------*/

.telop {
margin:0.4em 0.5em;
overflow:hidden;
}
@media only screen and (max-width: 640px){
.telop {
margin:0.9em 0.5em 0.3em;
overflow:hidden;
}
}
.telop p {
margin:0;
animation: flowing 30s linear infinite; 
transform:translateX(100%);/*最初の位置*/
}
.telop ul {
margin:0;
padding-left:100%;
display : inline-block;
white-space : nowrap;
animation :flowing 40s linear infinite;
transform:translateX(0);
}

.telop ul li {
display:inline;
margin:0 50px 0 0;
font-size:14px;
color:#333;
}
.telop a:visited,.telop a:link {
text-decoration: none;
color: #113aaf;
}
@keyframes flowing {
100% {
transform:translateX(-100%);/*終了の位置*/
}
}
/*-------------201904--------------*/
a:visited,a:link{color:#113aaf}

#portfolio li:hover{opacity:0.9}
.bx-viewport li{min-height:1px;min-width:1px}
.bx-clone {display: block}
#btn,#btn2,#btn3,#btn4{display:block;cursor: pointer;}
#btn3 img:hover,#btn4 img:hover{opacity:0.8}
#overlay,#overlay2{
display: none;
width: 100%;
height:100%;
text-align: center;
position: fixed;
top: 0;
z-index:10020;
}
#overlay div.txt{
display: none;
position:absolute;
z-index:10030;
width:50%;
width:60%\9;
height:100%;
height:90%\9;
top:0;
background: url(/top_n2/brand_txt.png) no-repeat;
background-size:cover;
background-size:auto \9;
background-position:center center;
animation: AnimationTxt 3s ease;
}
@keyframes AnimationTxt{ 0% {opacity: 0;} 100% {opacity: 1;}}
#overlay div.ash{
position:absolute;
z-index:10025;
width:60%;
width:80%\9;
height:100%;
height:150%\9;
top:0;
left:40%;
background: url(/top_n2/ashida2021.png) no-repeat;
background-size:cover;
background-position:center center;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
}
@media only screen and (max-width:1024px){
#overlay div.ash{left:45%}
}
@media only screen and (max-width:980px){
#overlay div.ash{left:50%}
}
@media only screen and (max-width:768px){
#overlay div.txt{top:25%;width:100%;
background: url(/top_n2/brand_txt2.png) no-repeat;
background-size:contain}
#overlay div.ash{width:80%;left:45%}
}

#overlay div.bak{
z-index:10000;
width:100%;
height:100%;
background: #abd6f2;
background: -moz-linear-gradient(top,#abd6f2 0%, #f7f7f7 100%);
background: -webkit-linear-gradient(top,#abd6f2 0%,#f7f7f7 100%);
background: linear-gradient(to bottom,#abd6f2 0%,#f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd6f2', endColorstr='#f7f7f7',GradientType=0 );
background:url(/top_n2/brand2021.jpg) no-repeat;
background-size:cover;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;
}
#overlay2{
background: url(/top_n2/ashida_2021s2.jpg) no-repeat;
background-size:cover;
background-position:center center;
}
@media (max-width: 600px){
#overlay2{
background: url(/top_n2/ashida_2021s.jpg) no-repeat;
background-size:cover;
background-position:center center;
}
}

#overlay div.ash:hover{
-moz-transform: scale(1.04);
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
}

#close{text-align:right;
background:url(/top_n2/close.png) no-repeat 10px center;
width: 60px;
height:60px;
top:0;
float:right;
margin:1em 1.6em;
cursor: pointer;
z-index:16000;
}
#close2{text-align:right;
background:url(/top_n2/close.png) no-repeat center;
background-size:100%;
width: 40px;
height:40px;
top:0;
float:right;
margin:0.6em 0.6em;
cursor: pointer;
}
#close:hover,#close2:hover{opacity:0.6}
/*----------------------------*/

body{width:100%;max-width:100%}
img, .icon {margin:0}
#container,#imageDataContainer{
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,"\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF","Helvetica",sans-serif !important;
}
.site-header-fixture{width:100%;border-top:1px solid #ccc}
/*--------------------------------*/
img {-webkit-backface-visibility: hidden;}
.cell{margin:6px 10px}
/*--------------------------------*/
.m_top05{padding-top:0.5em !important}.m_top1{padding-top:1em !important}
.m_bot05{padding-bottom:0.5em !important}.m_bot1{padding-bottom:1em !important}

.bg_white{background:white !important}
.bg_gray{background:#666;color:white}

a h2{-moz-border-radius: 6px;-webkit-border-radius: 6px;-khtml-border-radius: 6px;border-radius: 6px;}

/*--------------------------------*/
#top_bg{line-height:0;
background:#f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f3f3f3));
background-image: linear-gradient(to bottom, #fcfcfc 0%, #f3f3f3 100%);
background-repeat: repeat-x;
background-position: left top;
box-sizing:border-box;
padding:0 !important;
border-bottom: 1px solid #eee;
height:auto;
max-height:501px}
/*--------------------menu-top----------------------*/

.bg-corpgreen{background:#b2b900}
h2.bg-corpgreen{color:white}
.bg-corpred{background:#cb3054}
h2.bg-corpred{color:white}
li h2.bg-corpgreen,li h2.bg-corpred{font-weight:bold;width:120px;letter-spacing:0.05em;}

.site-header .nav a.right,.site-footer .nav a.right{padding:3px 5px 0 !important}
.nav li h1{margin-right:6px}
.nav li h2{padding:0.85em 6px 0.6em 0px;margin-left:6px}/*.nav li h2{margin-left:12px}*/
.nav li#c012 h2{letter-spacing:0.1em;line-height:1.0em;padding:0.5em 6px 0.06em 0px;margin-left:6px}
.nav li#c012 h2 span{letter-spacing:-0.05em;font-size:90%;font-weight:500}
.nav li.right h2{margin-left:0;margin-right:0}
.footer_map {background: #585858 !important;color:#ddd;font-size:80%}
.footer_map a{color:#ddd}
.footer_map a:hover,ul.footer_menu a:hover li{color:white;text-decoration:underline}
.footer_map .nav li.right h2{color:white}
.footer_map .nav li.right a:hover h2,.footer_map .nav li.right a:hover{text-decoration:none !important}
.footer_map dt,.footer_map dd{margin:0;padding:0}
.footer_map dt{font-size:130%;font-weight:bold;padding-bottom:0.3em}
.footer_map dd{padding-top:0;font-size:115%;padding-left:6px;line-height:0.3em\9}
@media only screen and (max-width:1024px){.footer_map dd{font-size:95%;text-indent:0;letter-spacing:-0.05em}}

.footer_map dd span{padding-top:10px;font-size:80%;margin-left:-6px;line-height:1.4em}
.footer_map hr{margin:0.4em 3em 0.4em 0;border:1px solid #727272 !important;border-bottom:none !important;margin:1em 3em 0em 0\9;}
ul.footer_menu{padding:1em 0;margin:0;display:block;float:left;list-style: none;width:100%;/*background:#aaa*/}
ul.footer_menu li{font-size:120%;padding:0.3em 0;margin:0 1.5em 0 0 !important;float:left;}

/*--------------------slider----------------------*/
ul.slider1{margin:0 !important}
ul.slider1 li img{margin-bottom:0 !important}
.bx-wrapper .bx-pager.bx-default-pager a{background:#aaa !important}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus{background:#333 !important}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom:-20px}
.bx-wrapper .bx-pager{padding-top:0 !important}
#top_bg .bx-viewport{max-height:501px !important}
.bx-wrapper{-moz-box-shadow:none !important;box-shadow:none !important;background:none !important;border-bottom:none !important}
.slider1 a:hover img{filter:alpha(opacity=80);opacity:0.8;}

@media only screen and (max-width:1180px){#visual_wrapper .bx-controls-direction{display:none !important;}}

@media only screen and (max-width:767px){
.bx-wrapper{border:none !important}
.bx-controls-direction {display:none;}
.bx-wrapper{max-width:100%}
}
/*--------------------bnr_box----------------------*/
#bnr_box a:hover img{filter:alpha(opacity=90);opacity:0.9;}
#bnr_box img{margin:0}
/*-------------------release-----------------------*/
#release_box{padding:1.5em 0 1em;text-align:center;box-sizing:border-box}
#release_box h3{padding:0 !important}
/*------------------------------------------*/

#portfolio {display:block;
list-style: none;
padding: 0;
margin:0 auto !important;
}

#portfolio,#portfolio li;#portfolio li img{float:none !important;width:100%;max-height:470px;}
#portfolio_s {
display:none;
list-style: none;
padding: 0;
margin:0 auto !important;
}
#portfolio_s li img,#portfolio_s{float:none !important;width:100%;}

a,a:hover{text-decoration:none;}
.arr{
background: url('/images/arrow_r.png') no-repeat;
position: relative;
float:right;
right:0;top:50%;
margin-top: -6px;
width: 24px;
height: 24px;
}

#portfolio_s{display:none}
/*------------------------pagetop--------------------------*/
#pageTop {position:fixed;bottom: 32px;right: 16px;z-index:999;}
#pageTop a {
display: block;
z-index: 999;
padding: 0;
border-radius: 30px;
width: 34px;
height: 34px;
background-color: #888;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
opacity: 0.90;
}

#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}
#pageTop span{font-size:40px;margin-top:6px !important}

/*----------------------------------------*/
/* bottom */
/*----------------------------------------*/

#bottom_box{
background-color:#adadad;
text-align:center;
}
#to_top{
margin:0 auto;
width:50px;
height:50px;
background-image: url(/top_n2/to_top.gif);
}
a:hover #to_top,a:active #to_top{background-position: 0px -50px;}

#group{
height:34px;
margin:0 auto 1em;
width:96% !important;
max-width:1000px;
}

#group li {
width:25%;
margin: 0;
padding:0;
float: left;
display: inline;
}
#group li img{width:100%;margin:0}
#group a {
display: block;
text-indent:-9999px;
}
#group li:hover{
background-color:#eff3be;
}

/*---------------------footer-----------------------*/
.site-footer {
background-color: #fff;
}
@media only screen and (max-width: 767px){div#footer-area{background:none}}
#footer-area div.cell{margin:10px 0 0}
#bottom_box{
background:#ADADAD;
width:100%;
margin:0 auto;
}


#copyright {
margin: 0 auto;
background/***/: #fff url(/common_n/images/footer/copyright2.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center !important;
max-width:290px;
width:100%;
}

/*---------------smp nav----------------*/
nav{border-top:1px solid #b2b900;/*height:40px !important*/}
nav ul{width:100%;margin:0;padding:0;background:#eee;height:45px;list-style: none;}

ul#headerNav_1of2 li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table;
width: 50%;
height: 36px;
float: right;
outline:none;
}
ul#headerNav_1of3 li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table;
width: 33.333333%;
height: 36px;
float: right;
outline:none;
}
ul#headerNav_1of2 li a, ul#headerNav_1of3 li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
width: 100%;
height: 100%;
font-size: 12px;
text-decoration: none;
color: white;
vertical-align: middle;
font-weight: bold;
text-align: center;
height:20px;
}
a#headerNav00,a#headerNav01,a#headerNav02 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-background-size: 11px 11px;
-webkit-background-size: 11px 11px;
}
a#headerNav00 {
background: #eee;
color: #444 !important;
text-align:left !important;
}
a#headerNav01 {
background: #abb315;
border-left: 1px solid white;
}
a#headerNav02 {
background: #9d394c;
border-left: 1px solid white;
}
ul#headerNav_1of2 li.headerNaviMenu .headerNav00R, ul#headerNav_1of3 li.headerNaviMenu .headerNav00R {
display: table-cell;
vertical-align: top;
padding-top: 10px;
font-weight:bold;
}
ul#headerNav_1of2 li.headerNaviMenu .headerNav00R .gico_update, ul#headerNav_1of3 li.headerNaviMenu .headerNav00R .gico_update {
width: 40px;
}
ul#headerNav_1of2 li.headerNaviMenu #headerNav00 div, ul#headerNav_1of3 li.headerNaviMenu #headerNav00 div {
/*display: inline;*/
}
ul#headerNav_1of2 li a img, ul#headerNav_1of3 li a img {
vertical-align: middle;
}
.headerNav00L img{
height:40px;
margin-bottom:0;
}


/*----------------------smp head---------------------*/

nav, .smp_head,.smp{display:none !important}

/*--------------------------------------------------------*/
.left{text-align:left}
.long{letter-spacing:-0.1em}
.long2{letter-spacing:-0.05em}
.caption{font-size:85%}

@media only screen and (max-width: 767px){
.width-1of3{width:50%}
}

/*----------------*/
.cells{margin:10px}
sup {font-size:80%}

@media only screen and (max-width: 640px){
.cells{margin:0}
.width-1of3{width:100%}

}




/*---------------------responsive-----------------------*/
.site-center{width:100%}

@media (min-width:1281px){
.site-center{width:95%;max-width:1280px;}
#top_menu ul {width:95% !important;max-width: 1280px !important;}
}
@media (max-width:1280px){
.site-center{width:95%;max-width:1180px}
#top_menu ul {width:95% !important;max-width: 1180px !important;}
}
@media (max-width:1200px){
.site-center{width:100%;max-width:1100px}
#top_menu ul {width:100% !important;max-width: 1100px !important;}
}

@media print, screen and (max-width:1024px){
.site-center{width:100%;max-width:980px}
.cell{margin:2px 6px !important}
ul.footer_menu li{font-size:100%}
#top_menu ul {width:100% !important;max-width: 980px !important;}
}
@media only screen and (max-width:979px){
ul.footer_menu li{font-size:100%}

.cell{margin:10px !important}
.arr{margin-top:4px}
}
@media only screen and (max-width:767px){
.bx-wrapper{border:none !important}
.bx-wrapper{max-width:100%}
}
@media only screen and (max-width: 767px){
.site-center{width:100%}
.highlights{margin:0 !important}
.sitemenu,.pc,#crumb{display:none !important}
nav, .smp_head,.smp{display:block !important}
.width-1of4{width:50% !important}
.width-1of6{width:33.33%}
.arr{margin-top:0px;width: 18px;height: 18px;background-size:100%;}
.width-1of3 .cell{margin:6px;}
#footer-navigation{display:none}
.ui-btn-inner {
padding: .2em;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
zoom: 1;
}
.ui-btn {
display: block;
text-align: center;
cursor: pointer;
position: relative;
margin: .5em;
padding: 0.3em;
}
.ui-btn-text {position: relative;z-index: 1;font-weight: bold;}
.button span{margin:0 !important}
.button img{box-sizing: border-box;width:100%;margin:0 !important}
.ui-btn-corner-all {-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em;}
.ui-shadow {box-shadow: none;}

}

#portfolio,.slider{display:block}
#portfolio_s,.slider_s{display:none}

@media only screen and (max-width: 767px){
#portfolio,.slider{display:none !important}
#portfolio_s,.slider_s{display:block !important}
}

@media only screen and (max-width: 600px){
ul.footer_menu li{font-size:80%}
.site-footer{font-size:130%}
.site-footer .width-1of5{width:100%;box-sizing:border-box}
.site-footer .width-2of5{width:100%;box-sizing:border-box}
.site-footer .width-1of2{width:50%;box-sizing:border-box}
.width-1of6{width:33.33%}
.footer_left,.footer_right{width:50% !important}
.footer_left{float:left !important}
.footer_right{float:right !important}
.width-1of2{width:100%}
.width-1of4{width:100% !important}
nav, .smp_head,.smp{display:block !important}
.site-body {font-size:14px}
#portfolio,.slider{display:none}
#portfolio_s,.slider_s{display:block}
}
/*----------------ie8----------------*/
#header-area{min-width: 920px !important \9;margin:0 auto \9}
#top_bg{height:auto \9}
#bsc{height:100%\9 }
a:hover/**/ div{filter: alpha(opacity=85)\9;}
#noie8{display:none \9}
.width-1of5 img{width:100%}
li h2.bg-corpgreen,li h2.bg-corpred{position:relative\9;behavior: url('/common_n/pie/PIE.htc');}


/*--------------------------TOP tile-menu---------------------------*/

.tile-wrapper a {
display: block;
position: relative;
background-color: #000;
overflow: hidden;
}

/*--------------------------スマホ他------------------------------*/

#fancybox-frame html{text-align:center !important}
a:hover #bnr{opacity:0.8}


/* ----- header-inner-container ----- */
#header-inner-container{
position:relative;
top:28px;
width:244px;
height:18px;
}
html*#header-inner-container{
left:75px;
}
/* --------- header-menu --------- */
#header-menu{
height:18px;
float:right;
width:680px;
line-height:0;
}
#header-menu ul{
margin:0;
padding:0;
list-style:none;
float:right;
}
#header-menu li{
margin:0;
padding:0;
display:inline;
font-size:0px;
float:right;
}
#header-menu li a{
display:block;
padding:0;
height:18px;
text-decoration:none;
text-indent:-9999px;
}

/* --------- recruit --------- */
#header-menurecruit{
width:79px;
background:url(/top_n2/header_menu.gif) 0 0;
}
#header-menurecruit a:hover{
width:79px;
background:url(/top_n2/header_menu.gif) 0 -18px;
}
#header-menurecruitOn{
width:79px;
background:url(/top_n2/header_menu.gif) 0 -18px;
}
/* --------- sitemap --------- */
#header-menu03{
width:99px;
background:url(/top_n2/header_menu.gif) -79px 0;
}
#header-menu03 a:hover{
width:99px;
background:url(/top_n2/header_menu.gif) -79px -18px;
}
#header-menu03On{
width:99px;
background:url(/top_n2/header_menu.gif) -79px -18px;
}

/* --------- english --------- */
#header-menuenglish{
width:66px;
background:url(/top_n2/header_menu.gif) -178px 0;
}
#header-menuenglish a:hover{
width:66px;
background:url(/top_n2/header_menu.gif) -178px -18px;
}
#header-menuenglishOn{
width:66px;
background:url(/top_n2/header_menu.gif) -178px -18px;
}


/*------------------------------------*/


#area_box{
height:auto;
width:100%;
max-width:1260px;
margin:0 auto;
margin:0;
}
#area_box table{background:none;width:100%}

#area_box td{
padding-top:0;
padding-bottom:6px;
width:16.66666666666667%;
text-align:center;
font-size:14px;
line-height:1.6em;
}

#area_box td img#icons{width:100%}
#area_boxul{margin-top:0.6em}
#area_box li{
list-style-image:url('/top_n2/area_link.gif');
list-style-position: inside;
padding:0;
margin:0.05em 0 0 -30%;
font-size:110%;
}

#area_box li img{margin-left:4px}


#area_box {
position: relative;
width: 100%;
padding:0;
}
#area_box:before {
content:"";
display: block;
padding-top: 23%;
}
#area_box table {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

@media only screen and (max-width: 1024px){
#area_box li{font-size:100%;margin:0.01em 0 0 -30%;line-height:1.4em}
#area_box:before {padding-top: 24%;}
}


#event_box {
padding: 10px 0 10px;
background-color: #f1f0de;
text-align: center;
z-index: 200;
}
#event_box img,#release_box img,#news_box img,#osusume_box img{float:none}
#release_box {
padding: 20px 0 10px;
background-color: #fff;
text-align: center;
}


#ttl {
position: relative;
top: 0;
left: 43px;
}
#backno {
position: relative;
top: 27px;
float:right;
margin-right:5%;
z-index: 100;
}
.newstext{vertical-align:middle;line-height:1.3em}
#backno:hover img {
filter: alpha(opacity=70);
opacity: 0.7;
@media (max-width: 1024px){
opacity: 1.0;
}
}
#news_box {
padding: 20px 0 10px;
background-color: #eee;
text-align: center;
}
#news_box table{background:none}

@media only screen and (max-width: 1160px){
#inner{margin:0 15px}
}
@media only screen and (max-width: 768px){
#inner{margin:0 6px}
.date{font-weight:bold;padding-left:0;font-size:105%;color:#444;}
.newstext{padding-right:0}
}

#osusume_box {
padding: 10px 0 10px;
background-color: #fff;
text-align: center;
z-index: 300;
}

a {
-webkit-tap-highlight-color:#aaa;
}
@media (max-width: 767px)
{
.width-1of3{width:50%}
#top_group{width:100%}
#group{height:auto;margin:0 auto 10px;width:250px;}
#group #group01, #group #group02, #group #group03{width:250px;max-width:100% !important;margin:5px 0}
}
@media only screen and (max-width: 640px){
.width-1of3{width:100%}
}


.tile-wrapper{margin:0;padding:0}@media (max-width: 640px){.tile-wrapper{margin:0;padding:10px}}
a figure{
color:black;
font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","Kozuka Mincho Pro", "Kozuka Mincho Std", "小塚明朝 Pro R", "小塚明朝 Std R","\FF2D\FF33\20\FF30\660E\671D","ＭＳ Ｐ明朝","\4D\53\660E\671D","MS Mincho", serif;
}
figure {
position: relative;
overflow: hidden;
background: #808080;
}

figure img {
position: relative;
z-index: 1;
-webkit-transition: .3s;
transition: .3s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
figcaption {
position: relative;
box-sizing:border-box;
text-shadow: 1px 1px 4px #fff, 0px 0px 2px #fff;
margin:0 50% 0 0;
margin:0 -50% 0 100% \9;
position: absolute;
bottom: 0;
right: 0%;
z-index: 2;
width: 100%;
height: 100%;
background:rgba(224,230,235,0.85);
background:#e0e6eb \9;
　-webkit-transition: .5s;
transition: .5s;
-webkit-transform: translateX(100%);
transform: translateX(100%);
 
}
a:hover figure figcaption{
background: rgba(230,100,100,0.06);
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-ms-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
transition: background-color 0.5s linear;

}
figure:hover figcaption {
right: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
background:none;
-webkit-transition: background 1.8s ease-out;
-moz-transition: background 1.8s ease-out;
-ms-transition: background 1.8s ease-out;
-o-transition: background 1.8s ease-out;
transition: background 1.8s ease-out;
}


.tile-wrapper figure img,.tile-wrapper figcaption img{width:100%;height:auto;aspect-ratio: 2 / 1;}

figcaption h2,figcaption h3{
text-align: center;
font-size: 160%;
padding:10% 50% 0 0.5%;
font-weight:bold;
}
figcaption h2.short,figcaption h3.short{
font-size: 166%;
letter-spacing:0.1em;
}
figcaption h2.long,figcaption h3.long{
font-size: 150%;
letter-spacing:-0.1em;
}
figcaption p{
padding:4% 50% 15% 0.5%;
text-align: center;
font-size: 100%;
letter-spacing:0;
font-weight:bold;
}
@media only screen and (max-width: 1024px){
figcaption h2,figcaption h3{font-size: 100%;}
}
@media only screen and (max-width: 767px){
figcaption h2,figcaption h3{font-size: 120%;}


figcaption {
position: relative;
box-sizing:border-box;
text-shadow: 1px 1px 4px #fff, 0px 0px 2px #fff;
margin:0 50% 0 0;
position: absolute;
bottom: 0;
right: 0%;
z-index: 2;
width: 100%;
height: 100%;
-webkit-transition: .5s;
transition: .5s;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
a:hover figurefigcaption{
background: rgba(230,30,50,0.05);
-webkit-transition: background-color 0.05s linear;
-moz-transition: background-color 0.05s linear;
-ms-transition: background-color 0.05s linear;
-o-transition: background-color 0.05s linear;
transition: background-color 0.05s linear;
}
figure:hover figcaption {
right: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
-webkit-transition: background 2.8s ease-out;
-moz-transition: background 2.8s ease-out;
-ms-transition: background 2.8s ease-out;
-o-transition: background 2.8s ease-out;
transition: background 2.8s ease-out;
}

}
@media only screen and (max-width: 600px){
figcaption h3{font-size: 140%;}
}
figcaption h3 p {
padding-top:0.3em;
font-weight:normal;
text-align: center;
font-size:70%;
line-height:1.5em;
}

#portfolio li img{width:100% !important}
#portfolio_s li img{width:100% !important}
@media only screen and (min-width: 768px){
#portfolio,.slider{display:block}
#portfolio_s,.slider_s{display:none}
}
@media only screen and (max-width: 767px){
#portfolio,.slider{display:none !important}
#portfolio_s,.slider_s{display:block !important}

}
@media only screen and (max-width: 414px){
.site-footer{font-size:85%}

}

@media print {
html{background:white;zoom:90%}
body{padding:0;margin:0;
width: 1480px !imporatnt;
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform-origin: 0 0;
}
.site-center{width:1280px !important}
.cell{padding:0;margin:0;}
#visual,.bx-wrapper {width:100% !imporatnt;height:auto}
#portfolio li img {
    width: 100% !important;
    max-width:1000px !important;
    height:auto;
}
.bx-wrapper .bx-controls-direction a{top:190px }
#osusume_box .bx-wrapper .bx-controls-direction a, #event_box .bx-wrapper .bx-controls-direction a{top:50% }
#top_bg{height:490px !imporatnt}
/*#top_menu{display:none}*/
.tile-wrapper{padding:0;margin:0;}
.width-1of3{width:33.33333%;}
#area_box li{line-height:1.3em;}
#area_box:before {padding-top: 23%;}
#inner {
margin: 0 15px;
}
#group{width:1000px !important;margin:0 auto}
#group li{float-left}
.footer_map,#pageTop,#bottom_box,#footer-navigation{display:none !important}
.site-center{width:100% !important;padding:0;margin:0}
#top_bg{max-height:367px}
}