@charset "utf-8";

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

/* FONT size
---------------------------------------------------------------------
[ px ]  [ % ]
10px  83  %   19px  158 %
11px  92  %   20px  167 %
12px  100 %   21px  175 %
13px  108 %   22px  183 %
14px  117 %   23px  192 %
15px  125 %   24px  200 %
16px  133 %   25px  208 %
17px  142 %   26px  217 %
18px  150 %
---------------------------------------------------------------------*/


/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
html,body   {height:100%;}
html {
  width: 100%;
  height: 100%;
  background-image: url("../images/common/bg.jpg");
  background-repeat: repeat;
  background-position: center top;
}
body  {min-width:1024px; width:100%; color:#333; background:url("../images/common/head.png") 0 0 no-repeat; overflow-x:hidden;}
body a  {color:#333;}

::selection {background:#e7dbc7; color:#f9edd9;}
::-moz-selection {background:#e7dbc7; color:#f9edd9;}

/*---------------------------------------------------------------------
    BORDERS
---------------------------------------------------------------------*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{content:""; margin:0px; background:#CB4949; position:fixed; display:block; z-index:20;}

/* ...and position them! */
html:before{height:18px; left:0; right:0; top:0;}
html:after{width:18px; top:0; right:0; bottom:0;}
body:before{height:18px; right:0; bottom:0; left:0;}
body:after{width:18px; top:0; bottom:0; left:0;}


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

.a_bound  {-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
           -moz-transition:    all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
           -ms-transition:     all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
           transition:         all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}

.obj  {position:absolute;}

/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/

#header  {text-align:center; height:42px; margin-bottom:60px; position:relative;  z-index:90; }

#fixNav  {position:fixed; width:100%;}
    #fixNav ul          {padding-top:24px; position:relative; font-size:133%; right:-270px; top:30px;}
    #fixNav ul li       {display:inline-block; margin:0 12px; text-align:center; vertical-align:top;}
    #fixNav ul li a     {display:block; position:relative; text-decoration:none;}
    #fixNav ul li span  {font-size:11px;}
     #fixNav ul li img  {width: 20px;}
      #fixNav ul li.gnav05 img  {width: 130px;}
h1  {padding-top:90px;}
h1 a{text-decoration:none;}
h2  {font-size:200%; letter-spacing:2pt; }
h3 {font-size:167%; letter-spacing:2pt;}

#caption { padding-top:14px; font-size:133%;}
#logo { padding-top:80px;}

#copyright  {position:fixed; top:28px; left:30px; z-index:99;display: none;}
#nyuren {position:fixed; top:54px; right:30px; z-index:999;}
#url  {position:fixed; bottom:28px; left:30px; z-index:99; display: none;}
#btnPagetop  {position:fixed; bottom:-5px; right:45px; z-index:99;}


/* wrapper */
#wrapper    {width:100%; min-width:1024px; overflow:hidden;}
#container  {width:900px; margin:0 auto; position:relative;}
#pageTitle  {text-align:center; margin-bottom:75px;}


/*---------------------------------------------------------------------
Top layout
---------------------------------------------------------------------*/
#topWrapper   {width:100%; min-width:1024px; max-width:1920px; margin:0 auto; position:relative; text-align:center; /*max-height:1800px!important*/}
#wrapInner    {min-width:1000px; max-width:1920px; position:absolute; left:50%; margin-left:-600px; }
    #topWrapper p {  z-index: 1000;}
    #topWrapper #box01  {  width: 54%; margin: 279px 0 0 0px; text-align: right;}
    #topWrapper #box02  {width:40%; margin:260px 0px 0 0; text-align: left;}
    #topWrapper #box03  {width:40%; margin-top:230px; text-align: right; font-size:120%;}
        #topWrapper #box03 img{
          position: relative;
          margin-right:-120px;
        }

        #topWrapper #box03 a{
          display: inline-block;
          color: #fff;
          margin-top:5px;
          padding: 20px;
          background: #216735;
          font-size: 120%;
          text-decoration: none;
        }
        #topWrapper #box03 span{
          display: inline-block;
          margin-top:5px;
          font-size: 120%;
          text-align: center;
          margin-right: -100px;
          line-height: 1.5;
        }
    #topWrapper #box04  {width:20%; margin-top:30px;}
    #topWrapper #box05  {width:30%; margin-top: 0px;
  margin-right: 60px; font-size:120%;}
        #topWrapper #box05 a{
          display: inline-block;
          color: #fff;
          margin-top:5px;
          padding: 20px;
          background: #CB7E05;
          font-size: 120%;
          text-decoration: none;
        }
        #topWrapper #box05 span{
          display: inline-block;
          margin-top:5px;
          font-size: 120%;
          text-align: center;
          margin-right: -20px;
          line-height: 1.5;
        }

    #topWrapper #box06  {width:30%; margin-top:-6px;}

    #topWrapper #box07  {width:30%; margin-top:1080px;}
    #topWrapper #box08  {width:20%; margin:100px 0 0 0;}
    #topWrapper #box09  {width:30%; margin-top:500px;}

    #topWrapper #box10  {width:50%; margin:0px 30px;}
    #topWrapper #box11  {width:25%; margin-top:200px;}

    #topWrapper .box  {-moz-transition:    all 0.3s ease 0s;
                       -webkit-transition: all 0.3s ease 0s;
                       -ms-transition:     all 0.3s ease 0s;
                       transition:         all 0.3s ease 0s;
                       position:relative; display:inline-block; vertical-align:top;}
    #topWrapper .box {width:100%; z-index:1;}

    #topWrapper #obj01  {top:-30px; left:13%;font-size: 180%; line-height: 1.5; }
    #topWrapper #obj02  {top:80px; right:7%;font-size: 180%; line-height: 1.5; }

    #topWrapper #obj03  {top:423px; left:11%;}
      #topWrapper #obj03{
        border:1px solid #333;
        background: #fff;
        padding:10px;
          width: 320px;
  height: 260px;
  z-index: 2;
      }
      #topWrapper #obj03 .comment{
        position:relative;
        font-size: 110%;
        font-weight: bold;
        line-height: 1.5;
      }
      #topWrapper #obj03 .comment .menuside,
      #topWrapper #obj03 .comment ul{
        float: left;
      }
      #topWrapper #obj03 .comment .menuside{
        width:50px;
        margin-right: 20px;
      }
    #topWrapper #obj04  {top:740px; right:25%;}
    #topWrapper #obj05  {top: 781px; left: 46%;}
    #topWrapper #obj06  {top:860px; right:34%;}
    #topWrapper #obj07  {top: 900px; left: 50%;}
    #topWrapper #obj08  {  top: 1057px;
  left: 57%; z-index: 10;}
    #topWrapper #obj09 {top: 1015px;
  right: 7%;}
    #topWrapper #obj10  {top: 1260px;
  right: 10%; font-size: 120%;
  height: 300px;
}

        #topWrapper #obj10 a{
          display: inline-block;
          color: #fff;
          margin-top:5px;
          padding: 20px;
          background: #C73A5A;
          font-size: 120%;
          text-decoration: none;
        }
        #topWrapper #obj10 span{
          display: inline-block;
          margin-top:5px;
          font-size: 120%;
          text-align: center;
          margin-right: -20px;
          line-height: 1.5;
        }

    #topWrapper #obj10sub  {  top: 1380px;
  left: 28%;}

    #topWrapper #obj11  {  top: 1340px;
  right: 25%;}
    #topWrapper #obj12  {top: 1500px;
  right: 40%;}
    #topWrapper #obj13  {  top: 1680px;
  right: 54%;}
    #topWrapper #obj14  {   top: 1830px;
  left: 42%; font-size: 120%;}

         #topWrapper #obj14 a{
          display: inline-block;
          color: #fff;
          margin-top:5px;
          padding: 20px;
          background: #A00000;
          font-size: 120%;
          text-decoration: none;
        }
        #topWrapper #obj14 span{
          display: inline-block;
          margin-top:5px;
          font-size: 120%;
          text-align: center;
          margin-right: -20px;
          line-height: 1.5;
        }
    #topWrapper #obj15  {  top: 1960px;
  left: 19%;}
    #topWrapper #obj16  {  top: 2027px;
  left: 23%;}
    #topWrapper #obj17  {    top: 2110px;
  left: 17%;}
    #topWrapper #obj18  {  top: 2210px;
  left: 19%;}
      #topWrapper #obj19 {    top: 2022px;
  left: 31%;}
      #topWrapper #obj20 {    top: 2530px;
  }
      #topWrapper #obj21 {    top: 2450px;
  left: 0%;}
      #topWrapper #obj22 {    top: 2470px;
  left: 20%;}
    #topWrapper .obj img  {-moz-transition:    all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
                           -webkit-transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
                           -ms-transition:     all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
                           transition:         all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;}


