@charset "UTF-8"; body, html, div, ul, li, section, h1, h2, h3, h4, img, figure, p, a, span { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } a { text-decoration: none; color: #000000; } li { list-style: none; } img { vertical-align: bottom; } .noPC{ display: none !important; } .wrap { width: 1024px; margin: 0 auto; } .breadcrumbs { color: #a3a3a3; margin: 10px 0 40px; } .breadcrumbs span, .breadcrumbs li { font-size: 12px; display: inline-block; padding: 0 5px 0 0; } .breadcrumbs li { padding: 0; } .breadcrumbs li a:after, .breadcrumbs span a:after { content: "▶︎"; font-size: 10px; transform: scale(0.7, 0.7); display: inline-block; color: #a3a3a3; } .breadcrumbs li a:after{ margin-left: 5px; } .breadcrumbs a { color: #a3a3a3; font-size: 12px; } .single.breadcrumbs li.level-3.sub{ display: none; } .single.breadcrumbs li.level-3.sub.tail{ display: inline; } .btn { font-family: 'Lato', sans-serif; line-height: 1; } .history_back { background: #333; display: block; width: 200px; height: 50px; margin: 30px 0; } .history_back:hover { opacity: 0.7; border: solid 1px #333; } .history_back .table { display: table; height: 50px; width: 200px; } .history_back .table a { display: table-cell; vertical-align: middle; color: #FFF; text-align: center; width: 200px; } .title { font-family: 'Lato', sans-serif; } .wp-pagenavi { text-align: center; letter-spacing: 17px; font-size: 15px; margin: 20px 0; } .wp-pagenavi .current, .wp-pagenavi .page { border: 1px solid #333; height: 30px; width: 30px; display: inline-block; padding-left: 10px; margin-right: 10px; } .wp-pagenavi a { color: #333; } .home_title { font-size: 40px; font-weight: normal; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; font-family: 'Lato', sans-serif; text-align: center; margin: 40px auto; } .clear:after { content: "."; overflow: hidden; display: block; height: 0; clear: both; } #global-menu { background: #2b3138; height: 80px; width: 100%; position: fixed; left: 0; top: -100px; z-index: 9999; margin: 100px auto 0; } #global-menu .inner { position: relative; } #global-menu .inner:after { content: ""; clear: both; display: block; } #global-menu .logo { float: left; font-size: 36px; } #global-menu.fixed { margin-top: 0; top: -10px; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255, 255, 255, 0.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; } #global-menu.fixed .logo { font-size: 24px; color: #333; } #global-menu.fixed #global-nav ul li a { color: #333; padding: 0 20px; } #global-menu .global-menu_logo { margin: 15px 15px 15px 0; float: left; } #global-menu nav ul { height: 80px; float: right; } #global-menu nav ul li { display: inline-block; height: 80px; margin-left: 60px; } #global-menu nav ul li .table { display: table; height: 80px; } #global-menu nav ul li .table a, #global-menu nav ul li .table .no_link { color: #828487; display: table-cell; vertical-align: middle; padding: 0; margin-left: 60px; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; font-family: 'Lato', sans-serif; } #global-menu nav ul li .table .no_link { color: #505254; } #global-menu nav ul li .table a:hover { color: #FFF; } body.home #global-menu nav ul li.n01 .table a, body.brand #global-menu nav ul li.n02 .table a, body.movie #global-menu nav ul li.n03 .table a, body.shoplist #global-menu nav ul li.n04 .table a, body.support #global-menu nav ul li.n05 .table a, #global-menu nav ul li .table a:hover, #global-menu nav ul li .table a.active, #global-menu nav ul li .table a:active { color: #FFF; border-bottom: solid 3px #c3032c; height: 77px; padding-top: 3px; } #nav-toggle { display: none; position: absolute; right: 12px; top: 12px; width: 34px; height: 21px; cursor: pointer; z-index: 101; font-size: 11px; text-align: center; color: #fff; } #nav-toggle div { position: relative; height: 20px; width: 27px; margin: 0 auto; } #nav-toggle span { display: block; position: absolute; height: 2px; width: 100%; background: #fff; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 7px; } #nav-toggle span:nth-child(3) { top: 14px; } #home { margin-top: 80px; } #home .home-title { height: 260px; width: 100%; overflow: hidden; position: relative; background: #000; } #home .home-title .home-title_img { position: absolute; top: 0; right: -200px; } #home .home-title .home-title_bg { position: absolute; top: 0; right: 30%; } #home .home-title .home_title { font-size: 34px; font-weight: normal; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; font-family: 'Lato', sans-serif; color: #FFF; display: table; height: 173px; width: 1024px; position: relative; text-align: left; } #home .home-title .home_title h2 { display: table-cell; vertical-align: middle; } #home .home-title .home_title h2 span{ display: block; font-size: 50%; } #home .slider-box { position: relative; color: #FFF; text-align: right; } #home .slider-box .txt-box { position: absolute; top: 50%; right: 8%; margin-top: -65px; letter-spacing: 4px; } #home .slider-box .txt-box h2 { font-size: 40px; margin-bottom: 20px; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; } #home .slider-box .txt-box p { font-size: 17px; margin-bottom: 10px; } #home .slider-box .slider { position: relative; } #home .slider-box .slider img { max-width: 120%; height: auto; margin: 0 auto; } .home_movie-box { height: 160px; overflow: hidden; margin-bottom: 10px; } .movie .movie-content { width: 100%; max-width: 500px; margin: 0 auto; } .home_news-and-blog, .home_movie, .home_brand { padding: 50px 0; } .title.h3_title, .home_news .title, .home_blog .title { font-weight: bold; font-size: 20px; float: left; margin-bottom: 30px; } .title.h3_title{ float: none; } .title.h3_title:after, .home_news .title:after, .home_blog .title:after { content: "."; display: block; width: 20px; background: #c3032c; border-radius: 3px; height: 4px; overflow: hidden; margin-top: 5px; } .home_news .btn, .home_blog .btn { float: right; margin-bottom: 30px; color: #FFF; background: #ccc; padding: 3px 10px 5px; } .home_news .btn:hover, .home_blog .btn:hover { background: #c3032c; } .home_news ul, .home_blog ul { clear: both; } .home_news ul li, .home_blog ul li { border-bottom: dotted 1px #ccc; padding: 10px 0; } .home_news ul li a, .home_blog ul li a { color: #333; } .home_news ul li a:hover, .home_blog ul li a:hover { color: #777; } .home_news ul li date, .home_blog ul li date { font-size: 11px; } .home_news ul li p, .home_blog ul li p { font-size: 15px; font-weight: bold; } .brand_original-home { position: relative; width: 100%; height: auto; overflow: hidden; color: #FFF; background: #000000; } .brand_original-home .brand_logo { position: absolute; top: 150px; left: 50%; width: 297px; margin-left: -480px; } .brand_original-home .brand_logo_right { position: absolute; top: 150px; right: 50%; width: 297px; margin-right: -480px; } .brand_original-home .brand_txt { font-size: 13px; } .brand_original-home .home-img { width: 120%; position: absolute; top: 0; left: 0; } .brand_original-home .brand_black-box { background: rgba(0, 0, 0, 0.8); height: auto; padding: 50px 0; position: relative; margin-top: 500px; /* position: absolute; bottom: 0; left: 0; */ width: 100%; } .brand_original-home .brand_black-box .brand-img { margin-top: 35px; } .brand_original-home .brand_black-box .brand-img li { display: inline-block; margin-right: 1%; font-size: 12px; width: 24.25%; vertical-align: top; } .brand_original-home .brand_black-box .brand-img li img{ width: 100%; } .brand_original-home .brand_black-box .brand-img li p { margin-top: 5px; } .brand_original-home .brand_black-box .brand-img li:last-child { margin: 0; } .brand_original { background: #e3e5e6; padding: 50px 0; } .brand_original .tech-tire li { display: inline-block; margin-right: 2%; width: 49%; margin-bottom: 20px; float: left; } .brand_original .tech-tire li:nth-child(2n) { margin-right: 0; } .brand_original .tech-tire li img{ width: 100%; } .brand_original-news { width: 100% !important; } .brand-content a{ text-decoration: underline; } .home_news-and-blog .home_news, .home_news-and-blog .home_blog { width: 45%; } .home_news-and-blog .home_news { float: left; } .home_news-and-blog .home_blog { float: right; } .home_sns { background: #f1f2f3; } .home_sns .wrap .sns_position li { display: inline-block; margin-right: 50px; } .home_sns .wrap .sns_position li.brand-scroll_box { padding: 70px 15px 70px 20px; background: #e7e9eb; margin-right: 0; } .home_sns .wrap .sns_position .brand-scroll { width: 235px; height: 420px; overflow: auto; } .home_sns .wrap .sns_position .brand-scroll li { margin: 0 0 10px 0; } .home_sns .wrap .sns_position .brand-scroll li img { width: 100%; } .home_sns .wrap .sns_position .brand-scroll li.fb_bnr{ display: none; } .home_movie { background: url(../img/home/movie_bg.jpg) no-repeat; background-position: center center; background-size: cover; } .home_movie .home_title { color: #FFF; } .home_movie ul li { vertical-align: top; width: 324px; display: inline-block; margin-right: 20px; } .home_movie ul li img { width: 100%; height: auto; } .home_movie ul li:last-child { margin-right: 0; } .home_movie .movie_box{ display: block; background: #000000; } .home_movie .movie_box iframe{ width: 100%; } .home_movie ul li .movie_title { color: #FFF; text-align: center; font-size: 15px; margin: 20px auto 0; display: block; } .home_movie .btn { border: 1px solid #FFF; padding: 15px; width: 200px; text-align: center; color: #FFF; display: block; margin: 40px auto; } .home_movie .btn:hover { background: #FFF; color: black; } .home_brand .home_brand-mb { display: none; } .home_brand .main-brand li { display: inline-block; margin-right: 40px; margin-bottom: 40px; } .home_brand .main-brand li:nth-child(even) { margin-right: 0; } .home_brand .main-brand li:last-child, .home_brand .main-brand li:nth-last-child(2) { margin-bottom: 0; } .home_brand .other-brand { margin: 40px 0; } .home_brand .other-brand li { display: inline-block; margin: 0 35px 40px 0; } .home_brand .other-brand li p{ display: none; } .home_brand .other-brand li:nth-child(3n) { margin-right: 0; } .home_brand .other-brand li:last-child, .home_brand .other-brand li:nth-last-child(2), .home_brand .other-brand li:nth-last-child(3) { margin-bottom: 0; } #footer { background: #2b3138; padding: 30px 0; width: 100%; } #footer nav { float: left; color: #ffffff; } #footer nav a { color: #FFF; font-size: 14px; -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; position: relative; } #footer .copy { float: right; color: #FFF; font-size: 10px; } #footer .copy p { line-height: 24px; } .news { line-height: 1.8; letter-spacing: 2px; margin: 50px 0; overflow: hidden; } .news .news_100, .blog .news_100 { width: 100%; position: relative; } .news date { display: inline-block; font-size: 13px; } .news .tag { display: inline-block; background: #e4e7e7; padding: 5px; } .news .news-title { font-size: 20px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc; } .news .news-content { margin-top: 15px; font-size: 13px; } div.brand { background: #f9fafa; line-height: 1.8; letter-spacing: 2px; overflow: hidden; } div.brand .brand-name { padding: 50px 0; } div.brand .brand-name .brand-logo { float: left; margin-right: 20px; } div.brand .brand-news { background: #eff0f1; } div.brand .brand-news .brand_news { width: 100%; } div.brand .brand-product { padding-bottom: 50px; } div.brand .brand-product ul{ overflow: hidden; } div.brand .brand-product li{ margin-right: 10px; } div.brand .brand-product li:nth-child(6n){ margin-right: 0; } div.brand .brand-product li a{ width: 160px; height: 160px; padding: 20px; box-sizing: border-box; background: #ffffff; float: left; margin: 0 10px 10px 0; color: #000000; position: relative; } div.brand .brand-product li a:hover{ border: 1px solid #c72943; padding: 19px; } div.brand .brand-product li img{ max-height: 100%; max-width: 100%; height: auto; } div.brand .brand-product li span{ display: block; font-size: 10px; position: absolute; bottom: 5px; left: 10px; letter-spacing: 0; } .brand .brand_allbrand { margin: 20px 0; overflow: hidden; } .brand .brand_allbrand li { float: left; margin-right: 22px; margin-bottom: 22px; } .brand .brand_allbrand li a, .brand .brand_allbrand li .no_link { float: left; border: 1px solid #FFFFFF; } .brand .brand_allbrand li a:hover{ border: 1px solid #c72943; } .brand .brand_allbrand li:nth-child(6n) { margin-right: 0; } .brand .brand_allbrand li img { width: 150px; height: auto; } .brand_allbrand li { display: inline-block; } .brand_box{ width: 100%; text-align: center; background: #ededed; padding: 30px; box-sizing: border-box; margin-bottom: 50px; } .brand_box img{ max-width: 100%; } .product { background: #f9fafa; padding-bottom: 50px; overflow: hidden; } .product .product-title { font-size: 15px; font-weight: bold; margin: 10px 0; } .product .table_outer { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .product .product-data { display: table; width: 100%; font-size: 12px; border-right: 1px solid #d1d5d5; min-width: 600px; } .product .product-data .table { display: table-row; } .product .product-data .table div { display: table-cell; padding: 10px 15px; background: #FFF; border-left: 1px solid #d1d5d5; border-bottom: 1px solid #d1d5d5; } .product .product-data .product-data-title div { background: #f1f1f1; padding: 10px 15px; font-weight: bold; border-left: 1px solid #d1d5d5; border-bottom: 1px solid #d1d5d5; border-top: 1px solid #d1d5d5; } .product .product-mainimg { background: #FFF; margin-bottom: 20px; width: 600px; margin: 0 auto; padding: 10px; box-sizing: border-box; height: 285px; } .product .product-mainimg img { display: block; margin: 0 auto; max-height: 100%; max-width: 100%; } .product .product-otherimg { margin-bottom: 20px; width: 600px; margin: 15px auto; overflow: hidden; } .product .product-otherimg li { /* display: inline-block; */ float: left; margin-right: 6px; margin-bottom: 10px; } .product .product-otherimg li:nth-child(6n){ margin-right: 0; } .product .product-otherimg li a{ width: 90px; height: 90px; box-sizing: border-box; display: block; background: #ffffff; } .product .product-otherimg li a.over{ border: 1px solid #c72943; } .product .product-otherimg li img { max-width: 100%; max-height: 100%; height: auto; } .product .product-material { font-size: 12px; margin: 15px 10px; } .product .product-material li { display: inline-block; margin-right: 10px; } .movie .movie_list { margin: 50px 0; overflow: hidden; } .movie .movie_list li { float: left; width: 32%; overflow: hidden; margin-right: 2%; margin-bottom: 60px; } .movie .movie_list li:nth-child(3n) { margin-right: 0; } .movie .movie_list li .youtube_area{ position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 10px; } .movie .movie_list li .youtube_area iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } .movie .movie_list li img { width: 100%; height: auto; } div.faq{ margin-bottom: 70px; } div.faq .faq_title { font-weight: bold; } div.faq .faq_list { line-height: 1.8; font-size: 13px; } div.faq .faq_list li { border-bottom: dotted 1px #ccc; padding: 10px 0; } div.faq .faq_list li li { border: 0; padding: 5px; } div.faq .faq_list li .q { color: #2175bd; font-weight: bold; } div.faq .faq_list li .a { color: #c3032c; font-weight: bold; } div.faq .faq_list li p { padding-left: 5px; display: inline; } div.company { font-size: 13px; margin-bottom: 70px; } div.company .class_img_single { display: block; } div.company .company_img li { display: inline-block; } div.company .technology_list { width: 100%; border: 0 !important; margin: 10px 0 !important; } div.company .company_title { font-weight: bold; font-size: 18px; } div.company .company_list, div.company .technology_list { display: table; margin: 20px 0; padding-left: 5px; border-top: 1px solid #ccc; width: 100%; } div.company .company_list .title, div.company .technology_list .title { font-weight: bold; } div.company .company_list .title .cell, div.company .technology_list .title .cell { padding: 15px 15px 5px 15px !important; border-bottom: 1px solid #ccc; } div.company .company_list .row_technology, div.company .technology_list .row_technology { display: table-row; } div.company .company_list .row_technology .cell, div.company .technology_list .row_technology .cell { padding: 15px 15px 15px 15px; display: table-cell; vertical-align: top; } div.company .company_list .row, div.company .technology_list .row { display: table-row; } div.company .company_list .row .cell, div.company .technology_list .row .cell { border-bottom: 1px solid #ccc; padding: 15px 15px 15px 15px; display: table-cell; vertical-align: top; } div.company .company_list .row .cell:first-child, div.company .technology_list .row .cell:first-child { width: 180px; } div.company .company_list .row .cell .people, div.company .technology_list .row .cell .people { display: table; } div.company .company_list .row .cell .people .people_row, div.company .technology_list .row .cell .people .people_row { display: table-row; } div.company .company_list .row .cell .people .people_row .people_cell, div.company .technology_list .row .cell .people .people_row .people_cell { display: table-cell; padding-right: 20px; } div.company .company_list .row .cell .history .history_row, div.company .technology_list .row .cell .history .history_row { display: table-row; } div.company .company_list .row .cell .history .history_row .history_cell, div.company .technology_list .row .cell .history .history_row .history_cell { display: table-cell; padding-right: 20px; padding-bottom: 10px; } div.company .company_list .row .cell .history .history_row .history_cell:first-child { white-space: nowrap; } div.company .tab-contents { display: none; } div.company .tab-contents.active { display: block; } div.company .tab-index{ text-align: center; margin-top: 20px; overflow: hidden; } div.company .tab-index li { display: block; width: 49%; float: left; } div.company .tab-index li:first-child{ margin-right: 1%; } div.company .tab-index li:last-child{ margin-left: 1%; } div.company .tab-index li a { background: #e5e6e8; color: #333; text-align: center; padding: 10px 0; width: 100%; display: block; font-size: 13px; font-weight: bold; } div.company .tab-index li a:hover, div.company .tab-index li.active a { background: #c3032c; } .area_list{ overflow: hidden; margin-top: 28px; } .area_list li{ float: left; margin-right: 15px; padding-right: 15px; border-right: 1px solid #000; line-height: 15px; } .area_list li:last-child{ border: none; } .area_list li a{ display: block; font-size: 13px; font-weight: bold; color: #000000; } div.shoplist { overflow: hidden; } div.shoplist .shoplist_area { margin-top: 50px; overflow: hidden; } div.shoplist .shoplist_area li { display: inline-block; float: left; width: 11%; margin-right: 1%; } div.shoplist .shoplist_area li:first-child{ width: 13%; } div.shoplist .shoplist_area li:nth-child(3){ width: 13%; } div.shoplist .shoplist_area li:last-child{ width: 12%; margin-right: 0; } div.shoplist .shoplist_area li a { background: #e5e6e8; color: #333; text-align: center; padding: 10px 0; width: 100%; display: block; font-size: 13px; font-weight: bold; } div.shoplist .shoplist_area li a:hover, div.shoplist .shoplist_area li.active a { background: #c3032c; } div.shoplist .shoplist_list { display: table; font-size: 13px; margin-top: 28px; margin-bottom: 50px; width: 100%; } div.shoplist .shoplist_list .row { display: table-row; } div.shoplist .shoplist_list .row:first-child { background: #e5e6e8; font-weight: bold; font-size: 13px; } div.shoplist .shoplist_list .row:first-child .cell { padding: 13px 20px; border-bottom: none; } div.shoplist .shoplist_list .row .cell { display: table-cell; padding: 13px 20px; border-bottom: solid 1px #ccc; box-sizing: border-box; } /* div.shoplist .shoplist_list .row .cell:first-child { width: 300px; } div.shoplist .shoplist_list .row .cell:nth-child(2) { width: 400px; } .divshoplist .shoplist_list .row .cell:nth-child(3) { width: 130px; } */ div.shoplist .shoplist_list .area { color: #c3032c; } div.shoplist .shoplist_list .area .cell:first-child { padding-left: 35px; background: url(../img/shoplist/icon_arrow.png) no-repeat 20px center; } div.contact { font-size: 12px; /*margin: 50px 0; */ margin-bottom: 70px; } div.contact .contact_img { vertical-align: sub; height: 30px; } div.contact .contact_tel { font-size: 25px; font-weight: bold; display: inline-block; margin-top: 5px; } div.contact .contact_time { display: inline-block; font-size: 10px; } div.contact .contact_pick { background: #f1f1f1; padding: 15px; margin: 20px 0; } div.contact .contact_title { border-bottom: 1px solid #ccc; padding-bottom: 5px; font-size: 14px; font-weight: bold; margin-bottom: 10px; } div.contact .contact_link { margin: 20px 0; } div.contact .contact_link a { font-size: 10px; } div.support { margin-bottom: 70px; font-size: 13px; } div.support .box{ padding: 0; overflow: hidden; } div.support .box img{ float: left; } div.support .box dl{ width: 600px; float: right; margin: 0px; } div.support .box dt{ font-weight: bold; font-size: 160%; padding-bottom: 10px; border-bottom: 1px dotted #636363; } div.support .box dd{ padding: 15px 0 0 0; margin-left: 0px; } div.support .box dd .or_btn{ border: 1px solid #000; padding: 10px; width: 600px; text-align: center; color: #000; display: block; margin: 20px auto 0; font-weight: bold; } div.support .box dd .or_btn:hover{ border: 1px solid #000; background: #000; color: #fff; } div.support .al_c{ text-align: center; margin-top: 30px; padding-top: 30px; border-top: dotted 1px #ccc; } @media screen and (max-width: 1024px) { .wrap { width: 900px; } .home_sns{ background: none; } .home_sns .wrap .sns_position li.fb_widget { margin-right: 0px; width: 440px; } .home_sns .wrap .sns_position li.brand-scroll_box{ padding: 0px; background: none; width: 100%; } .home_sns .wrap .sns_position .brand-scroll{ width: 100%; height: auto; padding: 20px 0; } .home_sns .wrap .sns_position .brand-scroll li{ width: 30%; margin-left: 2%; margin-right: 1%; float: left; } .home_movie ul li { width: 283px; } .home_brand .main-brand li { width: 430px; } .home_brand .main-brand li img { width: 100%; } .home_brand .other-brand li { width: 273px; } .home_brand .other-brand li img { width: 100%; height: auto; } .brand .brand_allbrand li img{ width: 129px; } .brand_original-home .brand_logo{ margin-left: -320px; } .brand_original-home .brand_logo_right{ margin-right: -320px; } div.support .box dl{ width: 450px; float: right; margin: 0px; } div.support .box dd .or_btn{ width: 450px; } } @media screen and (max-width: 940px) { #home .home-title { height: 200px; } #home .home-title .home-title_img, #home .home-title .home-title_bg { height: 210px; } #home .home-title .home_title { font-size: 30px; height: 132px; } #home .slider-box .txt-box { bottom: 8%; right: 4%; top: auto; margin-top: auto; } #home .slider-box .txt-box h2 { font-size: 30px; } #home .slider-box .txt-box p { font-size: 16px; } #home .slider-box .slider img { max-width: 180%; } .wrap { width: 700px; } #global-menu .wrap { width: 100%; } .home_sns .wrap .sns_position li.fb_widget { display: none; } .home_sns .wrap .sns_position .brand-scroll li{ width: 48%; margin-right: 4%; margin-left: 0; float: left; } .home_sns .wrap .sns_position .brand-scroll li:nth-child(2n){ margin-right: 0; } .home_sns .wrap .sns_position .brand-scroll li.fb_bnr{ display: block; } .home_movie-box { height: 120px; } .home_movie ul li { width: 216px; } .home_brand .main-brand li { width: 330px; } .home_brand .other-brand li { width: 206px; } .brand .brand_allbrand li { margin: 0 10px 20px 10px; } .brand .brand_allbrand li:nth-child(6n) { margin-right: 10px; } .brand .brand_allbrand li img { width: 153px; height: auto; } .movie .movie_list li img { width: 100%; height: auto; } div.support .box{ text-align: center; } div.support .box img{ float: none; } div.support .box dl{ width: 100%; float: none; margin: 20px 0 0 0; } div.support .box dd .or_btn{ width: 100%; } div.support .al_c img{ max-width: 100%; height: auto; } } @media screen and (max-width: 810px) { #global-menu .global-menu_logo { height: 25px; margin-left: 15px; } #global-menu { height: 50px; } #global-menu nav ul { width: 100%; } #global-menu nav ul li { display: block; height: 60px; margin-left: 0; } #global-menu nav ul li .table { height: 60px; width: 100%; } #global-menu nav ul li .table a { border-bottom: solid 1px #777; height: 60px; padding-top: 0; color: #FFF; } #global-menu nav ul li .table a.active { border-bottom: solid 1px #777; height: 60px; padding: 0; } #top-head, .inner { width: 100%; padding: 0; } #top-head { top: 0; position: fixed; margin-top: 0; } #top-head.fixed { padding-top: 0; background: transparent; } #mobile-head { background: #2b3138; width: 100%; height: 56px; z-index: 999; position: relative; } #top-head.fixed .logo, #top-head .logo { position: absolute; left: 13px; top: 13px; font-size: 26px; } #global-nav { position: absolute; top: -500px; background: rgba(43, 49, 56, 0.8); width: 100%; text-align: center; padding: 10px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; } #global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; } #global-nav ul li { float: none; position: static; } #top-head { width: 100%; padding: 0; } #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; } .inner { width: 100%; padding: 0; } #top-head { top: 0; position: fixed; margin-top: 0; } #top-head.fixed { padding-top: 0; background: transparent; } #mobile-head { background: #2b3138; width: 100%; height: 56px; z-index: 999; position: relative; } #top-head.fixed .logo, #top-head .logo { position: absolute; left: 13px; top: 13px; font-size: 26px; } #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; } #nav-toggle { display: block; } .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } .open #global-nav { -moz-transform: translateY(556px); -webkit-transform: translateY(556px); transform: translateY(556px); height: 290px; } #home { margin-top: 50px; } .brand_original-home .brand_black-box{ margin-top: 350px; } } @media screen and (max-width: 740px) { div.company .company_list .row_technology .cell, div.company .technology_list .row_technology .cell { float: left; } .wrap { width: 580px; } .home_movie ul li { width: 80%; margin: 0 auto 30px auto; display: block; } .home_movie ul li:last-child { margin: 0 auto; } .home_movie .btn { width: 80%; } .home_brand .main-brand li { width: 270px; } .home_brand .other-brand li { width: 166px; } #footer { height: auto; min-height: 80px; text-align: center; } #footer nav, #footer .copy{ float: none; padding: 5px; } .shoplist .shoplist_area li { width: 24% !important; margin-right: 1%; } .shoplist .shoplist_area li:nth-child(4n) { width: 25% !important; margin-right: 0; } .shoplist .shoplist_area li a { width: 100%; margin-bottom: 10px; display: block; } .shoplist .shoplist_list { font-size: 10px; } .company .technology_list .title .border-none { border: 0; padding: 0 !important; } .company .technology_list .row_technology .cell { display: block; } .company .technology_list .row_technology .cell img { display: block; margin: 0 auto; max-width: 500px; } .product .product-mainimg, .product .product-otherimg { width: 100%; } .brand .brand_allbrand li { margin: 0 !important; padding: 0 5px 10px 5px; width: 33%; box-sizing: border-box; } .brand .brand_allbrand li img { width: 100%; height: auto; } } @media screen and (max-width: 600px) { .noPC { display: block !important; } .wrap { width: 90%; } #home .home-title { height: 150px; } #home .home-title .home-title_img, #home .home-title .home-title_bg { height: 150px; } #home .home-title .home_title { font-size: 20px; height: 86px; } #home .slider-box .txt-box { bottom: 8%; right: 4%; top: auto; margin-top: auto; } #home .slider-box .txt-box h2 { font-size: 30px; } #home .slider-box .txt-box p { font-size: 16px; } #home .slider-box .slider img { /* max-width: 230%; */ max-width: 180%; } .home_news-and-blog .home_news, .home_news-and-blog .home_blog { width: 100%; float: inherit; } .home_news-and-blog .home_news { margin-bottom: 30px; } .home_movie ul li { width: 100%; margin: 0 auto 30px auto; display: block; border-bottom: 1px solid #FFF; padding: 20px 0; } .home_movie ul li:after { content: "."; overflow: hidden; display: block; height: 0; clear: both; } .home_movie ul li .home_movie-box { width: 100px; height: 100px; float: left; margin-right: 20px; overflow: hidden; } .home_movie ul li .home_movie-box img { width: auto; height: 100%; } .home_movie ul li .movie_box { float: left; width: 30%; margin-right: 5%; } .home_movie ul li .movie_box iframe{ height: 100px; } .home_movie ul li .movie_title { width: 65%; float: left; text-align: left; } .home_movie ul li:last-child { margin: 0 auto; } .home_movie .btn { width: 80%; } .home_brand .main-brand, .home_brand .other-brand li img { display: none; } .home_brand .other-brand li{ width: 100%; margin-bottom: 0; margin-right: 0; } .home_brand .other-brand li p { display: inline-block; } .home_brand .other-brand li a { color: #333; padding: 20px; border-bottom: 1px solid #777; display: block; } .home_brand .other-brand li a:before { content: "."; background: #c3032c; width: 10px; height: 10px; border-radius: 10px; display: inline-block; overflow: hidden; margin: 0px 10px 0 0; } #footer .copy { display: block; float: inherit; text-align: center; margin: 0; } #footer .copy .table { display: block; text-align: center; } #footer .copy .table p { display: block; } #footer nav ul { width: 310px; margin: 0 auto; float: inherit; } .company { font-size: 11px; } .company .company_list { display: block; width: 100%; border: 0; padding: 0 !important; } .company .company_list .row { display: block; width: 100%; } .company .company_list .row .cell { display: block !important; width: 100%; border: 0; padding: 5px 10px !important; } .company .company_list .row .cell:first-child { width: 100% !important; display: block !important; background: #eee; border-bottom: 0 !important; } .company .company_list .history_row .history_cell + .history_cell { padding-right: 0 !important; } .company .company_list .row .cell .area-title { font-weight: bold; } .company .company_list .row .cell .area-adress { margin-bottom: 10px; } .company .company_list .row .cell .people { display: table; } .company .company_list .row .cell .people .people_row { display: table-row; } .company .company_list .row .cell .people .people_row .people_cell { display: table-cell; padding-right: 10px; } .movie .movie_list li { width: 100%; margin: 10px 0; } .brand_original-home .brand_logo{ top: 50px; left: 10%; margin-left: 0; } .brand_original-home .brand_logo_right{ top: 50px; right: 10%; margin-right: 0; } .brand_original-home .brand_black-box{ margin-top: 200px; } .brand_original-home .brand_black-box .brand-img li { margin-right: 2%; margin-bottom: 10px; width: 49%; } .brand_original-home .brand_black-box .brand-img li:nth-child(2n) { margin-right: 0; } .brand_original .tech-tire li { margin-bottom: 10px; margin-right: 0; width: 100%; } } @media screen and (max-width: 470px) { #home .home-title { height: 100px; } #home .home-title .home-title_img { height: 100px; right: -100px; } #home .home-title .home-title_bg { height: 100px; } #home .home-title .home_title { font-size: 13px; height: 0px; margin-left: 20px; } #home .slider-box .txt-box { bottom: 2%; /* left: 2%; */ /* right: auto; */ right: 2%; text-align: left; } #home .slider-box .txt-box .br { /* display: block; */ } #home .slider-box .txt-box h2 { /* font-size: 25px; */ font-size: 20px; margin-bottom: 0; } #home .slider-box .txt-box p { /* font-size: 14px; */ font-size: 10px; font-weight: bold; margin-bottom: 0; text-align: right; } .shoplist .shoplist_area li { width: 49% !important; margin-right: 1% !important; } .shoplist .shoplist_area li:nth-child(2n) { width: 50% !important; margin-right: 0 !important; } } .company_header_menu { width: 286px; margin: 0 auto; } .company_header_menu a { color: #ccc; padding: 0 15px; border-right: 2px solid #ccc; } .company_header_menu li { display: inline-block; } .company_header_menu li:first-child { border-left: 2px solid #ccc; } .red { color: #c3032c !important; } .company_recruit-comment { margin: 30px auto; width: 100%; text-align: center; height: 300px; border: 1px solid #eee; padding-top: 146px; } #searchbox select { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-indent: 1em; background:#2a3139 url(../img/home/arw_select_down.jpg) no-repeat; background-size:9px 5px; background-position: 95% center; height: 30px; line-height: 30px; font-size: 15px; vertical-align: middle; border:1px solid #000; margin-bottom:5px; border-radius: 1px; color: #ffffff; font-size: 12px; position: absolute; right: 0px; top: 10px; } @-moz-document url-prefix() { /* for firefox */ #searchbox select { background:none; background-color: #2a3139; } } .pager{ margin-top: 40px; margin-bottom: 20px; text-align:center; } .pager a.prev, .pager a.next{ background-color: #2a3139; color: #fff; } a.page-numbers, .pager .current{ background-color: #edede3; padding:10px 15px; margin:0 1px; color: #2a3139; } .pager .current{ background-color: #c3022c; } .pager a:hover{ background-color: #c3022c; } .brand_original .tech-tire .guerciotti-sns img{ width: initial; } .brand_original .tech-tire .guerciotti-sns img.contact{ width: 87%; float: right; } .brand_original .tech-tire .guerciotti-sns img.fb, .brand_original .tech-tire .guerciotti-sns img.insta{ width: 35%; margin-left: 2%; float: left; } .brand_original .tech-tire .guerciotti-sns{ padding-top: 40px; width: 49%; } .brand_original .tech-tire .guerciotti-sns table{ width: 100%; } @media screen and (max-width: 940px) { .brand_original .tech-tire .guerciotti-sns { padding-top: 20px; } } @media screen and (max-width: 600px) { .brand_original .tech-tire .guerciotti-sns { width: 100%; } .brand_original .tech-tire .guerciotti-sns img.contact{ width: 70%; } .brand_original .tech-tire .guerciotti-sns img.fb, .brand_original .tech-tire .guerciotti-sns img.insta{ width: 28%; } } div.team .box { padding: 0; overflow: hidden; margin-bottom: 10px; } div.team .box .clear{ margin-bottom: 30px; } div.team .box .logobox{ width: 250px; float: left; } div.team .box img { display: block; margin: 0 auto; } div.team .box dl { width: 700px; float: right; margin: 0 10px 0 20px; } div.team .box dt { font-weight: bold; font-size: 160%; padding-bottom: 10px; border-bottom: 1px dotted #636363; } div.team .box dd { padding: 15px 0 0 0; margin-left: 0px; } @media screen and (max-width: 1024px) { div.team .box dl { width: 450px; } } @media screen and (max-width: 940px) { div.team .box { text-align: center; } div.team .box img { float: none; max-width: 100%; height: auto !important; } div.team .box dl { width: 100%; float: none; margin: 20px 0 0 0; } div.team .box .logobox{ width: 100%; } }