/* CSS Document */

/****** abstruct ******/
*{
    font-family: a-otf-gothic-bbb-pr6n , sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#000028;
}

h1,h2,h3,h4,h5,.futo,.title > small,.title2 > small{font-family:a-otf-futo-go-b101-pr6n , sans-serif;}
time,.title > span , .title2 > span{font-family: 'DIN Next LT W01 Light' , sans-serif;}
.din_r{font-family: 'DIN Next LT W01 Regular' , sans-serif;}
.din_l{font-family: 'DIN Next LT W01 Light' , sans-serif;}

html{font-size:16px;}
p{line-height:1.9em;}
a{position:relative;display:block;letter-spacing:1px;}
a > img{width:100%;height:auto;}
header,main,footer,main > section{
  position:relative;
  width:100%;
  margin:0 auto;
  padding:0;
}
header,footer,main > section{
    width:95%;
}
img {width:auto;height:100%;}
.center_x{
  position:relative;
  display:block;
  left:50%;
  transform:translateX(-50%);
}
.center_y{
  position:absolute;
  display:block;
  top:50%;
  transform:translateY(-50%);
}
.center_xy{
  position:absolute;
  display:block;
  left:50%;
  top:50%;
  transform:translate(-50% , -50%);
}

.margin_center{
  position:relative;
  display:block;
  margin-left:auto;
  margin-right:autoe
}
.wfull{min-width:1100px;}
.wfull{width:100%;}
.wdef{max-width:1260px;}
.w1300,.w1070,.w1000,.w1100,.w750,.w915{width:100%;}
.red{color:red;}
.green{color:#66c166;}
#_sample{display:none;;transition:opacity .5s;}
#_sample.on{display:block;opacity:0.65;}
#_sample img ,#_sample{width:2000px;height:auto;}
#_sample{position:absolute;top:0;left:50%;transform:translateX(-50%);}

@media all and (min-width:751px) {.sp{display:none;}}
.pc{display:block;}

.flex{
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

*[data-bg]{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.bg_gray{
    background-color:#f8f8f8;
    width:100%;
}
.marimo{
    display:inline-block;
    padding-left: 2em;
    text-indent: -2em;
}
.marimo:before{
    position:relative;
    display:inline-block;
    content:"";
    width:1.1em;
    height:1.1em;
    top:0.15em;
    margin-right:0.85em;
    background-image:url(/images/common/marimo.svg);
    background-repeat:no-repeat;
    background-position:center;
}
.marimo.rot:before{
    background-image:url(/images/common/marimo_rot.svg);
}
.tail{
    display:inline-block;
    padding-left: 2em;
    text-indent: -2em;
}
.tail:before{
    position:relative;
    display:inline-block;
    content:"";
    width:0.9em;
    height:0.9em;
    top:0.15em;
    margin-right:1em;
    border:1px solid black;
    background-color:#0092c9;
}
.delta{position:relative;}
.delta:after{
    content: "";
    display: block;
    position:absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 11px solid #0092c9;
    top:50%;
    transform:translatey(-50%);
    right:5%;
    transition:all .5s;
}

.soft{
    background: rgba(255,255,255,1);
    border: 1px solid #e0e0e0;
    border-radius: 9px;
}
.title{
    font-weight:100;
    text-align:center;
}
.title {font-size:15px;}
.title span{display:block;font-size:2.7rem;}
.title small{
    position:relative;
    display:block;
    font-size:0.95rem;
    margin-top:10px;
    display:inline-block;
    z-index:1;
}
.title small:before,
.title small:after{
    content:"";
    background-color:#66c166;
    position:absolute;
    display:block;
    border-radius:5px;
    z-index:-1;
}
.title small:before{
    height:0.5em;
    width:4px;
    left:-0.1em;;
    bottom:0.2em;
}
.title small:after{
    width:100%;
    height:4px;
    left:0;
    bottom:0.2em;
}

.title2{
    font-weight:100;
    display:inline-block;
    text-align:left;
}
.title2 span{display:block;font-size:1.95rem;}
.title2 small{
    position:relative;
    display:inline-block;
    font-size:0.95rem;
    margin-top:10px;
    display:inline-block;
    color:#66c166;
}



.heading{
    max-width:1040px;
    height:260px;
}
.heading > h1{
    position:absolute;
    left:0;
    bottom:0;
    text-align:left!important;
}
.heading > h1 span{
    font-size: 2.9rem;
    letter-spacing: 0.2rem;
}
.heading > h1 small{
    margin-top:10px;
    display:inline-block;
}

a.deco1,a.deco2{
    font-family: 'DIN Next LT W01 Light' , sans-serif;
    position: relative;
    font-size:0.85rem;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    border: solid 1px #000028;
    border-radius: 4px;
    padding: 10px 45px;
    transition:all .5s;
}
a.deco1:hover,a.deco2:hover{
    background-color:#66c166;
    color:white;
    border-color:#66c166;
}
a.deco3{
    font-family: 'DIN Next LT W01 Light' , sans-serif;
    color:#acacac;
    position: relative;
    font-size:0.85rem;
    display: inline-block;
    font-size:1.1em;
    transition:color .5s;
}
a.deco3:before,a.deco3:after{
    content:"";
    display:inline-block;
    position:relative;
}
a.deco3:before{
    height:1rem;
    width:0;
    top:0.05rem;
    border-left:1px solid #acacac;
    margin:0 0.7em;
    transition:all .5s;
}
a.deco3:after{
    content: "";
    display: block;
    position:absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 11px solid #acacac;
    top:49%;
    transform:translatey(-50%);
    right:-1.5rem;
    transition:all .5s;
}
a.deco3:hover{
    color:#777;
}
a.deco3:hover:before{
    border-left:1px solid #777;
    color:#777;
}
a.deco3:hover:after{
    border-left: 11px solid #0092c9;
}

a.deco4{padding-right:3rem;transition:color 0.5s;}
a.deco4:before,
a.deco4:after{
    content:"";
    display:inline-block;
    position:absolute;
    width:1.3rem;
    height:1.3rem;
    top:50%;
    transform:translateY(-50%);
    right:0.5rem;;
    margin-left:0.3rem;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
a.deco4:before{
    background-image:url(/images/company/blank_g.svg);
}
a.deco4:after{
    background-image:url(/images/company/blank.svg);
    opacity:0;
    transition:opacity 0.5s;
}
a.deco4:hover{
    color:#aaa;
}
a.deco4:hover:after{
    opacity:1;
}
a.deco5{
    text-align:center;
    background: rgba(255,255,255,0.8);
    border: 1px solid #e0e0e0;
    border-radius: 9px;
}
a.deco6{
    font-family: 'DIN Next LT W01 Light' , sans-serif;
    position: relative;
    font-size:0.85rem;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    border: 1px solid #000028;
    padding: 12px 62px;
}
a.deco7:after{
    content: "";
    display: block;
    position:absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 11px solid #acacac;
    bottom:0.4em;;
    right:-7%;
    transition:all .5s;
}



.hover_anim2,
.hover_anim {
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hover_anim2 > a,
.hover_anim > a{
    position: relative;
    width: 100%;
    padding:140px 0;
    z-index:1;
}
.hover_anim > a:before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    z-index:-1;
    background-color: rgba(255,255,255,1);
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    transition:all .5s;
}
.hover_anim2 > a h5,
.hover_anim > a h5{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0;
}
.hover_anim2 > a span,
.hover_anim > a span{line-height: 1.3em;font-size:2rem;font-family: 'DIN Next LT W01 Light' , sans-serif;}
.hover_anim2 > a small,
.hover_anim > a small{margin-top:23px;z-index:1;}

.hover_anim2 .p3,
.hover_anim .p3{
    width:33.3%;
}
.hover_anim2 .p4{width:25%;}
.hover_anim .p4{width:25%;}

.hover_anim2 .p2,
.hover_anim .p2{
    width:50%;
}
.hover_anim:hover > a:before{
    background-color: rgba(255,255,255,.8);
    width:92%;
    height:70%;
}
.hover_anim:hover > a:after{right:8%;}
.hover_anim:hover > .p3:before{width:80%;}
.hover_anim:hover > .p3:after{right:15%;}

.anc{width:0;
height:0;
position:relative;
top:-80px;
}
.hover_anim2 > a{
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    transition:all .5s;
    background:white;
}
.hover_anim2 > a:hover{
    transform:translate(-10px,-10px);
    filter: drop-shadow(10px 10px 0 #aaa);
    z-index:1;
}


/****** concrete *******/


/* header */
header {
    width:100%;
    background-color:white;
    z-index:100;
    position:absolute;
    padding-bottom:1rem;
}
header > div{
    max-width:1260px;
    height:auto;z-index:1;
    padding-top:1px;
    top:0;margin-left:0;
    position:relative;
    left:50%;
    transform:translateX(-50%);
}

header.clone{
    position:fixed;
    animation:hide 0.8s forwards;
    opacity:0;
}
header.clone.on{animation:show 0.8s forwards;}
@keyframes hide{
    0%{transform:translateY(0%);opacity:1;}
    30%{opacity:0;}
    100%{transform:translateY(-100%);opacity:0;}
}
@keyframes show{
    0%{transform:translateY(-100%);opacity:0;}
    30%{opacity:0;}
    100%{transform:translateY(0%);opacity:1;}
}


header .logo{
    width:230px;
    margin-left: 41px;
    margin-top: 28px;
    transition:opacity 0.5s;
}
header .menu{
    position:absolute;
    width:44.5%;
    right:0;
    top: 0;
    margin-right:50px;
    margin-top:45px;
}
.en header .menu{
    width:33.5%;
}

header .menu a {
    font-size:1rem;
}
header .lang {
    position:absolute;
    width:70px;
    right:0;
    top:0;
    margin-right:40px;
    margin-top:5px;
}
header .lang:before{
    position:absolute;
    content:"/";
    left:50%;
}
header .lang li{position:relative;}
header .lang .on:before{
    content:"";
    background-color:#66c166;
    position:absolute;
    display:block;
    border-radius:5px;
    z-index:-1;
    width:100%;
    height:4px;
    left:0;
    bottom:0.2em;
}

header nav{
    position:absolute;
    bottom:0;
    width:100%;
    background: rgba(255,255,255,1);
    border: 1px solid #e0e0e0;
    border-radius: 9px;
    transform:translateY(0%);
    opacity:0;
    animation:sub_close 0.8s forwards;
    transition:border-color 0.3s , background-color 0.3s;
}
header nav a{
}
header nav.on{
    animation:sub_open 0.5s forwards;
}
@keyframes sub_close{
    0%{transform:translateY(100%);opacity:1;}
    30%{opacity:0;}
    100%{transform:translateY(0%);opacity:0;}
}
@keyframes sub_open{
    0%{transform:translateY(0%);opacity:0;}
    30%{opacity:0;}
    100%{transform:translateY(100%);opacity:1;}
}
header nav.ch{
    border-color:transparent;
    background-color:transparent;
}
header nav.ch a{
    border-color:transparent!important;
    color:transparent!important;
}
header nav.ch a:after{
    border-color:transparent!important;
}


header nav div{
    position:relative;
    width:95%;
    max-width:1100px;
    left:50%;
    transform:translateX(-50%);
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}
header nav div a:after{
    content:"";
    width:0;
    height:1.5rem;
    border-left:1px solid #d5d5d5;
    transition:all .5s;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
}
header nav div a{
    width:25%;
    text-align:center;
    font-size:1rem;
    color:#c0c0c0;
    margin:1.5rem 0;
    transition:all .5s;
}
header nav div a:nth-child(4n),
header nav div a:last-of-type{
    border-right:1px solid #e0e0e0;
}
header nav div a:nth-child(n + 5){
    margin-top:0;
}
main > h1{line-height:40px;width:88px;}
main > h1 span:first-child{
  font-size:20px;
  letter-spacing:2px;
}

header nav div a:hover{color:#000028;}
header nav div a:before{
    content: "";
    display: block;
    position:absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 11px solid #0092c9;
    top:50%;
    transform:translateY(-50%);
    left:0%;
    transition:all .5s;
    opacity:0;
}
header nav div a:hover:before{
    left:5%;
    opacity:1;
}


footer{
    max-width:1260px;
    height:307px;
}
footer > *{
}
footer .logo{
    position: absolute;
    left: 42px;
    top: 6px;
    width: 228px;
}
footer .totop{
    position: absolute;
    right: 43px;
    top: 7px;
    width: 89px;
}

footer .links{
    position:absolute;
    top:10px;
    left:42px;
    max-width:1000px;
    width:90%;
    margin-top:112px;
}
footer .links > a{transition:opacity 0.5s;}
footer .links > a:hover{opacity:0.5;}
footer .links > *{
    width:19%;
    font-size:1rem;
    margin-bottom:18px;
}
footer .links > *:nth-child(5n - 4){width:18%;}
footer .links > *:nth-child(5n - 3){width:17%;}
footer .links > *:nth-child(5n - 2){width:25%;}
footer .links > *:nth-child(5n - 1){}
footer .links > *:nth-child(5n){width:15%;}

footer .sns{height:1rem;}
footer .sns a{
    display:inline-block;
    width:40px;
    margin-right:1rem;
}
footer .copy{
    position: absolute;
    width: 215px;
    right: 39px;
    bottom: 11px;
}
footer .copy img{width:100%;height:auto;}

html.en footer{height:390px;}
html.en footer a{
    left:50%;
}
html.en footer a:last-child{
    margin-top:150px;
}




/*     animation       */
.popup , .popupall > * {
    opacity:0;
    transform:translateY(30px);
}
.popup2 , .popupall2 > * , .heading {
    opacity:0;
    transform:translateY(0);
}
.popup.up , .popupall > .up , .popup2.up, .popupall2 > .up , .heading.up{
    transition:all 1s;
    opacity:1;
    transform:translateY(0)!important;
}
.popup3{transition:all 1s;}