@charset "utf-8";
/**--------------------------------------------------------
 * CSS information
 * file name	: style.css
 * author		: takaaki koyama
 -----------------------------------------------------------*/

@font-face {
    font-family: 'Calibre-Bold';
    src: url('/newsite/font/CalibreWeb-Bold.eot');
    src: url('/newsite/font/CalibreWeb-Bold.eot?#iefix') format('embedded-opentype'), /*EOT形式*/
    url('/newsite/font/CalibreWeb-Bold.woff') format('woff'); /* WOFF形式 */
    font-weight: bold;
}

@font-face {
    font-family: 'Calibre-Regular';
    src: url('/newsite/font/CalibreWeb-Regular.eot');
    src: url('/newsite/font/CalibreWeb-Regular.eot?#iefix') format('embedded-opentype'), /*EOT形式*/
    url('/newsite/font/CalibreWeb-Regular.woff') format('woff'); /*WOFF形式*/
}


/*
 reset
-------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td{
    margin: 0;
    padding: 0;
}

article,aside,details,figcaption,figure,footer,
header,hgroup,main,nav,section,summary{
    display: block;
}

audio,canvas,video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}

a:focus {
}

a:active,
a:hover {
    outline: 0;
}

b,strong {
    font-weight: bold;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
}

code,kbd,pre,samp {
    font-family: monospace, serif;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}
sub,sup {
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}
img,object,embed {
    vertical-align: top;
}

figure {
    margin: 0;
}

button,input,select,textarea {
    margin: 0;
    font-size: 100%;
    font-family: inherit;
}

button,input {
    line-height: normal;
}
button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption,th {
    text-align: left;
}

li {
    list-style-type: none;
}

em{
    font-weight:bold;
}

/*
 ::selection
---------------------------------------------------*/
::selection {
    background: #3cb5aa;
    color: #1a1a1a;
}
::-moz-selection {
    background: #3cb5aa;
    color: #1a1a1a;
}


/*
 webkit-scrollbar
---------------------------------------------------*/
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #d5d5d5;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0px 0px 2px rgba(200,200,200,1);
}

::-webkit-scrollbar-track-piece {
    background-color: #e5e5e5;
}


/*
 basic settings
-------------------------------------------------------------*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,body{
    height: 100%;
}


body{
    background-color: #fff;
    color: #1a1a1a;
    font-size: 10px;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",Sans-Serif;
    line-height: 1.7;

    -webkit-text-size-adjust: 100%;
    background-color: #f2f2f2;
    min-width: 320px;
    overflow-y: scroll;
    overflow-x: hidden;
}

a{
    -webkit-transition: color ease-out 0.25s;
    -moz-transition: color ease-out 0.25s;
    -o-transition: color ease-out 0.25s;
    transition: color ease-out 0.25s;
}
a:link,a:visited{
    color: #19a69a;
    text-decoration: none;
}
a:hover{
    color: #5BCDC3;
    text-decoration: none;
}
a:active{
    color: #000;
    text-decoration: none;
}



/*
 helper
---------------------------------------------------*/
#navi_skip {
    position: absolute;
    left: 0;
    top: 0;
}

#noscript_message{
    z-index:10000;
    padding:0.5em 0;
    width:100%;
    border-bottom:1px solid #888;
    background:#c00;
    color:#fff;
    text-align:center;
    font-size:1.2em;
}



/*
 site styles
-------------------------------------------------------------*/
#loading-progress{
    position:fixed;
    top:-5px;
    left:0;
    width:100%;
    height:5px;
    background-color:#f3f3f3;
    z-index:10000;
    -webkit-transition: top 300ms ease-out;
    -moz-transition: top 300ms ease-out;
    -o-transition: top 300ms ease-out;
    transition: top 300ms ease-out;
}

#loading-progress.show{
    top: 0px;
}

#loading-progress .bar{
    height:5px;
    background-color:#1a1a1a;
}

/*
 #wrap
---------------------------------------------------*/
#wrap{
    min-height: 100%;
    width: 100%;
    /* height:100%; */
    position: relative;
    /* z-index: 0; */
    /* overflow:hidden; */
    padding-top: 60px;
    -webkit-transition: padding-top 300ms ease-out;
    -moz-transition: padding-top 300ms ease-out;
    -o-transition: padding-top 300ms ease-out;
    transition: padding-top 300ms ease-out;
}

.no-footer #wrap{
    height: 100%
}

.page-loading #wrap{
    padding-top: 65px;
}



#wrap:after{
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    z-index:2;
    background-color: rgba(0,0,0,0.7);
    -webkit-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    -moz-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    -o-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;

}
.nav-open #wrap{
    /* overflow:hidden; */
}
.nav-open #wrap:after{
    opacity: 1;
    width:100%;
    height: 100%;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
}

/*
 #header
---------------------------------------------------*/
#header{
    position: fixed;
    height: 60px;
    top: 0px;
    left: 0;
    right: 0;
    z-index:1000;
    background-color: #fff;
    border-bottom-color:rgba(0,0,0,0.1);

    -webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
    -moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;
    box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 0px 0px;

    -webkit-transition: top 300ms ease-out;
    -moz-transition: top 300ms ease-out;
    -o-transition: top 300ms ease-out;
    transition: top 300ms ease-out;
    *zoom: 1;
}
#header:before, #header:after { display: table; content: ""; line-height: 0;}
#header:after { clear: both; }

.page-loading #header{
    -webkit-transition: top 300ms ease-out 0;
    -moz-transition: top 300ms ease-out 0;
    -o-transition: top 300ms ease-out 0;
    transition: top 300ms ease-out 0;
    top:5px;
}

.index #header{
    -webkit-transition: top 300ms ease-out 500ms;
    -moz-transition: top 300ms ease-out 500ms;
    -o-transition: top 300ms ease-out 500ms;
    transition: top 300ms ease-out 500ms;
    top:-60px;
}

.form-index #header{
    -webkit-transition: top 300ms ease-out 500ms;
    -moz-transition: top 300ms ease-out 500ms;
    -o-transition: top 300ms ease-out 500ms;
    transition: top 300ms ease-out 500ms;
}



#menu{
    position:relative;
    z-index: 4;
    font-size: 1.4em;
}


/*
 #logo
-----------------------------------------*/
#logo{
    text-align: center;
    position: absolute;
    left:50%;
    top:0;
    margin-left: -140px;
    width: 280px;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight:bold;
    letter-spacing: 0.5em;
}

#logo a{
    display :inline-block;
    height:60px;
    line-height: 60px;
    color: #1a1a1a;
    font-size: 1.7em;
    padding: 0 20px;
}

@media only screen and (max-width: 400px){
    #logo{
        margin-left: -100px;
        width: 200px;
        letter-spacing: 0.4em;
    }
    #logo a{
        font-size:1.5em;

        padding: 0;
    }
}


/*
 .nav
-----------------------------------------*/
.nav{
    height: 60px;
    font-size:1.4em;
}

.nav-btn{
    height:60px;
    line-height: 60px;
}
.nav-btn a{
    display: inline-block;
    line-height: 60px;
    color: #1a1a1a;
}

.nav-btn a .label{
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight:bold;
    letter-spacing: 0.25em;
}

.nav-btn a .label .main-label{
    font-weight:bold;
    margin-right:10px;
}
.nav-btn a .label .sub-label{
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    margin-left: 10px;
    letter-spacing: 0;
}

/*
 #gnavi
-----------------------------------------*/

.nav-links{
    visibility: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 60px;
    z-index: 50;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    -webkit-transition-property: visibility;
    -moz-transition-property: visibility;
    -o-transition-property: visibility;
    transition-property: visibility;
}

.nav-links > ul{
    width:220px;
    height:100%;
    background-color:#fff;
    z-index:1;
    position: relative;
}
.sub-nav-links{
    display: none;
    background-color:#f3f3f3;
}

li:hover .sub-nav-links,
li.current .sub-nav-links{
    display: block;
}



.sub-nav-links .sub-nav-links-inner{
    padding: 80px 20px 20px 60px;
}
.sub-nav-links dl{
    margin-bottom:2.8em
}
.sub-nav-links dl > dt{
    margin-bottom: 0.8em;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight:bold;
    letter-spacing: 0.25em;
}
.sub-nav-links dl > dd li > a{
    color:#1a1a1a;
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
}


/*
 #gnavi
-----------------------------------------*/
#gnavi{
    float: left;
}

#gnavi .nav-btn a{}

#gnavi .nav-btn a .bars{
    display: inline-block;
    padding:0 20px;
    width: 58px;
    height: 28px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

#gnavi .nav-btn a .bars .bar{
    display: block;
    position: absolute;
    width: 18px;
    height: 2px;
    background-color: #1a1a1a;


    -webkit-transition: 375ms;
    -moz-transition: 375ms;
    -o-transition: 375ms;
    transition: 375ms;
    -webkit-transition-property: top, opacity;
    -moz-transition-property: top, opacity;
    -o-transition-property: top, opacity;
    transition-property: top, opacity;

}

