@charset "utf-8";
/*============================

grandindex用css
METAL BUILD_PC用

============================*/
#metal_build {
    font-family: "源ノ角ゴシック", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow-x: hidden;
}
#metal_build .dis_sp {
    display: none;
}
#metal_build .in-blk {
    display: inline-block;
}
/*背景
==============================*/
#main, #tw2022_slider,
#metal_build.gi_contentsarea{
    background: url(/img/grand_index/metal_build/20220825/bg_bl_skbKDxTW.jpg) repeat-y center top;
    background-size: 100%;
}
#metal_build .gi_contents_bgarea {
    background: none;
}
#metal_build .gi_contents_bgarea_upper {
    padding-bottom: 180px;
}
/*見出し
==============================*/
#metal_build.gi_contentsarea .gi_title {
    padding: 40px 0 20px;
}
#metal_build.gi_contentsarea .gi_title img {
    max-width: 40%;
}
#metal_build.gi_contentsarea .gi_title span {
    display: none;
    /* color: #fff;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-left: 4%; */
}

#metal_build.gi_contentsarea #gi_productlist .gi_subtitle._underline,
#metal_build.gi_contentsarea #gi_salessite .gi_subtitle,
#metal_build.gi_contentsarea #gi_specialarea .gi_subtitle {
    font-size: 0;
    width: 100vw;
/*    height: 2.61vw;
    min-width: 1080px;
    min-height: 28.2px;*/
    height: 5.61vw;
    min-width: 1260px;
    min-height: 63.2px;
    max-height: 63.2px;
    /*margin: 0 calc(-50vw + 50%) 30px;*/
    margin: 0 0 30px;
    position: absolute;
    top: -90px;
    left: 0;
    right: 0;
}
/* 幅いっぱいエリアを幅せばめたときのリセット */
@media screen and (max-width: 1000px) {
    #metal_build.gi_contentsarea #gi_productlist .gi_subtitle._underline,
    #metal_build.gi_contentsarea #gi_salessite .gi_subtitle,
    #metal_build.gi_contentsarea #gi_specialarea .gi_subtitle {
        margin: 0 0 30px;
    }
}

#metal_build.gi_contentsarea #gi_productlist .gi_subtitle._underline {
    background: url(/img/grand_index/metal_build/20220825/h2_product-list_8r3wzw3r.png) no-repeat center bottom;
    background-size: 100%;
}
#metal_build.gi_contentsarea #gi_productlist .gi_subtitle._underline::before{
    display: none;
}
#metal_build.gi_contentsarea #gi_salessite .gi_subtitle {
    background: url(/img/grand_index/metal_build/20220825/h2_sales-sites_yZ3epJDk.png) no-repeat center bottom;
    background-size: 100%;
}
#metal_build.gi_contentsarea #gi_specialarea .gi_subtitle {
    background: url(/img/grand_index/metal_build/20220825/h2_exclusive-sites_articles_fe3bruEz.png) no-repeat center bottom;
    background-size: 100%;
}

/*スライド
==============================*/
#metal_build .slick-dots li button:before {
    opacity: .75;
    color: #525252;
}
#metal_build .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #aa8e0d;
}
/*スライド下フリーエリア
==============================*/
/*ページ内リンク
==============================*/
#metal_build #gi_plbtn .btn_link a {
  color: #fff;
  background: #aa8e0d!important;
}
#metal_build #gi_plbtn .btn_link a:after{
  background: #fff;
}
#metal_build #gi_plbtn .btn_link a:hover{
    background: #fff!important;
    color: #aa8e0d;
}
#metal_build #gi_plbtn .btn_link a:hover:after{
    background: #aa8e0d;
}
/*更新履歴
==============================*/
/*ブランド背景
==============================*/
/*ブランド説明
==============================*/
#metal_build #gi_explanation {
    display: none;
}

