@charset "utf-8";

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



/*---------------------------------------------------------------------
setting
---------------------------------------------------------------------*/
html,body   {height:100%; -webkit-text-size-adjust:100%;}
body a  {color:#000;}

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

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



/*---------------------------------------------------------------------
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;}
.page_title {text-align:center;}
.btn_more   {text-align:center;}


/*---------------------------------------------------------------------
Common layout
---------------------------------------------------------------------*/
#container {background-color:#fff; position:relative; overflow:hidden; min-width:1000px;}
#wrapper {width:1000px; margin:0 auto; position:relative;}

#globalH {width:1000px; margin:0 auto; padding:35px 0 40px 0; text-align:center;}
  #globalH #gnav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #globalH h1 {margin-right:50px;}
  #globalH ul {
    font-family:"Arial Black"; font-size:15px; line-height:100%;
    display: flex;
    align-items: center;
  }
    #globalH ul li {letter-spacing:0.05em; height:92px;}
    #globalH ul a  {display:block; position:relative; text-decoration:none; z-index:999;}
    #globalH ul a:after {
      transition:width 0.2s ease-in;
      content:''; width:0; height:2px; background-color:#000;
      position:absolute; bottom:37px; left:0;
    }
    #globalH ul a:hover:after,
    #globalH ul a.active:after {width:100%;}

    .sp #globalH ul a:hover:after {display:none;}

    #globalH ul a  {display:block; overflow:hidden; height:0;  padding-top:92px; background:url(../images/common/gnav.png) no-repeat 0 50%;}
    #globalH ul .gnav01 {margin-right:75px;}
    #globalH ul .gnav02 {margin-right:75px;}
    #globalH ul .gnav03 {margin-right:75px;}
    #globalH ul .gnav04 {margin-right:75px;}
    #globalH ul .gnav05 {margin-right:75px;}
    #globalH ul .gnav06 {margin-right:75px;}
    #globalH ul .gnav07 {margin-right:50px;}

    #globalH ul .gnav01 a {background-position:0 50%; width:30px;}
    #globalH ul .gnav02 a {background-position:-118px 50%; width:43px;}
    #globalH ul .gnav03 a {background-position:-236px 50%; width:57px;}
    #globalH ul .gnav04 a {background-position:-368px 50%; width:47px;}
    #globalH ul .gnav05 a {background-position:-481px 50%; width:70px;}
    #globalH ul .gnav06 a {background-position:-602px 50%; width:80px;}
    #globalH ul .gnav07 a {background-position:-737px 50%; width:60px;}

    #globalH ul .gnav_sns {
      display: flex;
      align-items: center;
    }
    #globalH ul .gnav_sns a {
      display: inline-block;
      vertical-align: middle;
      overflow: visible;
      height: 20px;
      padding: 0;
      background: none;
      margin: 0 10px;
    }
    #globalH ul .gnav_sns a:after {display: none;}
    #globalH ul .gnav_sns a img {
      height: 100%;
      width: auto;
    }


#globalF {border-top:2px solid #000; position:relative; padding:10px 0 50px 0;}
#globalF small {margin:10px 0 0 20px;}
#globalF small span {font-size:16px; vertical-align:middle; margin-right:2px;}
#globalF #fnav {position:absolute; top:10px; right:20px;}
#globalF #fnav li {float:left;}
#globalF #fnav li:first-child {margin-right:10px; padding-right:10px; border-right:1px solid #000;}


#pageF {border-top:2px solid #000; padding:45px 0 50px 0; text-align:center;}
  #pageF .btn_pagetop {margin-bottom:40px;}


#btnPagetop {margin-bottom:40px; text-align:right;}
#btnPagetop.fixed {
                   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                   transform:translate(0, 20px);
                   opacity: 0; visibility: hidden; position: fixed; bottom: 160px; margin-left:913px; margin-bottom:0;}
#btnPagetop.action {transform: translate(0, 0); opacity: 1; visibility: visible; }

/*---------------------------------------------------------------------
Item layout
---------------------------------------------------------------------*/
#itemBnr {
  position:relative; min-width:1000px;
  height: 0;
	padding-top:56.25%;
	overflow: hidden;
}
#itemBnr iframe {
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#itemBnr a:hover {opacity:0.7;}
#itemBnr a:hover img {opacity:1;}
#itemBnr a {text-decoration:none;}

  #itemBnr .bnr {
    transform        :translate(-50%,0);
    position:absolute; top:0; left:50%;
  }
    #itemBnr .bnr .img {margin-bottom:50px;}
    #itemBnr .bnr .txt {width:380px; margin-left:auto;}
      #itemBnr .bnr .txt dl {margin-bottom:25px;}
      #itemBnr .bnr .txt dt {
        background:url(../images/item/ic_name.gif) no-repeat 0 50%;
        font-size:24px; padding-left:20px; font-weight:bold; margin-bottom:10px;
      }
      #itemBnr .bnr .txt dd {font-size:14px; padding-left:20px;}
      #itemBnr .bnr .txt .description {font-size:15px; padding-left:20px;}


#itemList {}
#itemList .item_list {margin-bottom:150px;}
  #itemList .item_list li {display:inline-block; margin-right:90px; text-align:center;}
  #itemList .item_list li:last-of-type {margin-right:0;}
    #itemList .item_list li a {display:block; text-decoration:none;}
    #itemList .item_list li a:hover {opacity:0.7;}
    #itemList .item_list li a:hover img {opacity:1;}

    #itemList .item_list li dl {display:inline-block; text-align:left;}
    #itemList .item_list li dt {
      background:url(../images/item/ic_name2.gif) no-repeat 0 50%;
      font-size:21px; font-weight:bold; display:inline-block; padding-left:20px;
      text-align:left; margin-bottom:15px;
    }
    #itemList .item_list li dd {font-size:13px; text-align:left; padding-left:20px;}



/*---------------------------------------------------------------------
Smart Phone layout
---------------------------------------------------------------------*/
.sp #wrapper,
.sp #topHeader {overflow:hidden;}

.sp #itemBnr {min-width:100%;}
.sp #itemBnr .bnr {
  transform        :translate(0,0);
  position:relative; left:0;
}
.sp #itemBnr .img {padding:0 60px;}
.sp #itemBnr .img img {width:100%;}

.sp #itemList {padding:0 30px;}