#gnavi .nav-btn a .bars .bar:nth-child(1){
    top: 6px;
    opacity: 1;
    -webkit-transition-delay: 125ms;
    -moz-transition-delay: 125ms;
    -o-transition-delay: 125ms;
    transition-delay: 125ms;
}
#gnavi .nav-btn a .bars .bar:nth-child(2){
    top: 12px;
    -webkit-transition-delay: 80ms;
    -moz-transition-delay: 80ms;
    -o-transition-delay: 80ms;
    transition-delay: 80ms;
}
#gnavi .nav-btn a .bars .bar:nth-child(3){
    top: 18px;
    -webkit-transition-delay: 40ms;
    -moz-transition-delay: 40ms;
    -o-transition-delay: 40ms;
    transition-delay: 40ms;
}
#gnavi .nav-btn a .bars .bar:nth-child(4){
    top: 24px;
    opacity: 0;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}


#gnavi .nav-btn a:hover .bars .bar:nth-child(1){
    top: 0px;
    opacity: 0;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;

}
#gnavi .nav-btn a:hover .bars .bar:nth-child(2){
    top: 6px;
    -webkit-transition-delay: 40ms;
    -moz-transition-delay: 40ms;
    -o-transition-delay: 40ms;
    transition-delay: 40ms;
}
#gnavi .nav-btn a:hover .bars .bar:nth-child(3){
    top: 12px;
    -webkit-transition-delay: 80ms;
    -moz-transition-delay: 80ms;
    -o-transition-delay: 80ms;
    transition-delay: 80ms;
}
#gnavi .nav-btn a:hover .bars .bar:nth-child(4){
    top: 18px;
    opacity: 1;
    -webkit-transition-delay: 125ms;
    -moz-transition-delay: 125ms;
    -o-transition-delay: 125ms;
    transition-delay: 125ms;
}



#gnavi.nav-open .nav-btn a .bars .bar:nth-child(1){
    top: 12px;
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;

    -webkit-transform: rotate(45deg) scaleX(1.442);
    -moz-transform: rotate(45deg) scaleX(1.442);
    -o-transform: rotate(45deg) scaleX(1.442);
    transform: rotate(45deg) scaleX(1.442);

    opacity: 1;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
    -webkit-transition-property: top, -webkit-transform;
    -moz-transition-property: top, -moz-transform;
    -o-transition-property: top, -o-transform;
    transition-property: top, transform;
}
#gnavi.nav-open .nav-btn a .bars .bar:nth-child(2){
    top: 12px;
    opacity: 0;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}
#gnavi.nav-open .nav-btn a .bars .bar:nth-child(3){
    top: 12px;
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-transform: rotate(-45deg) scaleX(1.442);
    -moz-transform: rotate(-45deg) scaleX(1.442);
    -o-transform: rotate(-45deg) scaleX(1.442);
    transform: rotate(-45deg) scaleX(1.442);
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
    -webkit-transition-property: top, -webkit-transform;
    -moz-transition-property: top, -moz-transform;
    -o-transition-property: top, -o-transform;
    transition-property: top, transform;
}
#gnavi.nav-open .nav-btn a .bars .bar:nth-child(4){
    top: 24px;
    opacity: 0;
    -webkit-transition: 0ms;
    -moz-transition: 0ms;
    -o-transition: 0ms;
    transition: 0ms;
    -webkit-transition-delay: 0ms;
    -moz-transition-delay: 0ms;
    -o-transition-delay: 0ms;
    transition-delay: 0ms;
}




#gnavi-links{
    width:220px;
}

.gnavi-nav-open #gnavi-links{
    visibility: visible;
}

#gnavi-links ul{
    padding: 40px 20px;

    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.gnavi-nav-open #gnavi-links ul{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

#gnavi-links li{
    margin-bottom:20px;
}
#gnavi-links li a{
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 0 0 25px;
    color: #1a1a1a;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight:bold;
    letter-spacing: 0.25em;
}

#gnavi-links li a.external{
    letter-spacing: 0.1em;
}

#gnavi-links .icon_fb{
    display:inline-block;
    background: url(../img/icons/icon_fb.svg) no-repeat 50% 50%;
    width:40px;
    height: 16px;
    vertical-align: -3px;
}
#gnavi-links li:last-child a{
    padding-left:12px;
}


/*
 #cnavi
-----------------------------------------*/
#cnavi{
    float: right;
    text-align: right;
}

#cnavi .icon-search{
    position:relative;
    width: 40px;
    height: 60px;
    vertical-align: middle;
    overflow:hidden;
}

#cnavi .icon-search:before,
#cnavi .icon-search:after{
    content:'';
    position:absolute;
    left:0;
    background: url('../img/icons/icon_search.gif') no-repeat 50% 47%;
    background-image:url(../img/icons/icon_search.svg);
    background-size:16px 16px;
    width: 40px;
    height: 60px;

    -webkit-transition: 275ms ease-in-out;
    -moz-transition: 275ms ease-in-out;
    -o-transition: 275ms ease-in-out;
    transition: 275ms ease-in-out;

    -webkit-transition-property: opacity, -webkit-transform;
    -moz-transition-property: opacity, -moz-transform;
    -o-transition-property: opacity, -o-transform;
    transition-property: opacity, transform;

}
#cnavi .icon-search:after{
    top:40px;
    opacity:0;
}

#cnavi a:hover .icon-search:before{
    opacity:0;
}
#cnavi a:hover .icon-search:after{
    opacity:1;
}
#cnavi a:hover .icon-search:before,
#cnavi a:hover .icon-search:after{
    -webkit-transform: translate(0, -40px);
    -moz-transform: translate(0, -40px);
    -o-transform: translate(0, -40px);
    transform: translate(0, -40px);
}

#cnavi .nav-btn a .label{
    font-weight:normal;
}


#cnavi-links{
    width:220px;
    right: 0;
    left: auto;
}
#cnavi-links.has-sub-nav-links{
    width: 560px;
}


.cnavi-nav-open #cnavi-links{
    visibility: visible;
}

#cnavi-links > ul{
    position: absolute;
    right: 0;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    -webkit-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
    background-color: #fff;
}

#cnavi-links.has-sub-nav-links > ul{
    -webkit-transform: translate(560px, 0);
    -moz-transform: translate(560px, 0);
    -o-transform: translate(560px, 0);
    transform: translate(560px, 0);
}

.cnavi-nav-open #cnavi-links > ul{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

#cnavi-links > ul > li{
    display: block;
}
#cnavi-links > ul > li > a{
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 0 0 60px;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight:bold;
    color: #1a1a1a;
    letter-spacing:0.25em;
}

#cnavi-links > ul > li:hover > a,
#cnavi-links > ul > li.current > a{
    background-color:#f3f3f3;
}

#cnavi-links .sub-nav-links{
    position: absolute;
    top: 0;
    right: 220px;
    width: 340px;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
    z-index: 0;
    overflow-y: auto;
    /**
    -webkit-transition: 800ms;
       -moz-transition: 800ms;
         -o-transition: 800ms;
            transition: 800ms;

    -webkit-transition-property: -webkit-transform;
       -moz-transition-property: -moz-transform;
         -o-transition-property: -o-transform;
            transition-property: transform;

    -webkit-transform: translate3d(200%, 0, 0);
    -moz-transform: translate3d(200%, 0, 0);
    -o-transform: translate3d(200%, 0, 0);
    transform: translate3d(200%, 0, 0);
}

.cnavi-nav-open #cnavi-links .sub-nav-links{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    */
}





@media only screen and (max-width: 1000px){
    .nav-btn a .label .label-separator,
    .nav-btn a .label .sub-label{
        display:none;
    }
}
@media only screen and (max-width: 700px){
    #cnavi .icon-search{
        width:50px;
    }
    .nav-btn a .label{
        display: none !important;
    }

    #gnavi-links li{
        margin-bottom:10px;
    }
}
@media only screen and (max-width: 560px){
    #cnavi-links,#cnavi-links.has-sub-nav-links{
        width:220px;
    }

    #cnavi-links > ul{
        width:100%;
        height:100%;
        padding-bottom:60px;
        overflow-y:auto;
    }

    #cnavi-links.has-sub-nav-links > ul{
        -webkit-transform: translate(220px, 0);
        -moz-transform: translate(220px, 0);
        -o-transform: translate(220px, 0);
        transform: translate(220px, 0);
    }


    .cnavi-nav-open #cnavi-links > ul{
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    #cnavi-links .sub-nav-links{
        position:relative;
        right:0;
        width:100%;
        background-color: #ECECEC;
        display:block !important;
        visibility:hidden;
        height: 0;
        -webkit-transition: visibility 500ms, height 500ms ease-out;
        -moz-transition: visibility 500ms, height 500ms ease-out;
        -o-transition: visibility 500ms, height 500ms ease-out;
        transition: visibility 500ms, height 500ms ease-out;
    }
    #cnavi-links .sub-nav-links .mCSB_draggerContainer{
        display:none;
    }
    .sub-nav-links .sub-nav-links-inner{
        padding: 40px 20px 20px 80px;
    }


    #cnavi-links .sub-nav-links.collapse-in{
        visibility:visible;
        height: auto;
    }

}