div#footer-bk
{
  background-color: #444;   /* 背景色(黒) */
  width:100%;               /* 横の幅を100% */
  height: 120px;            /* 縦の幅を120px */
  position: absolute;       /* 絶対位置指定することを定義 */
  bottom: 0px;              /* 絶対位置指定(左0px,下0px) */
  padding: 10px 0;          /* 上下に余白を取る */
}
/* フッターの表示領域 */
div#footer{
  border: 5px solid #fff; /* 表示領域を白枠で囲う */
  height: 100px;          /* 縦幅の指定100px */
  width: 970px;           /* 横の幅970px */
  margin: auto;           /* 中央揃え */
}

/*---------------------------------------------------------------------
Profile layout
---------------------------------------------------------------------*/
#profile #container  {padding-bottom:230px;}

#img_profile   {margin:0 auto; position:relative; width:636px;}

#profileBox  { width:540px; margin:0 auto; overflow:hidden; padding:80px 0 80px 50px ;}
  #profileBox .profileL  {float:left; width:240px;}
  #profileBox .profileR  {float:right; width:300px;}

  #profile_cap {font-size:117%; letter-spacing:1pt;}
  #profile_name {font-size:200%; letter-spacing:5pt; padding: 30px 0 24px 0;}
  #profile_yomi {font-size:133%; letter-spacing:3pt;}
  #pro_txt {font-size:117%; letter-spacing:2pt; line-height:280%; margin-top:-8px;}

  #img_obj01 {margin:0 auto; text-align:center; position:relative;}