#metal_build #introduction {
    width: 1000px;
    margin: 100px auto 60px;
}
#metal_build #introduction .top,
#metal_build #introduction .top img {
    width: 100%;
}
#metal_build #introduction .mid {
    position: relative;
    border-bottom: 2px solid #c1c1c4;
    margin-top: -1px;
}
#metal_build #introduction .mid::before,
#metal_build #introduction .mid::after {
    content: "";
    position: absolute;
    top: 0;
    width: 12px;
    height: 100%;
    z-index: 0;
}
#metal_build #introduction .mid::before {
    left: 0;
    background: url(/img/grand_index/metal_build/20220825/intro_brand_frame_l_NESGNaf5.png) no-repeat left center;
    background-size: 100% 100%;
}
#metal_build #introduction .mid::after {
    right: 0;
    background: url(/img/grand_index/metal_build/20220825/intro_brand_frame_r_ESjLtdJF.png) no-repeat right center;
    background-size: 100% 100%;
}
#metal_build #introduction .mid .intro_txt {
    color: #fff;
    text-align: center;
    font-size: 1.1em;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: 0.06em;
    line-height: 2em;
    padding: 2em calc(12px + 0.6em) 0;
}
/*訴求エリア
==============================*/

/* リンクボタン */
#metal_build .linkbtn_s,
#metal_build .linkbtn_m,
#metal_build .linkbtn_l {
    text-align: center;
    margin: 1.6em auto 2em;
}
#metal_build .linkbtn_s a,
#metal_build .linkbtn_m a,
#metal_build .linkbtn_l a {
    display: inline-block;
    color: #171718;
    text-align: center;
    font-size: 1.1em;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: 0.06em;
    min-height: 69px;
    padding: calc(34.5px - 0.5em) 2em;
    -webkit-transition: .4s cubic-bezier(.19,1,.22,1);
    -moz-transition: .4s cubic-bezier(.19,1,.22,1);
    -ms-transition: .4s cubic-bezier(.19,1,.22,1);
    -o-transition: .4s cubic-bezier(.19,1,.22,1);
    transition: .4s cubic-bezier(.19,1,.22,1);
}
#metal_build .linkbtn_s a {
    background: url(/img/grand_index/metal_build/20220825/btn_bg_s_pMdp9xxs.jpg) no-repeat center center;
    background-size: 100% 100%;
    min-width: 227px;
}
#metal_build .linkbtn_m a {
    background: url(/img/grand_index/metal_build/20220825/btn_bg_m_tVeSnxQn.jpg) no-repeat center center;
    background-size: 100% 100%;
    min-width: 407px;
}
#metal_build .linkbtn_l a {
    /* background: url(/img/grand_index/metal_build/20220825/btn_bg_l_zaNBUxtH.jpg) no-repeat center center; */
    /* background-size: 100% 100%; */
    /* min-width: 727px; */
    color: #000;
    border: 1px solid #000;
    font-size: 1em;
    min-height: 0;
    padding: 1em 2em;
}
#metal_build .linkbtn_s a:hover,
#metal_build .linkbtn_m a:hover {
    transform: translateY(-5px);
    -ms-filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
}
#metal_build .linkbtn_l a:hover {
    background: #000;
    color: #fff;
    border-color: #fff;
}

/* 白背景 */
#metal_build .bg_wt {
    background: url(/img/grand_index/metal_build/20220825/bg_wt_BVGmZcFH.jpg) repeat-y center top;
    background-size: 100%;
    margin: 120px calc(-50vw + 50%) 0;
    padding: 1px 0;
}
/* 幅いっぱいエリアを幅せばめたときのリセット */
@media screen and (max-width: 1000px) {
    #metal_build .bg_wt {
        margin: 0;
    }
}
#metal_build .bg_wt .wt_contents_inner {
    width: 1000px;
    margin: auto;
}


/* 訴求エリア内見出し */
#metal_build h2.gi_subtitle02 {
    margin: 150px 0 40px;
    text-align: center;
}
#metal_build #hot-news h2.gi_subtitle02 {
    margin-top: 100px;
}