/*
@media only screen and (max-width: 560px){
	.cnavi-nav-open #cnavi-links.has-sub-nav-links > ul{
		-webkit-transform: translate(220px, 0);
		-moz-transform: translate(220px, 0);
		-o-transform: translate(220px, 0);
		transform: translate(220px, 0);
	}
	.cnavi-nav-open #cnavi-links.has-sub-nav-links > ul{
		-webkit-transform: translate(0px, 0);
		-moz-transform: translate(220px, 0);
		-o-transform: translate(220px, 0);
		transform: translate(0px, 0);
	}
	.sub-nav-links .sub-nav-links-inner{
		padding-left: 40px;
	}

	#cnavi-links .sub-nav-links:after{
		content:'';
		display:block;
		position:absolute;
		top:20px;
		left:40px;

		width:30px;
		height:30px;
		border-radius:3px;
		background-color:#f00;
	}
}
@media only screen and (max-width: 560px){
	#cnavi-links .sub-nav-links{
		right: -300px;
		width: 300px;
	}
	#cnavi-links > ul > li > a{
		padding-left:60px;
	}

	.cnavi-nav-open #cnavi-links.has-sub-nav-links > ul{
		-webkit-transform: translate(-300px, 0);
		-moz-transform: translate(-300px, 0);
		-o-transform: translate(-300px, 0);
		transform: translate(-300px, 0);
	}
}
*/





/*
 #contents
---------------------------------------------------*/
#contents-wrap{
    /* overflow-y: scroll; */
    min-height: 100%;
    position: relative;
    z-index: 1;
    /* overflow:hidden; */
    background-color: #f2f2f2;
}



#contents{
    width: 100%;
    /* height: 100%; */
    position: relative;
    padding-bottom: 100px;
    background-color: #f2f2f2;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

.no-footer #contents{
    padding-bottom: 20px;
}

#contents:after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.1);
    -webkit-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    -moz-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    -o-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;

}

#contents.trans:after{
    opacity: 1;
    width: 100%;
    height: 1000%;
    -webkit-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    -moz-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    -o-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    transition: opacity 300ms cubic-bezier(.68,0,.42,1);
}


.gnavi-nav-open #contents{
    -webkit-transform: translate(110px, 0);
    -moz-transform: translate(110px, 0);
    -ms-transform: translate(110px, 0);
    -o-transform: translate(110px, 0);
    transform: translate(110px, 0);
}

.cnavi-nav-open #contents{
    -webkit-transform: translate(-110px, 0);
    -moz-transform: translate(-110px, 0);
    -ms-transform: translate(-110px, 0);
    -o-transform: translate(-110px, 0);
    transform: translate(-110px, 0);
}


#page-title{
    font-size:2em;
}


/*
 #footer
---------------------------------------------------*/
#footer{
    width: 100%;
    height: 72px;
    overflow: hidden;
    margin-top: -72px;
    /* position: absolute; */
    /* bottom: 0; */
    -webkit-transition: height 0.5s ease-in-out 1s, margin-top 0.5s ease-in-out 1s;
    -moz-transition: height 0.5s ease-in-out 1s, margin-top 0.5s ease-in-out 1s;
    -o-transition: height 0.5s ease-in-out 1s, margin-top 0.5s ease-in-out 1s;
    transition: height 0.5s ease-in-out 1s, margin-top 0.5s ease-in-out 1s;
    position: relative;
    z-index: 1;
}

#footer .container{
    margin:0;
}

#footer .container #copyright{
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing:0.15em;
    font-size:1.2em;
}
@media only screen and (max-width: 560px){
    #footer .container #copyright{
        letter-spacing:0.1em;
        font-size:1.1em;
    }

}

.index #footer,
.form-index #footer,
.no-footer #footer{
    margin-top: 0px;
    height: 0px;
    -webkit-transition: height 0s 0s, margin-top 0s 0s;
    -moz-transition: height 0s 0s, margin-top 0s 0s;
    -o-transition: height 0s 0s, margin-top 0s 0s;
    transition: height 0s 0s, margin-top 0s 0s;
}

#pagetop{
    position:absolute;
    width:31px;
    height:31px;
    top:98px;
    right:43px;
}
#pagetop a{
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}
#pagetop a:hover{
    opacity:0.5;
    -moz-opacity:0.5;
    filter: alpha(opacity=50);
}

#copyright{
    padding: 20px 0 30px;
    text-align:center;
    letter-spacing:0.05em;
}


/*
 class
---------------------------------------------------*/
/* fonts
-------------------------------------------------*/
.sections{
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing: 0.05em;
}
.sections [lang="ja"]{
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing: 0;
}


.icon{
    display:inline-block;
}

.icon-download{
    width:10px;
    height:12px;
    margin-right:0.2em;
    background:no-repeat 50% 50%;
    background-size:100%;
    background-image:url(../img/icons/icon_download.gif);
    background-image:url(../img/icons/icon_download.svg);
}

/*
 .container
-------------------------------------------------*/
.container{
    margin: 0 15px 0;
    *zoom: 1;
}
.container:before, .container:after { display: table; content: ""; line-height: 0;}
.container:after { clear: both; }


.container-fulid{
    *zoom: 1;
}
.container-fulid:before, .container-fulid:after { display: table; content: ""; line-height: 0;}
.container-fulid:after { clear: both; }

@media only screen and (max-width: 400px){
    #header .container{
        margin:0;
    }
}
/*
 .contents
-------------------------------------------------*/
.content{
    background-color:#F2F2F2;
    position: relative;
    z-index:0;
    -webkit-transition: -webkit-transform 1.1s cubic-bezier(.68,0,.42,1);
    -moz-transition: -moz-transform 1.1s cubic-bezier(.68,0,.42,1);
    -o-transition: -o-transform 1.1s cubic-bezier(.68,0,.42,1);
    transition: transform 1.1s cubic-bezier(.68,0,.42,1);
    *zoom: 1;
}
.content:before, .content:after { display: table; content: ""; line-height: 0;}
.content:after { clear: both; }