#bioBox  { width:540px; margin:0 auto; overflow:hidden; padding:80px 0 80px 50px ;}
  #bioBox .bioL  {float:left; width:240px;}
  #bioBox .bioR  {float:right; width:300px;}

  .border { border-bottom:solid 1px; width:20px; margin:20px 0;}
  .bio_txt {letter-spacing:1pt; line-height:220%;  margin-bottom:20px;}

  #img_obj02 {margin:0 auto; text-align:center; position:relative;}

#exhBox  { width:800px; margin:0 auto; overflow:hidden; padding:80px 0 0 50px ;}
  #exhBox .exhL  {float:left; width:400px;}
  #exhBox .exhR  {float:right; width:400px; padding-top:58px;}

  .exh_txt dt{font-size:117%; line-height:180%; margin-bottom:4px;}
  .exh_txt dd{margin-bottom:20px; color:#b4a58c;}


/*---------------------------------------------------------------------
Works layout
---------------------------------------------------------------------*/
#works #container  {padding-bottom:230px; }

#works #worksList  {width:930px; margin:0 auto; letter-spacing:-.4em;}

    #works #worksList li  {display:inline-block; letter-spacing:normal; vertical-align:middle; margin:0 30px 30px 0; width:130px;}
    #works #worksList li:nth-child(6n)  {margin-right:0;}
    #works #worksList li img  {width:100%;}


/* overlay */

#ovBox #ovPhoto  {margin-bottom:30px; text-align:center;}
    #ovBox #ovPhoto img  {max-width:800px;}

#ovBox #ovTxt  {width:400px; margin:0 auto;}
    #ovBox #ovTxt h3  {font-size:133%; font-weight:bold; margin-bottom:15px; line-height:150%;}
    #ovBox #ovTxt p   {margin-bottom:25px;}
    #ovBox #ovTxt a   {background:#333;}


/*---------------------------------------------------------------------
News layout
---------------------------------------------------------------------*/
#news #container  {padding-bottom:230px; }

#news_box {overflow:hidden; margin-top:40px; width:900px;}
  #news_box a{background-color: #e7dbc7; color: #000; text-decoration:none;}
  #news_box a:hover {background-color: #b4a58c; color: #fff; text-decoration:none;}

#sidebar  {float:left; margin-bottom:10px; width:200px;}

  #sidebar h3{margin-bottom:10px;}
  #sidebar p{ font-size:100%;}
  #sidebar #category{margin-bottom:50px; padding:20px 0; border-top:solid 1px;}
  #sidebar #archive{margin-bottom:50px; padding:20px 0; border-top:solid 1px;}

#secNews {float:right; width:640px; }
  #secNews .entry {margin-bottom:100px; border-top:solid 1px;}
  #secNews p.data {margin-bottom:10px; font-size:117%; color:#b4a58c; letter-spacing:2pt;}
  #secNews h4 {margin-bottom:20px; font-size:167%;}
  #secNews p {margin-bottom:10px; font-size:100%; line-height:200%; letter-spacing:1pt;}
  #secNews img { padding:20px 0; }


/* pagenate */
#pagenate  {text-align:center; letter-spacing:1pt; font-size:16px;}
    #pagenate a,
    #pagenate span  {display:inline-block; margin:0 8px; vertical-align:middle; padding:3px 5px;}




.lock {
    overflow:hidden;
}

.modal-content {
    position:relative;
    display:none;
    width:50%;
    margin:30px;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
    z-index: 9999;
    border-radius: 10px;
}


.modal-content h3{
    margin: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.modal-content p {
    margin:0 0 20px;
    padding:0;
}


.modal-content p.text {
    font-size: 150%;
    line-height: 1.5;
}

.modal-overlay {
    z-index:999;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
    z-index:9999;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
          display: inline-block;
          color: #fff;
          margin-top:5px;
          padding: 20px;
          background: #A00000;
          font-size: 120%;
          text-decoration: none;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}