@charset "utf-8";
body{ line-height:1.0em; }
main {max-width: 700px; padding: 0 15px; font-size: 16px; line-height: 1.5em;}


/* ページトップへ */
#top-button {
    right: 0px; bottom: 60px; z-index: 1; 
    padding: 15px 10px; border-radius: 8px 0 0 8px; background: #2e3071; 
    color: #FFF; font-size: 12px; line-height: 1.3em; text-align: center;}

#top-button:hover {opacity: 0.8;}

#top-button span {display: inline-block; position: relative; padding: 0 0 0 30px;}
#top-button span:before {
    width: 0; height: 0; margin: -5px 0 0 5px;
    border-style: solid; border-width: 0 6px 9px 6px;
    border-color: transparent transparent #fff transparent;}

#top-button span:before, 
#top-button span:after {
    content: '';
    position: absolute; top: 50%; left: 0px;}

#top-button span:after {
    width: 20px; height: 20px; margin: -11px 0 0;
    border: solid #fff 1px; border-radius: 10px;}
    
@media screen and (max-width: 900px){
body {padding: 0 0 50px;}

#top-button {
    display: block; bottom: 0px;
    width: 100%;  padding: 15px 0; border-radius: 0;
    opacity: 0.95;}
}

/* パンクズリスト */
#pankuzu { margin:30px 0 15px; padding: 0; font-size: 14px; line-height: 1.1em;}
#pankuzu h2,#pankuzu h3,#pankuzu h4,#pankuzu h5 { display: inline; font-size: 14px; font-weight: lighter; line-height: 1.5em;}
#pankuzu a {color: #535353; text-decoration: none; letter-spacing: 0.05em;}
#pankuzu a:hover { color:#0066CC; text-decoration:underline;}

@media screen and (max-width:599px){
#pankuzu {overflow-x: scroll; margin:20px 0;padding:5px; font-size: 13px; white-space: nowrap;}
#pankuzu h2,#pankuzu h3,#pankuzu h4,#pankuzu h5 { font-size: 13px;}
#pankuzu div {display: inline-block; padding: 5px 5px 0;}

/* スクロールバーの装飾 */
#pankuzu::-webkit-scrollbar {height: 8px;}
#pankuzu::-webkit-scrollbar-track {background-color: rgba(216, 216, 216, 0.5);}
#pankuzu::-webkit-scrollbar-thumb {background-color: rgba( 150, 150, 150, 0.8);}
}
/**============================================================================================**/


/**============================================================================================**/
/* 分解図一覧 */
#catalog ul {font-size: 0; overflow: auto;}
#catalog li { 
    display: inline-block; 
    box-sizing: border-box; width:33.33%; margin: 5px 0 10px; padding: 0 10px; 
    font-size: 16px; vertical-align: top;}

#catalog li img { 
    box-sizing: border-box; width: 100%; height: auto;
    border:solid 1px #999;}

@media screen and (max-width:499px){
#catalog li { width:50%;}

}



/**============================================================================================**/


/**============================================================================================**/
/* <link href="/genuine/js/style.css"> */
.GITheWall ul li.GI_TW_Selected_Row {
    -webkit-transition: margin-bottom 0.3s ease-in;
    -moz-transition: margin-bottom 0.3s ease-in;
    -o-transition: margin-bottom 0.3s ease-in;
    transition: margin-bottom 0.3s ease-in;
}

/* アコーディオンで開閉される部分 */
.GI_TW_expander {
    position: absolute; top: 0; z-index: 1; left: 0;
    overflow: hidden;
    box-sizing: border-box; width: 100%; height: 0; margin: 16px auto 10px; padding: 0 55px;
    background: #333;
    -webkit-transition: height 0.3s ease-in;
    -moz-transition: height 0.3s ease-in;
    -o-transition: height 0.3s ease-in;
    transition: height 0.3s ease-in;}

.GI_TW_expander.opened { overflow: visible;}

.GI_TW_expander.animating { overflow: hidden !important;}