.content.moveUp{
    -webkit-transform: translate(0, -160px);
    -moz-transform: translate(0, -160px);
    -o-transform: translate(0, -160px);
    transform: translate(0, -160px);
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

#top.moveUp{
    -webkit-transform: translate(0, -1px);
    -moz-transform: translate(0, -1px);
    -o-transform: translate(0, -1px);
    transform: translate(0, -1px);
    -webkit-transition-duration: 100ms;
    -moz-transition-duration: 100ms;
    -o-transition-duration: 100ms;
    transition-duration: 100ms;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

.content.show{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:2;
    -webkit-transition-duration: 900ms;
    -moz-transition-duration: 900ms;
    -o-transition-duration: 900ms;
    transition-duration: 900ms;
}



.content .container{
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
}

@media only screen and (max-width: 1000px){
    .content .container{
        width: 100%;
    }
}

/*
 .flow-grid
-------------------------------------------------*/
.flow-grid{
    overflow:hidden;
    *zoom: 1;
}
.flow-grid:before, .flow-grid:after { display: table; content: ""; line-height: 0;}
.flow-grid:after { clear: both; }

.mobile .flow-grid{
    min-height:100hv;
}

.flow-grid .flow-grid-col{
    float:left;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 1.3s cubic-bezier(.68,0,.42,1);
    -moz-transition: -moz-transform 1.3s cubic-bezier(.68,0,.42,1);
    -o-transition: -o-transform 1.3s cubic-bezier(.68,0,.42,1);
    transition: transform 1.3s cubic-bezier(.68,0,.42,1);
}

.flow-grid .flow-grid-col:nth-child(2){
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}

.flow-grid .flow-grid-col:nth-child(3){
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

.flow-grid .flow-grid-col:nth-child(4){
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}

.flow-grid .flow-grid-col:nth-child(5){
    -webkit-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
}

.flow-grid .flow-grid-col:nth-child(6){
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}
.flow-grid .flow-grid-col:nth-child(7){
    -webkit-transition-delay: 600ms;
    -moz-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms;
}
.flow-grid .flow-grid-col:nth-child(8){
    -webkit-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    transition-delay: 700ms;
}


.flow-grid.col-1 .flow-grid-col{ width:100%; }
.flow-grid.col-2 .flow-grid-col{ width:50%; }
.flow-grid.col-3 .flow-grid-col{ width:33.33333%;}
.flow-grid.col-4 .flow-grid-col{ width:25%;}
.flow-grid.col-5 .flow-grid-col{ width:20%;}
.flow-grid.col-6 .flow-grid-col{ width:16.666666%;}
.flow-grid.col-7 .flow-grid-col{ width:14.285714%;}
.flow-grid.col-8 .flow-grid-col{ width:12.5%;}


.flow-grid.hide .flow-grid-col{
    -webkit-transition: -webkit-transform 0s 0s;
    -moz-transition: -moz-transform 0s 0s;
    -o-transition: -o-transform 0s 0s;
    transition: transform 0s 0s;
}


/*
 .entry
-------------------------------------------------*/
.entry{
    overflow: hidden;
}
.entry a{
    display:block;
    width:100%;
    position:relative;
    margin-top: -20px;
}

.entry.has-body a{
    margin-top:-10px;
}

.entry .thumb-wrap{
    position:relative;
    z-index: 1;
    margin-top: -20px;
}

.entry.has-body .thumb-wrap{
    margin-top:-10px;
}


.entry .thumb{
    width: 100%;
    top: 0;
    left: 0;

    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);

    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

.entry a:hover .thumb{
    -webkit-transform: translate(0, 20px);
    -moz-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    -o-transform: translate(0, 20px);
    transform: translate(0, 20px);
}
.entry.has-body a:hover .thumb{
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
}


.mobile .entry a .thumb{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.flow-grid-col .entry .thumb img{
    width:100%;
    height:auto;
}
.entry .meta{
    position:absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index: 3;
    background-color:rgba(0,0,0,0.5);
    text-align:center;
    color:#fff;

    letter-spacing: 0.25em;
    line-height: 1.2;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight: 700;

    opacity:0;

    -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out, -moz-transform 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out, -o-transform 0.3s ease-out;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}


.entry a:hover .meta{
    opacity:1;
    -webkit-transform: translate(0, 20px);
    -moz-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    -o-transform: translate(0, 20px);
    transform: translate(0, 20px);
}
.entry.has-body a:hover .meta{
    -webkit-transform: translate(0, 10px);
    -moz-transform: translate(0, 10px);
    -ms-transform: translate(0, 10px);
    -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
}

.mobile .entry a .meta{
    display:none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.entry .meta .date,
.entry .meta .client{
    position:absolute;
    width:100%;
    padding: 18px 5% 30px;
    bottom: 20px;
    font-size: 1.5em;
}

.entry .meta .date:after,
.entry .meta .client:after{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    margin-left:-10px;
    width:20px;
    height:2px;
    background-color:#fff;
}

.entry .meta .title{
    position: absolute;
    width: 100%;
    padding: 0 5% 15px;
    bottom: 40px;
    font-size: 1.8em;
}

.entry .meta .title,
.entry .meta .date,
.entry .meta .client{
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    transform: translate(0, -10px);
}

.entry a:hover .meta .title,
.entry a:hover .meta .date,
.entry a:hover .meta .client{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}


.entry .meta .client + .title,
.entry .meta .date + .title{
    bottom: 87px;
}


.entry .body{
    position: relative;
    z-index: 2;
    padding:40px 10%;
    background-color:#fff;
    color:#1a1a1a;
}

.entry .body .title{
    font-size:1.8em;
    line-height:1.3;
    margin-bottom: 0.5em;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
}


.entry .body p{
    font-size: 1.6em;
    line-height:1.3;
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
}


/*
 .section
-------------------------------------------------*/

.section{
    font-size:1.6em;
    background-color:#fff;
    padding: 50px 50px 20px;
    margin-bottom:20px;
}

.section{
    overflow:hidden;
    *zoom: 1;
}
.section:before, .section:after { display: table; content: ""; line-height: 0;}
.section:after { clear: both; }

.section table,
.section ol,
.section ul,
.section dl,
.section blockquote,
.section pre,
.section code,
.section p {
    margin-bottom: 2em;
}

.section table ul, .section table ol, .section table dl, .section table p,
.section ul ul, .section ul ol, .section ul dl, .section ul p,
.section ol ul, .section ol ol, .section ol dl, .section ol p,
.section dl ul, .section dl ol, .section dl dl, .section dl p{
    margin-bottom: 0;
}

.section table{
    width:100%;
}

.section table th{
    font-weight:normal;
}
.section table td{
}


.section-title{}

.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title h6{
}

.section-content{
    margin-bottom: 2em;
}




.section-tabled{
    *zoom: 1;
}
.section-tabled:before, .section-tabled:after { display: table; content: ""; line-height: 0;}
.section-tabled:after { clear: both; }

.section-tabled .tabled-row{
    *zoom: 1;
}
.section-tabled .tabled-row:before, .section-tabled .tabled-row:after { display: table; content: ""; line-height: 0;}
.section-tabled .tabled-row:after { clear: both; }

.section-tabled .tabled-th{
    width:220px;
    float:left;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight: 700;
}

.section-tabled .tabled-td{
    width:680px;
    float:left;
}

@media only screen and (max-width: 1000px){
    .section-tabled .tabled-th{
        position:absolute;
        float:none;
    }
    .section-tabled .tabled-td{
        padding-left:220px;
        width:100%;
        float:none;
    }
}


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

    .section{
        padding: 50px 20px 20px;
        margin-bottom:0;
    }

    .section-tabled .tabled-th{
        position:relative;
        width:100%;
        margin-bottom:20px;
        text-align:center;
        font-size:1.5em;
    }
    .section-tabled .tabled-td{
        padding-left:0;
    }
}

/*
 .lang-nav
-------------------------------------------------*/
.lang-nav{
    height:50px;
    line-height:50px;
    text-align:center;
    margin-bottom:20px;
}
.lang-nav li{
    display:inline-block;
    margin:0 0.7em;
}
.lang-nav li a{
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    color:#1a1a1a;
    font-weight:bold;
    font-size:1.6em;
}

.lang-nav li a span{
    padding:0 0.2em;
}


/*
 .paginate
-------------------------------------------------*/
.paginate{
    width: 100%;
    height:40px;
    margin:0 auto 20px;
    position:relative;
}

.paginate .prev,
.paginate .next,
.paginate .list{
    position:absolute;
    top:0;
}

.paginate .prev{
    left:30px;
}
.paginate .list{
    left:50%;
    margin-left:-20px;
}
.paginate .next{
    right:30px;
}

.paginate a,
.paginate span{
    display:block;
    width:40px;
    height:40px;
}


.paginate .list a{
    position:relative;
    padding: 10px;
}
.paginate .list a span{
    width: 20px;
    height: 20px;
    overflow:hidden;
    position: relative;
}
.paginate .list a i{
    display:block;
    position:absolute;
    background-color:#000;
    width:6px;
    height:0;
    -webkit-transition-property: height, -webkit-transform;
    -moz-transition-property: height, -moz-transform;
    -o-transition-property: height, -o-transform;
    transition-property: height, transform;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: cubic-bezier(.75,0,.3,1);
    -moz-transition-timing-function: cubic-bezier(.75,0,.3,1);
    -o-transition-timing-function: cubic-bezier(.75,0,.3,1);
    transition-timing-function: cubic-bezier(.75,0,.3,1);
}

.paginate .list a i.c1{ left:0px; }
.paginate .list a i.c2{ left:7px; }
.paginate .list a i.c3{ left:14px; }

.paginate .list a i.c1.b1{ height:7px; 	-webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	-o-transform: translate(0, 0); 		transform: translate(0, 0); }
.paginate .list a i.c1.b2{ height:7px; 	-webkit-transform: translate(0, 8px); 	-moz-transform: translate(0, 8px); 	-o-transform: translate(0, 8px); 	transform: translate(0, 8px); }
.paginate .list a i.c1.b3{ height:7px; 	-webkit-transform: translate(0, 40px); 	-moz-transform: translate(0, 40px); -o-transform: translate(0, 40px); 	transform: translate(0, 40px); }
.paginate .list a i.c2.b1{ height:10px; -webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	-o-transform: translate(0, 0); 		transform: translate(0, 0); }
.paginate .list a i.c2.b2{ height:7px; 	-webkit-transform: translate(0, 11px); 	-moz-transform: translate(0, 11px); -o-transform: translate(0, 11px); 	transform: translate(0, 11px); }
.paginate .list a i.c2.b3{ height:7px; 	-webkit-transform: translate(0, 35px); 	-moz-transform: translate(0, 35px); -o-transform: translate(0, 35px); 	transform: translate(0, 35px); }
.paginate .list a i.c3.b1{ height:5px; 	-webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	-o-transform: translate(0, 0); 		transform: translate(0, 0); }
.paginate .list a i.c3.b2{ height:7px; 	-webkit-transform: translate(0, 6px); 	-moz-transform: translate(0, 6px); 	-o-transform: translate(0, 6px); 	transform: translate(0, 6px); }
.paginate .list a i.c3.b3{ height:7px; 	-webkit-transform: translate(0, 33px); 	-moz-transform: translate(0, 33px); -o-transform: translate(0, 33px); 	transform: translate(0, 33px); }

.paginate .list a:hover i.c1.b1{ height:7px; 	-webkit-transform: translate(0, -8px); 	-moz-transform: translate(0, -8px);	 -o-transform: translate(0, -8px); 	transform: translate(0, -8px); }
.paginate .list a:hover i.c1.b2{ height:7px; 	-webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	 -o-transform: translate(0, 0); 	transform: translate(0, 0); }
.paginate .list a:hover i.c1.b3{ height:7px; 	-webkit-transform: translate(0, 8px); 	-moz-transform: translate(0, 8px); 	 -o-transform: translate(0, 8px); 	transform: translate(0, 8px); }
.paginate .list a:hover i.c2.b1{ height:10px; 	-webkit-transform: translate(0, -11px); -moz-transform: translate(0, -11px); -o-transform: translate(0, -11px); transform: translate(0, -11px); }
.paginate .list a:hover i.c2.b2{ height:10px; 	-webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	 -o-transform: translate(0, 0); 	transform: translate(0, 0); }
.paginate .list a:hover i.c2.b3{ height:7px; 	-webkit-transform: translate(0, 11px); 	-moz-transform: translate(0, 11px);  -o-transform: translate(0, 11px); 	transform: translate(0, 11px); }
.paginate .list a:hover i.c3.b1{ height:5px; 	-webkit-transform: translate(0, -6px); 	-moz-transform: translate(0, -6px);  -o-transform: translate(0, -6px); 	transform: translate(0, -6px); }
.paginate .list a:hover i.c3.b2{ height:5px; 	-webkit-transform: translate(0, 0); 	-moz-transform: translate(0, 0); 	 -o-transform: translate(0, 0); 	transform: translate(0, 0); }
.paginate .list a:hover i.c3.b3{ height:7px; 	-webkit-transform: translate(0, 6px); 	-moz-transform: translate(0, 6px); 	 -o-transform: translate(0, 6px); 	transform: translate(0, 6px); }


.paginate .prev a:before,
.paginate .prev a:after,
.paginate .next a:before,
.paginate .next a:after,
.paginate .prev span:before,
.paginate .prev span:after,
.paginate .next span:before,
.paginate .next span:after{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    width:10px;
    height:2px;
    background-color:#171717;
    border-radius:1px;
    margin-left:-4px;

    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -o-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-transition: margin-left 0.5s ease-out, -webkit-transform 0.5s ease-out;
    -moz-transition: margin-left 0.5s ease-out, -moz-transform 0.5s ease-out;
    -o-transition: margin-left 0.5s ease-out, -o-transform 0.5s ease-out;
    transition: margin-left 0.5s ease-out, transform 0.5s ease-out;

}
.paginate .prev span:before,
.paginate .prev span:after,
.paginate .next span:before,
.paginate .next span:after{
    background-color:#d1d1d1;
}

.paginate .prev a:before,
.paginate .prev span:before{
    margin-top:-4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.paginate .prev a:after,
.paginate .prev span:after{
    margin-top:2px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.paginate .prev a:hover:before{
    margin-left:-8px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.paginate .prev a:hover:after{
    margin-left:-8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}



.paginate .next a:before,
.paginate .next span:before{
    margin-top:-4px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.paginate .next a:after,
.paginate .next span:after{
    margin-top:2px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.paginate .next a:hover:before{
    margin-left:0px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.paginate .next a:hover:after{
    margin-left:0px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}



/*
.slide-container
---------------------------------------*/
.slide-container{
    position:relative;
    height: 100%;
    width: 200%;
    overflow:hidden;
}

.slide-content{
    /* position:absolute; */
    /* top:0; */

    width: 50%;
    float: left;
    position: relative;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    -webkit-transition-timing-function: cubic-bezier(.7,0,.2,1);
    -moz-transition-timing-function: cubic-bezier(.7,0,.2,1);
    -o-transition-timing-function: cubic-bezier(.7,0,.2,1);
    transition-timing-function: cubic-bezier(.7,0,.2,1);
}

.slide-content.slide-left-in{
    -webkit-transform: translate(-200%, 0);
    -moz-transform: translate(-200%, 0);
    -ms-transform: translate(-200%, 0);
    -o-transform: translate(-200%, 0);
    transform: translate(-200%, 0);
}

.slide-content.slide-right-out.play{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.slide-content.slide-right-in.play{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}


.slide-content.slide-left-out.play{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: translate(50%, 0);
    -moz-transform: translate(50%, 0);
    -ms-transform: translate(50%, 0);
    -o-transform: translate(50%, 0);
    transform: translate(50%, 0);
}

.slide-content.slide-left-in.play{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}

.slide-content:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: 1;
    background-color: rgba(0,0,0,0.2);
    -webkit-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    -moz-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    -o-transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;
    transition: opacity 0ms, width 10ms 500ms, height 10ms 500ms;

}

.slide-content.cover:after{
    opacity: 1;
    width: 100%;
    height: 1000%;
    -webkit-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    -moz-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    -o-transition: opacity 300ms cubic-bezier(.68,0,.42,1);
    transition: opacity 300ms cubic-bezier(.68,0,.42,1);
}



/*
.hover-line
---------------------------------------*/
.hover-line-links a > span,
a.hover-line > span{
    display:inline-block;
    position:relative;
    white-space: nowrap;
}


.hover-line-links a > span:after,
a.hover-line > span:after{
    content:'';
    height:1px;
    width:0%;
    position:absolute;
    top:50%;
    left:110%;
    background-color:#000;
    -webkit-transition: width 500ms, left 500ms;
    -moz-transition: width 500ms, left 500ms;
    -o-transition: width 500ms, left 500ms;
    transition: width 500ms, left 500ms;
}


.hover-line-links a:hover > span:after,
.hover-line-links a.current > span:after,
a.hover-line:hover > span:after,
a.hover-line.current > span:after{
    width:120%;
    left:-10%;
    -webkit-transition: width 500ms;
    -moz-transition: width 500ms;
    -o-transition: width 500ms;
    transition: width 500ms;
}
/*
.btn
---------------------------------------*/
.btn,
a.btn,
button.btn{
    display:inline-block;
    background-color: #008ca2;
    position:relative;
    width:150px;
    height:35px;
    line-height:35px;
    font-size:17px;
    letter-spacing:0.06em;
    color:#fff;
    text-align:center;
    overflow:hidden;
    border:none;
    padding:0;
    vertical-align: top;

    -webkit-transition: background-color ease-out 0.25s;
    -moz-transition: background-color ease-out 0.25s;
    -o-transition: background-color ease-out 0.25s;
    transition: background-color ease-out 0.25s;
}

.btn:hover,
.btn:active{
    background-color: #00738C;
}

.btn_sub,
a.btn_sub,
button.btn_sub{
    background-color:#666;
}

.btn_sub:hover,
a.btn_sub:hover,
button.btn_sub:hover,
.btn_sub:active,
a.btn_sub:active,
button.btn_sub:active{
    background-color: #555;
}


/* list
---------------------------------------*/
.marker-list li{
    position:relative;
    padding-left:1.2em;
}
.marker-list li .mark{
    position:absolute;
    left:0;
}


.float-list{
    *zoom: 1;
}
.float-list:before, .float-list:after { display: table; content: ""; line-height: 0;}
.float-list:after { clear: both; }

.float-list li{
    float: left;
    display: block;
}

.inline-list li{
    display: inline;
}

/*
 table
---------------------------------------*/
.info_table th,
.info_table td,
.form_table th,
.form_table td{
    border-top:1px solid #eee;
    vertical-align:top;
    height:39px;
    line-height:39px;
}
.form_table th,
.form_table td{
    padding:0.5em 0 0.5em 10px;
}
.form_table td.require{
    width:20px;
}

.form_table tr:last-child th,
.form_table tr:last-child td{
    background:none;
}

.form_table td > div{
    position:relative;
}

/*
 .backtotop
-------------------------------------------------*/
.backtotop{
    text-align:right;
    margin-bottom:1em;
}


/*
 form
-------------------------------------------------*/
select{
    color:inherit;
    padding:4px;
}

textarea,
.text-input{
    padding:6px 4px;
    border: none;
    border-top:1px solid #d8d7d5;
    border-left:1px solid #d8d7d5;
    background-color: #f2f2f2;
    color: inherit;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}


label.radio,
label.checkbox{
    margin-right:1em;
    cursor:pointer;
}

label.radio input,
label.checkbox input{
    vertical-align:-0.2em;
    margin-right:0.5em;
    cursor:pointer;
}

select:focus,
textarea,
.text-input:focus{
    outline:none;
}

select.error{
    background-color:#f2e8c1;
    border-color:#d8ceaa;
}
textarea.error,
.text-input.error{
    border-color:#d8ceaa;
    background-color:#f2e8c1;
    color: #E69200;
}
label.radio.error,
label.checkbox.error{
    color:#cc0000;
}


textarea.hover,
.text-input.hover{
    border-color:#c0cfd1;
    background-color:#d8e9ee;
}

textarea.focus,
.text-input.focus{
    border-color:#a1c3cd;
    background-color:#b5dce9;
    color:#0090b7;
}

.error_message{
    display:inline-block;
    color: #E69200;
}
.form_validation_error{
    position:absolute;
    display:block;
    background-color: rgba(231, 156, 76, 0.75);
    color:#fff;
    padding: 3px 5px;
    line-height: 2;
    font-size:12px;
}

/*
 utils
-------------------------------------------------*/
.hidden{
    display: none;
}

.tal{ text-align:left; }
.tar{ text-align:right }
.tac{ text-align:center }
.taj{
    text-align: justify;
    text-justify: distribute;
}

.centered{
    text-align:center
}

.require{
    color:#e69900;
}

.attention{
    color:#cc0000;
}


.front{
    z-index:1 !important;
}
.behind{
    z-index:0 !important;
}

/*
 .mCustomScroll
---------------------------------------*/
.mCustomScrollbar{ -ms-touch-action: none; touch-action: none;}
.mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: auto; touch-action: auto; }

.mCustomScrollBox{
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}

.mCSB_container{
    overflow: hidden;
    width: auto;
    height: auto;
}

.mCSB_inside > .mCSB_container{ margin-right: 50px; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; }

.mCSB_scrollTools{
    position: absolute;
    width: 3px;
    height: auto;
    left: auto;
    top: 0;
    right: 20px;
    bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools{ right: -26px; }

.mCSB_outside.mCS-sub-nav + .mCSB_scrollTools{
    width: 16px;
    right: auto;
    left: 0;
}

.mCSB_outside.mCS-sub-nav + .mCSB_scrollTools{ left: -15px; }
.mCSB_scrollTools .mCSB_draggerContainer{
    position: absolute;
    top: 0;
    left: auto;
    bottom: 0;
    right: 0;
    height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }
.mCSB_scrollTools .mCSB_draggerRail{
    width: 3px;
    height: 100%;
    margin: 0 auto;
}

.mCS-sub-nav+.mCSB_scrollTools .mCSB_draggerRail{
    width:16px;
}

.mCSB_scrollTools .mCSB_dragger{
    cursor: pointer;
    width: 100%;
    height: 30px;
    z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    position: relative;
    height: 100%;
    margin: 0;
    text-align: center;
    background-color:#1a1a1a;

    -webkit-transition: opacity ease-out 0.25s;
    -moz-transition: opacity ease-out 0.25s;
    -o-transition: opacity ease-out 0.25s;
    transition: opacity ease-out 0.25s;
}
.mCS-sub-nav .mCSB_dragger .mCSB_dragger_bar{
    background-color:#fff;
    width: 15px;
    opacity:0.3;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar:hover{
    opacity:0.5;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
    width: 12px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
    width: 8px;
}


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

    .mCSB_outside.mCS-sub-nav + .mCSB_scrollTools{
        width: 3px;
        right: 20px;
        left: 0;
    }

    .mCSB_outside.mCS-sub-nav + .mCSB_scrollTools{ left: auto; }

    .mCS-sub-nav+.mCSB_scrollTools .mCSB_draggerRail{
        width: 3px;
    }

    .mCS-sub-nav .mCSB_dragger .mCSB_dragger_bar{
        background-color:#1a1a1a;
        width: auto;
        opacity:1;
    }

}

/*
 page styles
-------------------------------------------------------------*/

/*
 index
---------------------------------------------------*/
.index #wrap,
.index #contents-wrap,
.index #contents,
.from-index #wrap,
.from-index #contents-wrap,
.from-index #contents{
    height:100%;
    padding:0;
}
.index #wrap,
.index #contents-wrap{
    overflow: hidden;
}
.from-index #wrap{
    -webkit-transition: padding-top 0ms;
    -moz-transition: padding-top 0ms;
    -o-transition: padding-top 0ms;
    transition: padding-top 0ms;
    padding-top: 60px;
}

#top,
#top #stage{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow: hidden;
}

.from-index #top{
    top:-60px}

#top #site-name{
    position:absolute;
    width:90%;
    margin-left: -45%;
    top:51%;
    left:50%;
    z-index:1;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height:1;
    text-align: center;


    -webkit-transform: translate(0,-20px);
    -moz-transform: translate(0,-20px);
    -ms-transform: translate(0,-20px);
    -o-transform: translate(0,-20px);
    transform: translate(0,-20px);

    -webkit-transition: -webkit-transform 1s ease-out;
    -moz-transition: -moz-transform 1s ease-out;
    -o-transition: -o-transform 1s ease-out;
    transition: transform 1s ease-out;
}

#top #site-name span{
    display: inline-block;
    opacity:0;
    margin-right: 0.3em;
    -webkit-transform: scale(1.9,1.9);
    -moz-transform: scale(1.9,1.9);
    -ms-transform: scale(1.9,1.9);
    -o-transform: scale(1.9,1.9);
    transform: scale(1.9,1.9);

    -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    -moz-transition: opacity .5s ease-out, -moz-transform .5s ease-out;
    -o-transition: opacity .5s ease-out, -o-transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out;
}
#top #site-name span:last-child{
    margin-right: 0;
}
#top #site-name .c6{
    margin-right:1em;
}
#top #site-name.show{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
#top #site-name.show span{
    opacity:1;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

