@charset "utf-8";

/*
 *
 * Usage: Base layout
 *
 * Name: style.css
 *
 */



/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
html,body {height:100%; width:100%;}
body a {color:#000;}
#wrapper {min-width:900px;}

::-moz-selection {background:#b5b5b5; color:#333;}
::selection {background:#b5b5b5; color:#333;}

.yugo {font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, sans-serif; letter-spacing:normal; font-weight:normal;}


/*---------------------------------------------------------------------
CSS3 animation & parts layout
---------------------------------------------------------------------*/
/* link */
a img       {opacity:1; filter:alpha(opacity=100); transition:all 0.2s ease-in;}
a:hover img {opacity:0.7; filter:alpha(opacity=70); transition:all 0.2s ease-in;}
a           {transition:all 0.2s ease-in;}
a:hover     {transition:all 0.2s ease-in;}
.opa_bg a,
.opa_bg input       {opacity:1; transition:all 0.2s ease-in;}
.opa_bg a:hover,    
.opa_bg input:hover {opacity:0.7; transition:all 0.2s ease-in;}
.trans_bg a         {display:block; overflow:hidden; height:0; opacity:1; filter:alpha(opacity=100); transition: all 0.2s ease-in;}
.trans_bg a:hover   {opacity:0; filter:alpha(opacity=0); transition: all 0.2s ease-in;}

.a_bound {transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
.obj {position:absolute;}

.target {
  transition:all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transform:translate(0,15px);
  transform:translate(0,15px);
  opacity:0;
}
.target.action {
  -webkit-transform:translate(0,0);
  transform: translate(0,0);
  opacity:1;
}



/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
/* globalH */
#globalH {
  position:relative; width:100%; height:70px; background-color:#fff; min-width:1000px; z-index:999;
}
#globalH.clone {
  transition:all 0s cubic-bezier(0.165, 0.84, 0.44, 1);
  position:fixed; top:-70px;
}
#globalH.clone.active {
  transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  top:0;
}

  #globalH h1    {position:absolute; top:24px; left:24px;}
  #globalH #gnav {text-align:center; letter-spacing:-.4em; font-size:14px;}
    #globalH #gnav li {display:inline-block; letter-spacing:normal; margin:0 15px;}
    #globalH #gnav a  {display:block; line-height:70px; letter-spacing:0.2em; position:relative;}
  
  #globalH #sns {position:absolute; top:0; right:30px; font-weight:bold;}
    #globalH #sns a {display:inline-block; line-height:70px; position:relative;}

  #globalH #gnav a:after,
  #globalH #sns a:after  {
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0);
    transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    content:''; display:block; height:2px; width:0;
    position:absolute; bottom:28px; left:50%;
    background-color:#000;
  }
  #globalH #gnav a:hover:after,
  #globalH #gnav a.active:after,
  #globalH #sns a:hover:after {width:100%;}
  
  #globalH #gnav .blank a {color:#bbb;}
  #globalH #gnav .blank a:after {background-color:#bbb;}



/* access */
#access {margin-bottom:150px; padding-top:75px;}
  #access h2 {text-align:center; min-width:900px; font-size:24px; margin-bottom:35px;}
  
  #access #gmap {overflow:hidden; height:380px; position:relative;}
    #access #gmap iframe {margin-top:-150px;}

  #access #accessInfo {padding:55px 50px 0 50px; width:900px; margin:0 auto;}
    #access #accessInfo h3 {font-size:18px; margin-bottom:25px;}
    #access #accessInfo p  {font-size:14px; line-height:200%;}
    #access #accessInfo a  {background-color:#ccc;}
    #access #accessInfo a:hover  {background-color:#eee;}

/* footer */
#globalF {background-color:#1b1b1b; color:#fff; padding:95px 0 65px 0; text-align:center; position:relative; z-index:10;}
  #globalF a {color:#fff;}
  #globalF #footInner {width:900px; margin:0 auto; padding:0 50px;}
  
  #globalF #footTop {margin-bottom:65px;}
    #globalF #footTop ul {letter-spacing:-.4em; font-size:14px;}
    #globalF #footTop li {display:inline-block; letter-spacing:normal; margin:0 15px;}
    #globalF #footTop a  {display:block; line-height:70px; letter-spacing:0.2em; position:relative;}
    
    #globalF #footTop a:after  {
      -webkit-transform:translate(-50%,0);
      transform:translate(-50%,0);
      transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      content:''; display:block; height:2px; width:0;
      position:absolute; bottom:28px; left:50%;
      background-color:#fff;
    }
    #globalF #footTop a:hover:after {width:100%;}

  #globalF #footBottom ul {margin-bottom:30px;}
  #globalF #footBottom li {display:inline-block;}
  #globalF #footBottom li:first-child {border-right:1px solid #606060; padding-right:33px; margin-right:35px;}
  #globalF #footBottom small {color:#494949; font-size:12px;}


#btnPagetop {
  transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity:0; visibility:hidden;
  position:fixed; right:25px; bottom:-10px; width:80px; height:64px; z-index:999;
}
#btnPagetop.action {bottom:0; opacity:1; visibility:visible;}
  #btnPagetop a {
    background:url(../images/common/btn_pagetop.png) no-repeat 50% 10px;
    display:block; overflow:hidden; height:0; padding-top:64px;
  }
  #btnPagetop a:hover {background-position:50% 0;}


.fixed_btn {
  transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity:0; visibility:hidden;
  position:fixed; top:49%; z-index:999; width:30px; margin-top:-50px;
}
.fixed_btn.action {top:50%; opacity:1; visibility:visible;}

  .fixed_btn a {display:block; overflow:hidden; height:0; padding-top:100px; position:relative;}
  .fixed_btn a:after {
    -webkit-transform:translate(0,-50%);
    transform:translate(0,-50%);
    transition:all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    background-color:#000;
    content:''; display:block; width:2px; height:100%;
    position:absolute; top:50%;
  }
  .fixed_btn a:hover:after {height:0;}

#btnAccess  {right:20px;}
#btncontact {left:20px;}

#btnAccess a  {background:url(../images/common/btn_access.png) no-repeat 50% 50%;}
#btncontact a {background:url(../images/common/btn_contact.png) no-repeat 50% 50%;}

#btnAccess a:after  {right:0;}
#btncontact a:after {left:0;}


/* under page  */
#pageImg {padding:70px 0 0 0; margin-bottom:70px; height:240px; position:relative; min-width:1000px; overflow:hidden;}
  #pageImg img {
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width:100%; position:absolute; top:50%; left:50%; min-width:1200px;
  }

#pageTitle {
  /* background:url(../images/common/line_solid-x.gif) no-repeat 50% 100%; */
  text-align:center; font-size:30px; margin-bottom:100px; padding-bottom:25px;
}


#container {width:900px; margin:0 auto; padding:50px 0;}

#pagenate .wp-pagenavi {position:relative;}
#pagenate .previouspostslink {position:absolute; left:270px;}
#pagenate .nextpostslink {position:absolute; right:270px;}




/*---------------------------------------------------------------------
sp layout
---------------------------------------------------------------------*/
.sp #globalH #gnav a:after,
.sp #globalH #sns a:after  {
  display:none;
}

.sp #globalH #gnav a.active:after {
    -webkit-transform:translate(-50%,0);
    transform:translate(-50%,0);
    transition:all 0 cubic-bezier(0.165, 0.84, 0.44, 1);
    content:''; display:block; height:2px; width:100%;
    position:absolute; bottom:28px; left:50%;
    background-color:#000;
  }