/* バナーエリア（上に文字のる） */
#metal_build .bnr_area_over {
    position: relative;
    -webkit-transition: .4s cubic-bezier(.19,1,.22,1);
    -moz-transition: .4s cubic-bezier(.19,1,.22,1);
    -ms-transition: .4s cubic-bezier(.19,1,.22,1);
    -o-transition: .4s cubic-bezier(.19,1,.22,1);
    transition: .4s cubic-bezier(.19,1,.22,1);
}
#metal_build .bnr_area_over a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#metal_build .bnr_area_over:hover {
    opacity: 0.9;
}


/* HOT NEWSエリア */
#metal_build #hot-news .bnr_area_over {
    border: 1px solid #3e3d3b;
    width: 900px;
    margin: auto;
}


/* シミュレーターエリア */
#metal_build h3.contents_catch {
    color: #000;
    text-align: center;
    font-size: 2em;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4em;
}
#metal_build .contents_txt {
    color: #000;
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.8em;
    margin: 20px auto 30px;
}
#metal_build .bg_d-bl {
    background: #040219;
    padding: 15px;
}
#metal_build .bg_d-bl_inner {
    border: 2px solid #3f3e51;
    text-align: center;
    padding: 35px 35px 0;
}
#metal_build .update_date {
    color: #aa8e0d;
    text-align: center;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 0 auto 0.4em;
}
#metal_build .update_date.new {
    display: inline-block;
    position: relative;
    padding-left: 2.2em;
}
#metal_build .update_date.new::before {
    content: "NEW";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -2.2em;
    transform: translateY(-50%);
    background: #aa8e0d;
    color: #fff;
    border: 2px solid #040219;
    box-shadow: 0 0 0 1px #aa8e0d;
    text-align: center;
    line-height: 1em;
    padding: 0.3em 0.4em;
}
#metal_build .update_txt {
    color: #fff;
    text-align: center;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.2em;
    letter-spacing: 0.04em;
    margin: 0 auto 1em;
}
#metal_build .simu_gif {
    margin-bottom: 40px;
}


/* MOVIEエリア */
#metal_build .yt_area {
    text-align: center;
    margin: 40px auto 100px;
}
#metal_build .yt_area iframe {
    width: 1000px;
    height: 562.5px;
}
#metal_build .bnr_area {
    width: 84%;
    margin: auto;
}

/* PICKUP CHARACTERエリア */
#metal_build #pickup-characters {
    margin-bottom: 100px;
}
#metal_build p.contents_catch {
    color: #000;
    text-align: center;
    font-size: 1.1em;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    letter-spacing: 0.04em;
    line-height: 1.8em;
    margin: 20px auto 40px;
}
#metal_build .card_area ul.card_list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#metal_build .card_area ul.card_list li {
    position: relative;
    width: 32%;
    margin: 0 1%;
    -webkit-transition: .4s cubic-bezier(.19,1,.22,1);
    -moz-transition: .4s cubic-bezier(.19,1,.22,1);
    -ms-transition: .4s cubic-bezier(.19,1,.22,1);
    -o-transition: .4s cubic-bezier(.19,1,.22,1);
    transition: .4s cubic-bezier(.19,1,.22,1);
}
#metal_build .card_area ul.card_list li:hover {
    transform: translateY(-5px);
    -ms-filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
    filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.6));
}
#metal_build .card_area ul.card_list li:nth-of-type(3n+1) {
    margin-left: 0;
}
#metal_build .card_area ul.card_list li:nth-of-type(3n+3) {
    margin-right: 0;
}
#metal_build .card_area ul.card_list li a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#metal_build .card_area ul.card_list li span.card_ttl {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    font-family: "源ノ明朝", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    width: calc(100% - 2.6em);
}
#metal_build .card_area ul.card_list li.seed span.card_ttl {
    text-shadow: 1px 1px 5px rgba(57, 5, 6, 0.2), -1px -1px 5px rgba(57, 5, 6, 0.2), -1px 1px 5px rgba(57, 5, 6, 0.2), 1px -1px 5px rgba(57, 5, 6, 0.2), 0px 1px 15px rgba(57, 5, 6, 0.4), 0 -1px 15px rgba(57, 5, 6, 0.4), -1px 0 15px rgba(57, 5, 6, 0.4), 1px 0 15px rgba(57, 5, 6, 0.4);
}