@media only screen and (max-width: 600px){
    #top #site-name{
        font-size:30px;
    }
}

@media only screen and (max-width: 480px){
    #top #site-name{
        font-size:25px;
    }
}

@media only screen and (max-width: 380px){
    #top #site-name{
        font-size:20px;
    }
}

#top #images{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    overflow:hidden;
}
#top #images li{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position: 50% 50%;
    z-index:0;

    opacity:0;
    -webkit-transform: scale(1.14,1.14);
    -moz-transform: scale(1.14,1.14);
    -ms-transform: scale(1.14,1.14);
    -o-transform: scale(1.14,1.14);
    transform: scale(1.14,1.14);

    -webkit-transition: opacity 0, -webkit-transform 0;
    -moz-transition: opacity 0, -moz-transform 0;
    -o-transition: opacity 0, -o-transform 0;
    transition: opacity 0, transform 0;
}

#top #images li.current{
    top:0;
    left:0;
    z-index:2;
    opacity:1;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);

    -webkit-transition: opacity 1.6s ease-out, -webkit-transform 7.2s linear;
    -moz-transition: opacity 1.6s ease-out, -moz-transform 7.2s linear;
    -o-transition: opacity 1.6s ease-out, -o-transform 7.2s linear;
    transition: opacity 1.6s ease-out, transform 7.2s linear;
}