/* 吹き出しの根本の部分 */
.GI_TW_pointer {
    position: absolute;
    width: 0; height: 0; margin: -16px 0 0 -8px;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #333;
    border-left: 8px solid transparent;
    -webkit-transition: left 0.1s ease-in;
    -moz-transition: left 0.1s ease-in;
    -o-transition: left 0.1s ease-in;
    transition: left 0.1s ease-in;
}
.GI_TW_expander-inner {
    overflow: hidden;
    box-sizing: border-box; width: 100%; margin: 0 auto;}

/* アコーディオンの高さ設定 */
.GI_TW_expander-inner .GI_TW_fullimg {
    position: relative; overflow: hidden;
    width: 100%; height: 600px; margin: 10px 0 0;
    text-align: center;}

/* アコーディオン内のテキスト */
.ct-msgwrap {margin: 0 0 5px;}
.ct-msgtop{color: #FFF; font-size: 1.125em; font-weight: bold; text-align: left;}
.ct-msgbottom{ color: #ffff00; font-size: 0.812em; text-align: right;}

/* アコーディオン内の分解図のサイズ */
.GI_TW_fullimg > a > img {max-width:490px; height: 530px;}


/* 閉じるボタン */
.GI_TW_close {
    position: absolute; top: 0px; right: 0px; z-index: 1;
    width: 36px; height: 36px;
    cursor: pointer;}

.GI_TW_close:before {
    content: url("../images/icon_close-off.png");
    display: block; position: absolute; top: 50%; right: 50%;
    width: 24px; height: 24px; margin: -12px -12px 0 0;
    transition: all 0.4s;}

.GI_TW_close:hover:before {
 opacity: 0.8;
}


/* 左方向ボタン・右方向ボタン */
.GI_TW_arrow.GI_TW_prev,
.GI_TW_arrow.GI_TW_next {
    position: absolute; top: 50%;
    box-sizing: border-box; width: 35px; height: 95px; margin: -47px 0 0; padding: 31px 0 0; 
    border: solid 1px #999; background: #494949;
    color: #FFF; font-size: 30px; font-weight: bold; line-height: 1; text-align: center;
    text-shadow: 1px 0 0 #FFF; cursor: pointer; transition: all 0.4s;
    font-family: "ＭＳ Ｐゴシック", "MS PGothic";
    font-style:normal;}

.GI_TW_arrow.GI_TW_prev:hover,
.GI_TW_arrow.GI_TW_next:hover { background: #999;}

/* ボタン位置 */
.GI_TW_arrow.GI_TW_prev { left: 10px;}
.GI_TW_arrow.GI_TW_next { right: 10px;}

/* 方向ボタン（選択された画像が最初と最後の場合、表示を消す） */
.GI_TW_arrow.GI_TW_hidden {display: none;}


/**============================================================================================**/
.GI_TW_loading {
    position: absolute; top: 50%; left: 50%;
    width: 20px; height: 20px; margin: -25px 0 0;
    border-radius: 50%; background: #ddd;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
    -webkit-animation: loader 0.5s infinite ease-in-out both;
    -moz-animation: loader 0.5s infinite ease-in-out both;
    -ms-animation: loader 0.5s infinite ease-in-out both;
    -o-animation: loader 0.5s infinite ease-in-out both;
    animation: loader 0.5s infinite ease-in-out both;
}

@-moz-keyframes loader {
  0% {
    background: #ddd;
  }

  33% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
  }

  66% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
  }
}

@-webkit-keyframes loader {
  0% {
    background: #ddd;
  }

  33% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
  }

  66% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
  }
}

@-o-keyframes loader {
  0% {
    background: #ddd;
  }

  33% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
  }

  66% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
  }
}

@-ms-keyframes loader {
  0% {
    background: #ddd;
  }

  33% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
  }

  66% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
  }
}

@keyframes loader {
  0% {
    background: #ddd;
  }

  33% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd;
  }

  66% {
    background: #ccc;
    box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc;
  }
}
/**============================================================================================**/
/**============================================================================================**/