#metal_build .card_area ul.card_list li.oo span.card_ttl {
    text-shadow: 1px 1px 5px rgba(5, 56, 28, 0.2), -1px -1px 5px rgba(5, 56, 28, 0.2), -1px 1px 5px rgba(5, 56, 28, 0.2), 1px -1px 5px rgba(5, 56, 28, 0.2), 0px 1px 15px rgba(5, 56, 28, 0.4), 0 -1px 15px rgba(5, 56, 28, 0.4), -1px 0 15px rgba(5, 56, 28, 0.4), 1px 0 15px rgba(5, 56, 28, 0.4);
}

#metal_build .card_area ul.card_list li.eva span.card_ttl {
    text-shadow: 1px 1px 5px rgba(57, 5, 6, 0.2), -1px -1px 5px rgba(57, 5, 6, 0.2), -1px 1px 5px rgba(57, 5, 6, 0.2), 1px -1px 5px rgba(57, 5, 6, 0.2), 0px 1px 15px rgba(57, 5, 6, 0.4), 0 -1px 15px rgba(57, 5, 6, 0.4), -1px 0 15px rgba(57, 5, 6, 0.4), 1px 0 15px rgba(57, 5, 6, 0.4);
}



/*バックナンバー
==============================*/
/*商品など
==============================*/
#metal_build #gi_productlist {
    margin-bottom: 35px;
    padding-top: 20px;
    position: relative;
}
#metal_build #gi_productlist + .freespace {
    margin-bottom: 100px;
}
#metal_build #gi_productlist .search_result,
#metal_build #gi_productlist .search_result .result,
#metal_build .pagenavi li {
    color: #fff;
}
#metal_build #gi_productlist .search_result .txt {
    border-color: #fff;
}
#gi_productlist .pagenavi li a{
    background: #000;
    border: 3px solid #fff;
}
#metal_build .pagenavi li.active a,
#metal_build .pagenavi li a:hover,
#metal_build .pagenavi li a:active {
    background-color: #fff;
    color: #000;
}
#metal_build #category_search,
#metal_build #gi_productlist .search_result {
  color: #fff;
}
#metal_build #category_search .search_main_wrap .order_wrap label span{
  border-color: #fff;
}
#metal_build .search_modal .search_modal-window{
  color: #3B3B3B;
}
#metal_build #gi_productlist .search_result .txt{
  border-color: #fff;
}
/*商品下フリーエリア
==============================*/
/*販売サイト
==============================*/
#metal_build #gi_salessite {
    background: none;
    position: relative;
}
#metal_build #gi_salessite .gi_contents_inner {
    background: #e4e8f2;
    padding: 30px 40px 40px;
    margin-top: 160px;
}
/*特設サイト・記事
==============================*/
#metal_build #gi_specialarea {
    background: none;
    position: relative;
}
#metal_build #gi_specialarea .gi_contents_inner {
    background: #e4e8f2;
    padding: 30px 40px 40px;
    margin-top: 200px;
}
/*サブカテゴリ
==============================*/
/*関連情報
==============================*/
/*関連情報下
==============================*/
/*コピーライト
==============================*/
#metal_build .gi_copyright {
    display: none;
}
#metal_build .gi_free_copyright {
    color: #fff;
    font-size: 12px;
}

/*Push通知
==============================*/
#metal_build .gi_push_plbtn {
    margin-top: -15px;
}

/* Cookie
==============================*/
#metal_build a.ot-sdk-show-settings {
    z-index: 2;
}