#top #images li.hide{
    z-index:1;
}


#top #scroll-info{
    position:absolute;
    left:50%;
    bottom:30px;
    margin-left: -50px;
    width: 100px;
    height: 45px;

    z-index:2;
    overflow:hidden;


    -webkit-transform: translate(0, 80px);
    -moz-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    -o-transform: translate(0, 80px);
    transform: translate(0, 80px);

    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    -moz-transition: -moz-transform 0.6s ease-in-out;
    -o-transition: -o-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

#top #scroll-info.show{
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}

#top #scroll-info a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #1a1a1a;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height:1;
    text-align:center;
    letter-spacing:0.2em;

    z-index: 1;
}
#top #scroll-info-line{
    position:absolute;
    left: 10px;
    bottom: 10px;
    width:80px;
    height:2px;
    overflow:hidden;
    z-index: 0;
}
#top #scroll-info-line div{
    position:absolute;
    left: 0;
    top: 0;
    width:80px;
    height:2px;
    background-color:#1a1a1a;

    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: scroll-info-line;
    animation-name: scroll-info-line;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
}
@-webkit-keyframes scroll-info-line {
    from, 5% { width: 0px; }
    33%,66% { left: 0px; width: 80px; }
    95%, to { left: 80px; }
}

@keyframes scroll-info-line {
    from, 5% { width: 0px; }
    33%,66% { left: 0px; width: 80px; }
    95%, to { left: 80px; }
}



/*
 portfolio
---------------------------------------------------*/
#portfolio{
}


#portfolio .entry{
    /* margin-bottom:1px; */
}


/*
 portfolio-detail
---------------------------------------------------*/
#portfolio-detail{
}

#portfolio-detail #photo{
    padding-right: 400px;
    float:left;
    width: 100%;
    overflow-x: hidden;
}

#portfolio-detail #photo .entry-photo{
    padding: 20px 20px 0;
}

#portfolio-detail #photo .entry-photo .photo img{
    width:100%
}


#portfolio-detail #photo .entry-photo.movie .photo{
    height:0;
    padding-bottom: 56.25%;
    overflow:hidden;
    position:relative;
    cursor:pointer;
}

#portfolio-detail #photo .entry-photo.movie .photo:before{
    content:'';
    display:block;
    position:absolute;
    background-color:rgba(0,0,0,0.4);
    width:100%;
    height:100%;
    top:0;
    left:0;
    -webkit-transition: background-color 0.2s ease-out;
    -moz-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out;
}

#portfolio-detail #photo .entry-photo.movie .photo:after{
    content:'';
    display:block;
    position:absolute;
    width: 10%;
    height: 17.777777778%;
    top:50%;
    left:50%;
    margin-left:-5%;
    margin-top:-5%;
    background: url(../img/icons/icon_play.svg) no-repeat 50% 50%;
    background-size:contain;
    -webkit-transition: -webkit-transform 0.5s ease-out, opacity 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out, opacity 0.5s ease-out;
    -o-transition: -o-transform 0.5s ease-out, opacity 0.5s ease-out;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}


#portfolio-detail #photo .entry-photo.movie .photo:hover:before{
    background-color:rgba(0,0,0,0.5);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#portfolio-detail #photo .entry-photo.movie .photo:hover:after{
    -webkit-transform: scale(1.05, 1.05);
    -moz-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

#portfolio-detail #photo .entry-photo.movie .photo.hide:after{
    opacity:0;
    -webkit-transform: scale(2, 2);
    -moz-transform: scale(2, 2);
    -ms-transform: scale(2, 2);
    -o-transform: scale(2, 2);
    transform: scale(2, 2);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(.68,0,.42,1), opacity 0.5s cubic-bezier(.68,0,.42,1);
    -moz-transition: -moz-transform 0.5s cubic-bezier(.68,0,.42,1), opacity 0.5s cubic-bezier(.68,0,.42,1);
    -o-transition: -o-transform 0.5s cubic-bezier(.68,0,.42,1), opacity 0.5s cubic-bezier(.68,0,.42,1);
    transition: transform 0.5s cubic-bezier(.68,0,.42,1), opacity 0.5s cubic-bezier(.68,0,.42,1);
}


#portfolio-detail #photo .entry-photo.movie .embed-container{
    margin-top: -56.25%;
    height:0;
    padding-bottom: 56.25%;
    overflow:hidden;
    position:relative;
}

#portfolio-detail #photo .entry-photo.movie .embed-container .embed-item{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
}

#portfolio-detail #photo .entry-photo .credit{
    padding-top: 10px;
    margin-bottom: 0;
    font-size: 1.3em;
    color: #808080;
    text-align: right;
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing:0.1em;
}

#portfolio-detail #info{
    position: absolute;
    top:0;
    right: 0;
    width:400px;
    height: 100%;
    padding-top: 0;
    /* padding-bottom: 30px; */
    background-color: #fff;
    border-left:1px solid #fff;
    z-index: 10;
    overflow: hidden;
}
#portfolio-detail #info.fixed{
    position: fixed;
    top: 60px !important;
}

.nav-open #portfolio-detail #info.fixed,
.page-loading #portfolio-detail #info.fixed{
    position: absolute;
    top: inherit !important;
}

#portfolio-detail #info .entry-detail{
    padding-top: 20px;
    padding-left: 50px;
    height: 100%;
    padding-bottom: 150px;
    position: relative;
}

#portfolio-detail #info .entry-detail p{
    font-size:1.3em;
    line-height:2;
}

#portfolio-detail #info .entry-detail.mCS_no_scrollbar{
    padding-right:50px;
}

#portfolio-detail #info .entry-detail .title{
    padding-top: 20px;
    margin-bottom:20px;
    font-size:2em;
    line-height:1.2;
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing:0.15em;
    font-weight: 700;
}

#portfolio-detail #info .entry-detail .categories{
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    margin-bottom:10px;
}
#portfolio-detail #info .entry-detail .categories li{
    margin-bottom:5px;
    font-size:1.8em;
    line-height:1.5;
}

#portfolio-detail #info .entry-detail .body{
}
#portfolio-detail #info .entry-detail .more:before{
    content:"";
    display: block;
    position:relative;
    padding-top: 2em;
    margin-bottom: 2em;
    width:20px;
    border-bottom:1px solid #1a1a1a;
}

#portfolio-detail #info .entry-detail .body,
#portfolio-detail #info .entry-detail .more{
    font-size:1.2em;
}

#portfolio-detail .paginate{
    padding:20px 30px;
    margin-bottom: 0;
    height:80px;
    border-bottom:1px solid #e5e5e5;
}

#portfolio-detail .paginate .prev,
#portfolio-detail .paginate .next,
#portfolio-detail .paginate .list{
    top:20px;
}

#portfolio-detail .copy{
    position:absolute;
    width:100%;
    bottom: 30px;
    text-align:center;
    letter-spacing: 0.15em;
    font-size:1.2em;
    font-family: 'Calibre-Regular',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
}


#portfolio-detail #photo .slide-content{
    background-color: #f2f2f2;
}
#portfolio-detail #info .slide-content{
    background-color: #fff;
    height: 100%;
}


#portfolio-detail #info .slide-content.slide-right-out.play{
    -webkit-transform: translate(-70%, 0);
    -moz-transform: translate(-70%, 0);
    -ms-transform: translate(-70%, 0);
    -o-transform: translate(-70%, 0);
    transform: translate(-70%, 0);
}

#portfolio-detail #info .slide-content.slide-left-out.play{
    -webkit-transform: translate(70%, 0);
    -moz-transform: translate(70%, 0);
    -ms-transform: translate(70%, 0);
    -o-transform: translate(70%, 0);
    transform: translate(70%, 0);
}

.mobile .page-loading #portfolio-detail #photo{
    min-height:100vh;
}

@media only screen and (max-width: 1000px){
    #portfolio-detail #photo{
        padding-right: 40%;
    }
    #portfolio-detail #info{
        width:40%;
    }
    #portfolio-detail #info .entry-detail{
        padding-left:10%;
    }

    #portfolio-detail #info .entry-detail.mCS_no_scrollbar{
        padding-right:15%;
    }
}

@media only screen and (max-width: 800px){
    #portfolio-detail #photo{
        padding-right:0;
        height:auto !important;
        margin-bottom:50px
    }
    #portfolio-detail #info{
        position: relative;
        width: 100%;
        right: auto;
        height:auto !important;
        top: auto !important;
        border-left: none;
        float: left;
        overflow: visible;
    }

    #portfolio-detail #info .entry-detail{
        padding-left:10%;
        padding-bottom: 30px;
    }

    #portfolio-detail #info .entry-detail.mCS_no_scrollbar{
        padding-right: 10%;
    }

    #portfolio-detail .copy{
        bottom: -90px;
        padding-bottom: 30px;
        letter-spacing:0.1em;
        font-size:1.1em;
    }

}

/*
 news | blog
---------------------------------------------------*/
#news,
#blog{
    padding-top: 10px;
}


#news .entry,
#blog .entry{
    margin-bottom: 20px;
    padding: 0 10px;
}

/*
 news-detail | blog-detail
---------------------------------------------------*/
#news-detail{}
#news-detail .paginate{
    width:400px;
}
@media only screen and (max-width: 400px){
    #news-detail .paginate{
        width:100%;
    }
}

#news-detail .entry-detail{
    overflow-x: hidden;
}
#news-detail #photo{
    position:relative;
    background-color:#fff;

}

#news-detail #photo #images{
    padding-bottom: 20px;
    height: auto;
    position: relative;
    overflow: hidden;
}

#news-detail #photo #images.slider ul{
    position:relative;
    padding-top: 62%;
    overflow:hidden;
    z-index: 1;
    left: 0;
    -webkit-transition: left .2s ease-in-out, -webkit-transform .8s cubic-bezier(.68,0,.42,1);
    -moz-transition: left .2s ease-in-out, -moz-transform .8s cubic-bezier(.68,0,.42,1);
    -o-transition: left .2s ease-in-out, -o-transform .8s cubic-bezier(.68,0,.42,1);
    transition: left .2s ease-in-out, transform .8s cubic-bezier(.68,0,.42,1);
}
#news-detail #photo #images.slider ul.edge,
#news-detail #photo #images.slider ul.edge{
    -webkit-transition: left .8s cubic-bezier(.68,0,.42,1), -webkit-transform .8s cubic-bezier(.68,0,.42,1);
    -moz-transition: left .8s cubic-bezier(.68,0,.42,1), -moz-transform .8s cubic-bezier(.68,0,.42,1);
    -o-transition: left .8s cubic-bezier(.68,0,.42,1), -o-transform .8s cubic-bezier(.68,0,.42,1);
    transition: left .8s cubic-bezier(.68,0,.42,1), transform .8s cubic-bezier(.68,0,.42,1);
}
#news-detail #photo #images.slider ul.hover-prev{
    left:5%;
}
#news-detail #photo #images.slider ul.hover-next{
    left:-5%;
}
#news-detail #photo #images.slider ul.hover-prev.edge,
#news-detail #photo #images.slider ul.hover-next.edge{
    left:0;
}


#news-detail #photo #images.slider li{
    position: absolute;
    top: 0;
    overflow: hidden;
    text-align: center;
    background-color: #ccc;
}

#news-detail #photo #images.slider .cover{
    position: absolute;
    width:50%;
    top: 0;
    padding-top: 62%;
    z-index: 2;
    cursor:pointer;
}
.mobile #news-detail #photo #images.slider .cover{
    width:50%;
}

#news-detail #photo #images.slider .cover.next{
    right:0;
}

#news-detail #photo #images li img{
    width: 100%;
    height: auto;
}


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

    #news-detail #photo #images ul{
        width: 100%;
    }

    #news-detail #photo #images li{
        width: 100%;
    }

}

#news-detail #photo #images-control{
    text-align:center;
}
#news-detail #photo #images-control li{
    display:inline-block;
}

#news-detail #photo #images-control li a{
    display:inline-block;
    width:30px;
    height:30px;
    padding: 10px;
}

#news-detail #photo #images-control li a:after{
    content:'';
    display:inline-block;
    width:100%;
    height:100%;
    border-radius:5px;
    background-color:#e8e8e8;

    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

#news-detail #photo #images-control li a:hover:after,
#news-detail #photo #images-control li a.current:after{
    background-color:#1a1a1a;
    -webkit-transition: background-color 0s ease-out;
    -moz-transition: background-color 0s ease-out;
    -o-transition: background-color 0s ease-out;
    transition: background-color 0s ease-out;
}


#news-detail #info{
    font-size: 1.3em;
    padding: 20px 15%;
    margin-bottom: 50px;

    -webkit-transition: padding 0.5s ease-out;
    -moz-transition: padding 0.5s ease-out;
    -o-transition: padding 0.5s ease-out;
    transition: padding 0.5s ease-out;
}

@media only screen and (max-width: 1000px){
    #news-detail #info{
        padding: 20px 5%;
    }
}

#news-detail #info .title{
    font-size: 1.539em;
}

#news-detail #info .date{
    font-weight:bold;
    margin-bottom: 1.5em;
}

#news-detail #info .more:before{
    content:"";
    display: block;
    position:relative;
    padding-top: 0;
    margin-bottom: 2em;
    width:20px;
    border-bottom:1px solid #1a1a1a;
}



/*
 profile/press
---------------------------------------------------*/
#profile .section.hide,
#press .section.hide{
    opacity:0;
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    -o-transform: translate(0, 50px);
    transform: translate(0, 50px);
}
#profile .section.show,
#press .section.show{
    opacity:1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: opacity 1s ease-out, -webkit-transform 1s cubic-bezier(0,.7,.3,1);
    -moz-transition: opacity 1s ease-out, -moz-transform 1s cubic-bezier(0,.7,.3,1);
    -o-transition: opacity 1s ease-out, -o-transform 1s cubic-bezier(0,.7,.3,1);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0,.7,.3,1);

}
/*
 profile
---------------------------------------------------*/
#profile [lang="en"] h2,
#profile [lang="en"] h3,
#profile [lang="en"] h4,
#profile [lang="en"] .name,
#profile .tabled-th h3,
#profile .download h4{
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    font-weight: 700;
    letter-spacing:0.1em;
}

#profile .catch{
    margin-bottom:1em;
}

#profile .text_line{
    margin-bottom:1em;
}

#profile .section [lang="ja"] {
    font-size:83%;
    line-height:2.2;
}

#profile .history-table{
    line-height:2;
}
#profile .history-table th{
    padding-right:15px;
    width: 3em;
    vertical-align: top;
}

#profile .studio [lang="ja"],
#profile .showroom [lang="ja"],
#profile .staff [lang="ja"] {
    line-height:1.8;
}
#profile .studio [lang="ja"] h4,
#profile .showroom [lang="ja"] h4,
#profile .staff [lang="ja"] h4 {
    line-height:2;
}

#profile .studio [lang="ja"] p:nth-child(2){
    margin-bottom:0.5em;
}

#profile .staff{
    margin-bottom:1em;
    *zoom: 1;
}
#profile .staff:before, #profile .staff:after { display: table; content: ""; line-height: 0;}
#profile .staff:after { clear: both; }

#profile .staff .photo{
    float:left;
}
#profile .staff .prof{
    float:right;
    width:530px;
}

#profile .staff .prof .name{
    font-weight:bold;
}
#profile .staff .prof .pos{
    margin-bottom:1em;
}
#profile .staff .prof p{
    text-align: left;
    margin-bottom:0;
}

@media only screen and (max-width: 1000px){
    #profile .staff .photo{
        position:absolute;
        float:none;
    }
    #profile .staff .prof{
        float:none;
        width:100%;
        padding-left:150px;
    }
}
@media only screen and (max-width: 800px){
    #profile .section:first-child h2,
    #profile .section:first-child .catch{
        text-align:center;
        font-size:1.2em;
    }

    #profile .tabled-td.studio,
    #profile .tabled-td.showroom{
        margin-bottom: 40px;
    }

    #profile .tabled-td.studio,
    #profile .tabled-td.studio p,
    #profile .tabled-td.showroom,
    #profile .tabled-td.showroom p{
        text-align:center;
    }
    #profile .tabled-td.studio h4,
    #profile .tabled-td.showroom h4{
        font-size:1.2em;
    }

    #profile .staff{
        width: 440px;
        margin: 0 auto 40px;
    }

}
@media only screen and (max-width: 500px){
    #profile .staff{
        width: 100%;
    }
    #profile .staff .photo{
        position:relative;
        text-align:center;
        margin-bottom:20px;
    }
    #profile .staff .prof{
        text-align:center;
        padding-left:0;
    }
    #profile .staff .prof p{
        text-align:center;
    }
}

/*
 press
---------------------------------------------------*/

#press [lang="en"] h2,
#press [lang="en"] h3,
#press [lang="en"] h4,
#press [lang="en"] .name,
#press .tabled-th h2{
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing:0.1em;
}
#press .tabled-td h3{
    font-family: 'Calibre-Bold',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック", "MS PGothic",sans-serif;
    letter-spacing:0.1em;
}

#press .catch{
    margin-bottom:1em;
}

#press .section [lang="ja"] {
    font-size:83%;
    line-height:2.2;
}


/*
 contact
---------------------------------------------------*/
#contact.overlay{
    position:fixed;
    top:0;
    z-index: 3;
    width: 100%;
    height: 100%;
    visibility:hidden;
    opacity: 0;
    -webkit-transform: scale(1.14,1.14);
    -moz-transform: scale(1.14,1.14);
    -ms-transform: scale(1.14,1.14);
    -o-transform: scale(1.14,1.14);
    transform: scale(1.14,1.14);

    -webkit-transition: 500ms cubic-bezier(.68,0,.42,1);
    -moz-transition: 500ms cubic-bezier(.68,0,.42,1);
    -o-transition: 500ms cubic-bezier(.68,0,.42,1);
    transition: 500ms cubic-bezier(.68,0,.42,1);
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    -moz-transition-property: opacity, visibility, -moz-transform;
    -o-transition-property: opacity, visibility, -o-transform;
    transition-property: opacity, visibility, transform;
}
#contact.overlay.show{
    opacity: 1;
    visibility:visible;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

#contact.overlay:after{
    content:'';
    display:block;
    position:fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    z-index:2;
    background-color: rgba(0,0,0,0.7);
    -webkit-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    -moz-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    -o-transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;
    transition: opacity 500ms ease-out, width 100ms 500ms, height 100ms 500ms;

}

#contact.overlay.show:after{
    opacity: 1;
    width:100%;
    height: 100%;
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
}

#contact.overlay .container{
    position:relative;
    margin:0;
    padding-top:90px;
    padding-bottom:30px;
    font-size:0;
    height: 100%;
    min-height: 450px;
    overflow-y: auto;
    text-align: center;
    z-index:3;
    -webkit-transition: padding-left 500ms ease-out;
    -moz-transition: padding-left 500ms ease-out;
    -o-transition: padding-left 500ms ease-out;
    transition: padding-left 500ms ease-out;
}
.gnavi-nav-open #contact.overlay .container{
    padding-left: 220px;
}
#contact.overlay .container:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#contact.overlay .sections{
    display: inline-block;
    width:100%;
    max-width: 990px;
    font-size: 10px;
    margin: 0 auto;
    vertical-align: middle;
    text-align: left;
}

#contact.overlay .section{
    background-color:transparent;
    color:#fff;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#contact.overlay .section-tabled .tabled-th{
    float: none;
    width: auto;
    margin-bottom: 40px;
    position: relative;
}
#contact.overlay .section-tabled .tabled-td{
    float: none;
    width: auto;
    margin:0 -20px;
    padding: 0;
}

#contact.overlay .section-tabled .tabled-td > [lang="ja"]{
    font-size:83%;
}

#contact.overlay .section-tabled .tabled-td > [lang="ja"],
#contact.overlay .section-tabled .tabled-td > [lang="en"]{
    float:left;
    width:50%;
    padding: 0 20px;
}
#contact.overlay .section-tabled .tabled-td > [lang="ja"] p:last-child,
#contact.overlay .section-tabled .tabled-td > [lang="en"] p:last-child{
    margin-bottom:0;
}

@media only screen and (max-width: 800px){
    #contact.overlay .section-tabled .tabled-th{
        margin-bottom: 30px;
    }

}

@media only screen and (max-width: 600px){
    #contact.overlay .section-tabled .tabled-td > [lang="ja"],
    #contact.overlay .section-tabled .tabled-td > [lang="en"]{
        float:none;
        width:100%;
        margin-bottom:50px;
    }

}

/*
 @media
-------------------------------------------------------------*/
@media only screen and (max-width: 720px){
}

@media only screen and (max-width: 840px){
}


/* mobile */
@media only screen and (max-device-width: 480px){
}