font-size: 19px@charset "UTF-8"; /* CSS Document */ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- トップページ専用 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:100;src:url("../font/nsjpt.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:200;src:url("../font/nsjpl.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:300;src:url("../font/nsjpd.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:400;src:url("../font/nsjpr.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:500;src:url("../font/nsjpm.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:700;src:url("../font/nsjpb.woff")format("woff");} @font-face{font-family:"Noto Sans JP";font-display: auto;font-weight:900;src:url("../font/nsjpbl.woff")format("woff");} #topMainSection { width: 100%; margin: 0 auto; } /* スライダー */ .headerSliderWrapper { position: relative; overflow: hidden; width: 100%; } .caroufredsel_wrapper { min-height: 320px; } .headerSlider { min-height: 320px; } .headerSliderInner { width: 100%; height: 324px; overflow: hidden; } .headerSlider li { float: left; } .headerSlider li a { display: block; } .headerSlider li a img { width: 980px !important; height: 324px !important; } .headerSlider li a:hover img { opacity: 1; } #headerSlider_prev, #headerSlider_next { background-color: black; opacity: 0.6; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; zoom: 1; display: block; height: 321px; width: 50%; top: 1px; position: absolute; } #headerSlider_prev:hover, #headerSlider_next:hover { background: black; opacity:0.5; filter: alpha(opacity=40);/* ie 6 7 */ -ms-filter: "alpha(opacity=40)";/* ie 8 */ zoom:1; } #headerSlider_prev { left: -490px;/* スライドする画像の横半分の値 */ } #headerSlider_next { right: -490px;/* スライドする画像の横半分の値 */ } #headerSlider_prev::before { content: ""; background: url(/common/images/slick_arrow.png) top left; background-size: 100% auto; width: 60px; height: 85px; margin: 120px 20px 0 0; display: block; float: right; } #headerSlider_next::before { content: ""; background: url(/common/images/slick_arrow.png) bottom left; background-size: 100% auto; width: 60px; height: 85px; margin: 120px 0 0 20px; display: block; } .headerSlider_pager { text-align: right; padding:10px; width: 980px; margin: 0 auto; } .headerSlider_pager a { background: #ccc; display: inline-block; width: 8px; height: 12px; margin: 0 10px 0 0; transform: skewX(-20deg); } .headerSlider_pager a:hover { background:#eee ; } .headerSlider_pager a span { display: none; } .headerSlider_pager a.selected { background-color: #ff9320; } #topMainWrap {background-color: #fafafa; padding-bottom: 20px;} /*mainPickupArea*/ #mainPickupArea { width: 100%; margin: 50px 0 0 0; font-family: 'Noto Sans JP'} #mainPickupAreaInner { width: 96%; max-width: 1300px; min-width: 1170px; margin:0 auto;} #mainPickupArea .pickupList {width: 100%;} #mainPickupArea .pickupList img {width: 98%; margin: 1%;} #mainPickupArea .pickupListChild1 {width: 50%; float: left;} #mainPickupArea .pickupListChild2 {width: 50%; float: left;} #mainPickupArea .pickupListChild3 {width: 50%; float: left;} #mainPickupArea .pickupListChild4 {width: 50%; float: left;} #mainPickupArea .pickupListChild5 {width: 50%; margin-left: auto; margin-right: auto;} /*新年用*/ #mainPickupArea .pickupList::after {content: ""; display: block; clear: both;} /*mainFirstArea*/ #mainFirstArea { width: 100%; margin: 50px 0 0 0; font-family: 'Noto Sans JP'} #mainFirstAreaFrame { width: 96%; max-width: 1300px; min-width: 1170px; margin:0 auto; background-color: #ffffff; border-radius: 15px; box-shadow: 4px 4px 16px #D3D3D3;} #mainFirstAreaInner { width: 1170px; margin:0 auto;} #mainFirstArea h1 { border-bottom: 4px solid #46a2c6; font-size: 18px; padding: 15px 0; letter-spacing: 1px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainFirstArea h2 { margin-top: 30px; font-size: 16px; letter-spacing: 1px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainFirstArea .categoryList::after { content: ""; display: block; clear: both; } #mainFirstArea .categoryList { padding-bottom: 40px; font-family: } #mainFirstArea .categoryList li.categoryListChild { width: calc((100% - (15px * 5)) / 6); margin: 0 15px 15px 0; float: left; } #mainFirstArea .categoryList li.categoryListChild:nth-child(6n) { margin-right: 0; } #mainFirstArea .categoryList li.categoryListChild_exc { width: calc((100% - (15px * 5)) / 3); margin: 0 0 0 7px; float: left; } #mainFirstArea .categoryList li a { padding: 0 0 3px 0; overflow: hidden; display: block; text-decoration: none; transition: font-size: 13.5px; color: black; text-align: center; font-weight: 500; } #mainFirstArea .categoryList li a:hover { opacity: 0.6; } #mainFirstArea .categoryList li a img { width: 100%; height: auto; margin: 0 0 1px 0; } #mainFirstArea .supplement { margin-bottom: 20px; color: #c78c00; font-size: 14px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainFirstArea .loupe { padding-bottom: 40px; text-align: center; } #mainFirstArea .loupe li{ width:200px; padding: 0 30px; display: inline-block; } #mainFirstArea .loupe a{ display: block; } #mainFirstArea .loupe img{ width: 200px; } #mainFirstArea .rentalUseFirst { display: inline-block; width: 530px; padding-bottom: 40px; margin-left: 50px;} #mainFirstArea .rentalUseFirst li{ display: inline-block; padding: 10px;} #mainFirstArea .rentalUseSecond { display: inline-block; width: 530px; padding-bottom: 40px; text-align: center;} #mainFirstArea .rentalUseSecond a{ margin-left: 40px;} #mainFirstArea .rentalUseSecond img{ width: 220px;} #mainFirstArea .techSuppo {text-align: center; padding-bottom: 40px;} #mainFirstArea .custSuppo {text-align: center; padding-bottom: 40px;} /*mainSecondArea*/ #mainSecondArea { width: 100%; margin: 50px 0 0 0; font-family: 'Noto Sans JP'} #mainSecondAreaFrame { width: 96%; max-width: 1300px; min-width: 1170px; margin:0 auto; background-color: #ffffff; border-radius: 15px; box-shadow: 4px 4px 16px #D3D3D3;} #mainSecondAreaInner { width: 1170px; margin:0 auto; } #mainSecondArea h1 { border-bottom: 4px solid #46a2c6; font-size: 18px; padding: 15px 0; letter-spacing: 1px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainSecondArea h2 { margin-top: 30px; font-size: 16px; letter-spacing: 1px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainSecondArea .sceneList::after { content: ""; display: block; clear: both; } #mainSecondArea .sceneList { padding-bottom: 40px; font-family: } #mainSecondArea .sceneList li.sceneListChild { width: calc((100% - (15px * 5)) / 6); margin: 0 15px 15px 0; float: left; } #mainSecondArea .sceneList li.sceneListChild:nth-child(6n) { margin-right: 0; } #mainSecondArea .sceneList li a { padding: 0 0 3px 0; overflow: hidden; display: block; text-decoration: none; font-size: 13.5px; color: black; text-align: center; font-weight: 500; } #mainSecondArea .sceneList li a:hover { opacity: 0.6; } #mainSecondArea .sceneList li a img { width: 100%; height: auto; margin: 0 0 1px 0; } #mainSecondArea .supplement { margin-bottom: 20px; color: #c78c00; font-size: 14px; font-family: 'Noto Sans JP'; font-weight: 400; text-align: center; } #mainSecondArea .loupe { padding-bottom: 40px; text-align: center; } #mainSecondArea .loupe li{ width:200px; padding: 0 30px; display: inline-block; } #mainSecondArea .loupe a{ display: block; } #mainSecondArea .loupe img{ width: 200px; } #mainSecondArea .rentalUseFirst { display: inline-block; width: 530px; padding-bottom: 40px; margin-left: 50px;} #mainSecondArea .rentalUseFirst li{ display: inline-block; padding: 10px;} #mainSecondArea .rentalUseSecond { display: inline-block; width: 530px; padding-bottom: 40px;} #mainSecondArea .rentalUseSecond a{ margin-left: 40px;} #mainSecondArea .rentalUseSecond img{ width: 220px;} /*topMainThirdArea*/ #topMainThirdArea { width: 100%; margin: 50px 0 0 0;} #topMainThirdAreaFrame { width: 96%; max-width: 1300px; min-width: 1170px; margin:0 auto; background-color: #ffffff; border-radius: 15px; box-shadow: 4px 4px 16px #D3D3D3; padding: 25px 0 40px 0;} #topMainThirdAreaInnerFrame { background-color: #f7fafd; border: solid #d0d3d8; border-width: 1px 0;} #topMainThirdAreaInner { width: 1170px; margin:0 auto; padding: 15px 0;} #topTabTopicsBox { clear:both; width: 100%; font-family: 'Noto Sans JP'; margin: 0 auto; box-sizing: border-box; } #topTabTopicsBox h1.topTabTopicsTitle {font-size: 19px;padding-left: 5px;font-weight: 300;letter-spacing: 2px;float: left;} #tabMenuZone { width: auto; float: right; } #tabMenuLine { width: 100%; padding-bottom: 15px; display: inline-block; border-bottom: 1px dotted #bdbdbd; float: right; } #topTabTopicsBox li { float:left; position: relative; } #topTabTopicsBox li:not(:last-child)::after { content: ""; height: 20px; width: 1px; position: absolute; display: block; background: #bdbdbd; right: 0; top: calc(50% - 10px); } #topTabTopicsBox li a { display:block; margin: 0 20px; overflow: hidden; text-align:center; text-decoration: none; color: #333333; font-size: 15px} #topTabTopicsBox li:last-child a { margin: 0 10px 0 20px; } #topTabTopicsBox li a:hover { color: #0098d6; } #topTabTopicsBox .tabListContent { clear:both; } #topTabTopicsBox #topTabNews { display:none; } #topTabTopicsBox #topTabManual { display:none; } #topTabTopicsBox #topTabAuto { display:none; } #topTabTopicsBox dl { font-size:93%; width: 100%; } #topTabTopicsBox dt { float:left; clear:left; margin:15px 0 0 15px; width:90px; } #topTabTopicsBox dd {border-bottom: 1px dotted #bdbdbd;padding: 15px 0 15px 100px;} #topTabTopicsBox #topTabAll dt {width: 217px;letter-spacing: 1px;font-size: 13px;} #topTabTopicsBox #topTabAll dd { padding-left: 200px; font-size: 14px; } #topTabTopicsBox #topTabNews dt {letter-spacing: 1px; font-size: 13px;} #topTabTopicsBox #topTabManual dt {letter-spacing: 1px; font-size: 13px;} #topTabTopicsBox #topTabAuto dt {letter-spacing: 1px; font-size: 13px;} #topTabTopicsBox dt img { padding-left:13px; vertical-align: sub; } #topTabTopicsBox .tabListContent dl dd a { border-bottom: 1px solid black; text-decoration: none; color: #222222; } #topTabTopicsBox .tabListContent dl dd a:hover { border-bottom: 1px solid #0098d6; color: #0098d6; } #topTabTopicsBox .tabListContent dl dd a span { font-weight:bold; } #topTabTopicsBox .tabListContent dl dd > span { background:url(/common/images/mark_news.png) no-repeat left 0.35em;padding-left:18px;display:block; font-size: 14px; margin-left: 16px;} #topTabTopicsBox .tabListContent dl dd span.pdfData { background:url(/common/images/icon_pdf.gif) no-repeat left top; margin-left:0; padding-left:1.8em; } #topTabTopicsBox .tabListContent dl dd span.wordData { background:url(/common/images/icon_word.gif) no-repeat left top; margin-left:0; padding-left:1.8em; } #topTabTopicsBox .tabListContent dl dd span.excelData { background:url(/common/images/icon_excel.gif) no-repeat left top; margin-left:0; padding-left:1.8em; } #topTabTopicsBox .tabListContent dl dd span.noMarking { background:none; text-indent: -7px; } #topTabTopicsBox .jumpToList { padding-top: 10px; text-align: right; } /*topMainFivedArea*/ #topMainFivedArea { width: 1170px; margin:0 auto;} #topMainFivedArea #mainFirstMessage { background: url(/common/images/common_title_mark.gif) no-repeat left bottom -3px; margin-bottom: 8px; border-bottom: 3px solid #46a2c6; } #topMainFivedArea #mainFirstMessage h1 { font-size: 18px; margin: 3px 0 0 0; padding: 0 5px 8px 14px; letter-spacing: 1px; font-family: 'Noto Sans JP'; font-weight: 400; } #topMainFivedArea .bannerList {margin: 15px 0 0 0;overflow: hidden;display: flex;flex-wrap: wrap;justify-content: center;} #topMainFivedArea .bannerList li { width: 230px; } #topMainFivedArea .bannerList li + li { margin-left: 30px; } #topMainFivedArea .bannerList li a { margin-top: 5px; font-size: 12.5px; display: block; text-decoration: none; font-family: 'Noto Sans JP'; } #topMainFivedArea .bannerList li a span { margin-top: 5px; display: block; text-align: justify; } /*productHistory*/ #topHistoryBox {clear:both;margin: 0px auto 30px auto;width: 1170px;} #topHistoryBox .recent_views { position: relative; padding-bottom: 30px; } #topHistoryBox .recent_views ul { overflow: visible; height: auto; } #topHistoryBox .recent_views ul .slick-list { overflow: hidden; max-height: 190px; } #topHistoryBox .recent_views ul .slick-list.on-Arrow { padding: 0 20px 0 18px; } #topHistoryBox .recent_views ul li { line-height: 1.3; float: left; } #topHistoryBox .recent_views ul li .recentInner { margin: 0 5px 0 5px; } #topHistoryBox .recent_views ul li strong { display: block; position: relative; overflow: hidden; } #topHistoryBox .recent_views ul .slick-next, #topHistoryBox .recent_views ul .slick-prev { background: #eeeeee; height: 100%; } #topHistoryBox .recent_views ul .slick-next:hover, #topHistoryBox .recent_views ul .slick-prev:hover { background: #0083d5; height: 100%; } #topHistoryBox .recent_views ul .slick-next { right: 0; top: 0; } #topHistoryBox .recent_views ul .slick-prev { left: 0; top: 0; } #topHistoryBox .recent_views ul li a { text-decoration: none; font-size: 12px; word-break: break-all; } #topHistoryBox .recent_views ul li a::before { display: none; } #topHistoryBox .recent_views ul li a span { margin-bottom: 3px; padding: 4px 2px 2px 2px; color: #0083d5; display: block; text-align: center; } #topHistoryBox .recent_views ul li img { width: 100%; height: auto; display: block; } #topHistoryBox .recent_views ul li a:hover img { opacity: 0.6; } #topHistoryBox .recent_views ul li a:hover span { opacity: 0.6; } #topHistoryBox .recent_views .lSSlideWrapper { overflow: visible; position: static; padding-bottom: 15px; } #topHistoryBox .recent_views .lSSlideOuter { height: auto; } #topHistoryBox .recent_views .lSAction { position: absolute; width: 100%; height: 0; top: 70px; left: 0; } #topHistoryBox .recent_views .lSAction a { border: 1px solid #dddddd; border-radius: 50%; opacity: 1; } #topHistoryBox .recent_views .lSAction a.lSPrev { left: 0; } #topHistoryBox .recent_views .lSAction a.lSNext { right: 0; } #importantInfo { padding: 15px 0 10px 0; } #importantInfo .importantInfoInner { background: white; border: 1px solid #ff9320; box-sizing: border-box; padding: 15px 15px 11px 15px; font-family: 'Noto Sans JP'; } #importantInfo .importantInfoInner .title { margin: 0 0 10px 0; color: #ff9320; font-size: 18px; font-weight: bold; } #importantInfo .importantInfoInner .title::before { content: ""; width: 27px; height: 27px; background: url(/common/images/icon_info.svg) no-repeat top left; background-size: 100% auto; display: inline-block; vertical-align: middle; margin: -3px 5px 0 0; } #importantInfo .importantInfoInner .txt { } #importantInfo .importantInfoInner .txt + .txt { margin-top: 5px; } /* 検索領域 */ .topSearchArea { font-family: "Noto Sans JP"; font-weight: 500; padding-top: 40px} .topSearchArea form {margin: 0 auto;width: 980px; position: relative; white-space: nowrap; } .topSearchArea #searchWordBox {font-size: 14px;text-indent: 24px;background: url(/common/images/icon_search_gray.svg) left 8px top 5px no-repeat;background-size: 13px 18px;width: 913px;height: 30px;padding: 0px 10px 2px 10px;border-radius: 2px 0 0 2px;vertical-align: top;padding-left: 5px;color: #222222;box-sizing: border-box;display: inline-block;border: 1px solid #a9a9a9; border-radius:30px; margin-top: 10px;} .topSearchArea #searchWordBox::placeholder { color: #b7b7b7; } .topSearchArea #searchWordBtn img { width: 50px; } .topSearchArea .SearchAreaTxt { text-align: center; font-size: 15px; margin: 0 0 5px 0; } .topSearchArea button { position: relative; margin-left: 3px; line-height: 1px; } .topSearchArea button:hover { opacity: 0.5;} /* フッター */ #footerSection #footerLinkArea { width: 1170px; margin:0 auto;margin:0 auto;} #footerInfoSection #footerWordArea { width: 1170px; margin:0 auto;} #topMainWrap + #footerWrap #footerSection .footerLinkInner #footerLogoArea { width: 270px; padding-top: 41px; display: block; text-align: center; } #topMainWrap + #footerWrap #footerSection .footerLinkInner #footerLogoArea a:hover { opacity: 0.6; } @media screen and (max-width:1470px){ #headerWrap #headerSide ul li.tel { width: 205px; } #headerWrap #headerSide ul li.headerSideSearch { margin-left: 15px; } #headerWrap #headerSide ul li.headerSideSearch #searchWordHeaderSide { width: 230px; } #headerWrap #headerSide ul li.inquiryBtn a { width: 240px; text-align: center; padding: 0 0 0 10px; } #headerWrap #headerSide ul li.inquiryBtn a span { display: block; line-height: 1.3; padding: 6px 0 5px 25px; } #headerWrap #headerSide ul li.inquiryBtn a br { display: block !important; } #headerWrap #headerFixed .headerFixedInner { padding: 0 20px; } } @media screen and (max-width:1190px) { #headerWrap #headerSide ul li.headerSideSearch { display: none; } } @media screen and (max-width:640px){ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 00:ベーススタイル ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ img { width:100%; } a:hover img { opacity:1; filter:alpha(opacity=100); } /*------------------------------ text -------------------------------*/ .spTxtCenter { text-align:center !important; } .spTxtLeft { text-align:left !important; } .spF10 { font-size:77%; } .spF11 { font-size:85%; } .spF12 { font-size:93%; } .spF13 { font-size:100%; } .spF14 { font-size:108%; } .spF15 { font-size:116%; } .spF16 { font-size:124%; } .spF17 { font-size:131%; } .spF18 { font-size:139%; } .spF19 { font-size:147%; } .spF20 { font-size:154%; } /*------------------------------ float -------------------------------*/ .fLeft { float:none; } .fRight { float:none; } /* clearfix */ .spCf:before, .spCf:after { display:table; content:""; } .spCf:after { clear:both; } .spCf { zoom:1; overflow:hidden; } .spCb { clear:both; } /*------------------------------ margin -------------------------------*/ .spMt0 { margin-top:0 !important; } .spMt5 { margin-top:5px !important; } .spMt10 { margin-top:10px !important; } .spMt15 { margin-top:15px !important; } .spMt20 { margin-top:20px !important; } .spMt25 { margin-top:25px !important; } .spMt30 { margin-top:30px !important; } .spMl0 { margin-left:0 !important; } .spMl1per { margin-left:1% !important; } .spMl5 { margin-left:5px !important; } .spMl10 { margin-left:10px !important; } .spMl15 { margin-left:15px !important; } .spMl20 { margin-left:20px !important; } .spMl25 { margin-left:25px !important; } .spMl30 { margin-left:30px !important; } .spMr0 { margin-right:0 !important; } .spMr5 { margin-right:5px !important; } .spMr10 { margin-right:10px !important; } .spMr15 { margin-right:15px !important; } .spMr20 { margin-right:20px !important; } .spMr25 { margin-right:25px !important; } .spMr30 { margin-right:30px !important; } .spMb0 { margin-bottom:0 !important; } .spMb5 { margin-bottom:5px !important; } .spMb10 { margin-bottom:10px !important; } .spMb15 { margin-bottom:15px !important; } .spMb20 { margin-bottom:20px !important; } .spMb25 { margin-bottom:25px !important; } .spMb30 { margin-bottom:30px !important; } /*------------------------------ width -------------------------------*/ .w50 { width:auto; } .w60 { width:auto; } .w80 { width:auto; } .w90 { width:auto; } .w100 { width:auto; } .w120 { width:auto; } .w150 { width:auto; } .w160 { width:auto; } .w170 { width:auto; } .w180 { width:auto; } .w200 { width:auto; } .w240 { width:auto; } .w250 { width:auto; } .w260 { width:auto; } .w280 { width:auto; } .w300 { width:auto; } .w310 { width:auto; } .w320 { width:auto; } .w330 { width:auto; } .w340 { width:auto; } .w350 { width:auto; } .w360 { width:auto; } .w410 { width:auto; } .w444 { width:auto; } .w500 { width:auto; } .w510 { width:auto; } .w520 { width:auto; } .w530 { width:auto; } .w550 { width:auto; } .w560 { width:auto; } .w570 { width:auto; } .w580 { width:auto; } .w590 { width:auto; } .w600 { width:auto; } .w630 { width:auto; } .wAuto { width:auto !important; } .w5per { width:5% !important; } .w10per { width:10% !important; } .w15per { width:15% !important; } .w20per { width:20% !important; } .w25per { width:25% !important; } .w30per { width:30% !important; } .w35per { width:35% !important; } .w40per { width:40% !important; } .w45per { width:45% !important; } .w50per { width:50% !important; } .w55per { width:55% !important; } .w60per { width:60% !important; } .w65per { width:65% !important; } .w70per { width:70% !important; } .w75per { width:75% !important; } .w80per { width:80% !important; } .w85per { width:85% !important; } .w90per { width:90% !important; } .w95per { width:95% !important; } .w100per { width:100% !important; } /*display*/ .displayNone { display:block; } .spDisplayNone { display:none; } .displayBr { display:inline; } .spOuter { margin:10px 2% 0 !important; width:96% !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- フレーム ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------ ヘッダー -------------------------------*/ #headerWrap { width:100%; height: auto; min-width:100% !important; position: static; top: auto; background: none; border-bottom: none; } #headerWrap p { width: 100%; padding: 0 0 0 0; font-size: 90%; line-height: 1.6; } #headerWrap div.sublink { display: none; } #headerWrap #headerFixed .headerFixedInner { width: 100%; } #headerWrap #searchWordBtn { background: #2f75d4; display: block; width:96%; height:32px; margin: 10px auto 0 auto; border-radius: 3px; } #headerWrap #searchWordBtn img { width: 95px; height: 32px; } #headerSearch #searchbox { width: 96%; margin: 0 auto; height: 32px; } #headerSection, #headerWrap #headerFormSection { width:100%; min-width: auto; margin: 0px auto; } #headerLogoArea { position:relative; padding: 2px 0 0 0; left: -5px; width: 100%;} #headerLogoArea > a { margin: 0px 5px 0 0; display: inline-block; } #headerLogoArea img { width: 211px; height: 41px; } #headerLogoArea h1 img { width:auto; } #headerLogoArea p { background:url(/common/images/head_subtitle_bg.jpg) repeat-x; font-size:85%; width:96%; margin:0 auto; } #headerLogoArea h1 { margin:5px 2%; } #headerLogoArea a svg { width: 140px; height: 32px; } #headerWrap #headerSection #spAppear { position: relative; display:none; background:#f3f3f3; z-index: 9999;} #headerWrap p#spMenu { background: #2f8fb6; width: 40px; height: 40px; padding: 0 0 0 0; display: block; position: absolute; top: -5px; right: 0; } #headerWrap p#spMenu span { background: #d3e7f0; width: 30px; height: 2px; display: block; position: absolute; top: 19px; left: 5px; text-indent: 101%; overflow: hidden; color: rgba(0,0,0,0); } #headerWrap p#spMenu:before, #headerWrap p#spMenu:after { background: #d3e7f0; width: 30px; height: 2px; display: block; position: absolute; content: ""; left: 5px; } #headerWrap p#spMenu:before { top: 9px; } #headerWrap p#spMenu:after { top: 29px; } #headerSearch { text-align:center; position:static; margin:0; padding:12px 0 15px 0; background: #f3f3f3; border-top:solid 1px #b7b7b7; border-bottom:solid 1px #b7b7b7; display: block; } #headerSearch button span { font-size: 15px; padding-top: 1px; } #headerSearch button span:before { left: 50%; margin-left: -30px; margin-top: -9px; width: 13px; height: 17px; } #headerGnaviArea { padding-top: 0; } #headerGnaviArea ul { width:100%; font-size:124%; } #headerGnaviArea li { height:auto; border-bottom:solid 1px #b7b7b7; float:none; } #headerGnaviArea li.headGnavi01 a, #headerGnaviArea li.headGnavi02 a, #headerGnaviArea li.headGnavi03 a, #headerGnaviArea li.headGnavi04 a, #headerGnaviArea li.headGnavi05 a, #headerGnaviArea li.headGnavi06 a { background:url(/common/images/mark_pc.png) no-repeat 96% center; width:auto; } #headerGnaviArea li.headGnavi05 a:hover span.first::after { background: url(/common/images/icon_first.png) top left no-repeat; background-size: 100% auto; } #headerGnaviArea a { padding: 5px 1em; text-align:left; text-decoration: none; text-indent: 0; width:100%; line-height:2; } #headerGnaviArea a:hover { color: black; } #headerGnaviArea a::after { display: none; } #headerGnaviArea li.now { background:#ecf5ff; } #searchBtn { vertical-align:bottom; } #mainWrap { margin-bottom:0px; padding-top: 0; } #headerWrap .headerMain { width: 100%; } #headerWrap #headerSide { width: 100%; } #headerWrap #headerSide { margin-bottom: 10px; padding: 0 0; position: static; overflow: hidden; } #headerWrap #headerSide ul li.tel { width: 45%; min-width: 165px; } #headerWrap #headerSide ul li.tel p a.num { font-size: 17px; margin: 0 0 0 0; letter-spacing: 0.5px; line-height: 1.2; } #headerWrap #headerSide ul li.tel p a.num:before { width: 21px; height: 14px; margin-right: 2px; } #headerWrap #headerSide ul li.tel p span.telMainTxt { margin: 0 0 0 0; padding: 0 0 0 0; letter-spacing: 0.2px; } #headerWrap #headerSide ul li.tel p span.telSubTxt { margin: 0 0 0 0; padding: 0 0 0 0; font-size: 10px; } #headerWrap #headerSide ul li.tel p span.telSubTxt span { letter-spacing: 0;} #headerWrap #headerSide ul li.inquiryBtn { width: 53%; float: right; } #headerWrap #headerSide ul li.inquiryBtn a { width: 100%; height: auto; line-height: 20px; margin-top: 0; padding: 5px 0; } #headerWrap #headerSide ul li.inquiryBtn a br { display: block; } #headerWrap #headerSide ul li.inquiryBtn strong { display: inline-block; letter-spacing: 0; margin-bottom: 6px; } #headerWrap #headerSide ul li.inquiryBtn a span { font-size: 12px; background: none; padding: 0 0 0 0; } #headerWrap #headerSide ul li.inquiryBtn a:hover::before { width: 120%; transform-origin: left top; transform: skewX(-30deg) scale(0, 1); } #headerWrap #headerSide ul li.inquiryBtn a:hover span { font-weight: normal; background: none; } #headerWrap #headerFixed .headerFixedInner { width: 100%; min-width: auto; padding: 0 10px; } @media screen and (max-width:420px){ #headerWrap #headerSide ul li.inquiryBtn a { padding: 8px 0; } #headerWrap #headerSide ul li.inquiryBtn a span strong { font-size: 14px; margin-bottom: 3px; } } @media screen and (max-width:330px){ #headerWrap #headerSide ul li.inquiryBtn { float: right; width: 45%; } #headerWrap #headerSide ul li.inquiryBtn a span strong { font-size: 12px; letter-spacing: -0.4px; white-space: nowrap; } } /*------------------------------ 検索領域 -------------------------------*/ .topSearchArea{ padding-top: 20px; } .topSearchArea form{ width: 96%; } .topSearchArea #searchWordBox{ width: 82%; font-size: 12px; } /*------------------------------ ピックアップ -------------------------------*/ #mainPickupArea{ margin: 40px 0 0 0; } #mainPickupAreaInner { width: 96%; min-width: auto; margin: 0 auto; } #mainPickupArea .pickupList { height: auto; } #mainPickupArea .pickupListChild1 { height: auto; } #mainPickupArea .pickupListChild2 { height: auto; } #mainPickupArea .pickupListChild3 { height: auto; } #mainPickupArea .pickupListChild4 { height: auto; } /*------------------------------ 測量機・測定器・計測器 レンタル商品を探す -------------------------------*/ #mainFirstAreaFrame { width: 100%; min-width: auto; } #mainFirstAreaInner { width: 96%; min-width: auto; margin: 0 auto; } #mainFirstArea .categoryList li.categoryListChild { width: calc((100% - (10px * 2)) / 2); margin: 0 5px; float: left; } #mainFirstArea .categoryList li.categoryListChild_exc { width: calc((100% - (10px * 2)) / 1); margin: 0 9px; float: left; } #mainFirstArea .categoryList li a { font-size: 12px; line-height: 1.3; } #mainFirstArea .categoryList li a:hover { color: black; background: none; } #mainFirstArea .categoryList li a span { display: block; min-height: 30px; max-height: 30px; } #mainFirstArea .loupe li{ width: 22%; padding: 0; margin: 1%; } #mainFirstArea .loupe img{ width: 100%; } #mainFirstArea .rentalUseFirst { width: 100%; margin: 0 auto;; } #mainFirstArea .rentalUseSecond { width: 100%; text-align: center; } #mainFirstArea .rentalUseSecond a { padding: 0; margin: 2%; } #mainFirstArea .rentalUseSecond img { width: 45%; } /*------------------------------ 自動計測システム レンタル商品を探す -------------------------------*/ #mainSecondAreaFrame { width: 100%; min-width: auto; } #mainSecondAreaInner { width: 96%; min-width: auto; margin: 0 auto; } #mainSecondArea .sceneList li.sceneListChild { width: calc((100% - (10px * 2)) / 2); margin: 0 5px; float: left; } #mainSecondArea .sceneList li a { font-size: 12px; line-height: 1.3; } #mainSecondArea .sceneList li a:hover { color: black; background: none; } #mainSecondArea .sceneList li a span { display: block; min-height: 30px; max-height: 30px; } #mainSecondArea .loupe li{ width: 22%; padding: 0; margin: 1%; } #mainSecondArea .loupe img{ width: 100%; } #mainSecondArea .rentalUseFirst { width: 100%; margin: 0 auto;; } #mainSecondArea .rentalUseSecond { width: 100%; text-align: center; } #mainSecondArea .rentalUseSecond a { padding: 0; margin: 2%; } #mainSecondArea .rentalUseSecond img { width: 45%; } /*------------------------------ 新着情報 -------------------------------*/ #tabMenuLine { text-align: center; } #topMainThirdAreaFrame { width: 100%; min-width: auto; } #topMainThirdAreaInner { width: 100%; min-width: auto; } #topTabTopicsBox li a { margin: 0 0 0 0; } #topTabTopicsBox li:nth-child(2n) a, #topTabTopicsBox li:last-child a { margin: 0 0 0 0; } #topTabTopicsBox h1.topTabTopicsTitle { height: 28px; border-bottom: 3px solid #0083d5; font-size: 19px; letter-spacing: 2px; font-weight: 400; font-family: 'Noto Sans JP'; margin: 0 auto; padding: 0 7px 0 7px; display: inline-block; text-align: center; float: none; } #topTabTopicsBox { float:none; margin:15px auto 0; width:96%; } #tabMenuLine { border-bottom:none; float:none; background:url(/common/images/ten_line_bottom.png) repeat-x left bottom; padding-bottom:20px; } #topTabTopicsBox ul { float:none; margin-top:10px; } #topTabTopicsBox li { width:48%; margin:5px 0 0 1.25%; } #topTabTopicsBox #tabMenuZone a { width:auto; height:auto; text-indent:0; text-align:center; margin-left:0; padding:5px; font-size:93%; text-decoration:none; font-weight:bold; } #topTabTopicsBox #tabMenuZone .tabMenu01 a { background:none; } #topTabTopicsBox #tabMenuZone .tabMenu02 a { background:none; } #topTabTopicsBox #tabMenuZone .tabMenu03 a { background:none; } #topTabTopicsBox #tabMenuZone .tabMenu04 a { background:none; } #topTabTopicsBox dl { width:100%; } #topTabTopicsBox dt { margin: 10px 0 0 5px; float:none; clear:none; } #topTabTopicsBox dd { height:auto; padding:8px 0; width:auto; margin:0; } #topTabTopicsBox .tabListContent dl dd > span { margin-left: 5px; padding-left: 10px; font-size: 13px; } #topTabTopicsBox #tabMenuZone a { border:1px solid #cccccc; } #topTabTopicsBox #tabMenuZone .tabOn a { background:url(/images/tab_background.gif); border:solid 1px #91c1d5; } #topTabTopicsBox #topTabAll dt { width:100%; } #topTabTopicsBox #topTabAll dd { padding: 5px 0 13px 0; width:auto; } #topTabTopicsBox dd a { margin-left:1%; } #topTabTopicsBox .tabListContent dl dd a { font-size: 13px; } #topTabTopicsBox .tabListContent { margin-top:10px; } #topTabTopicsBox dt img { width:auto !important; padding-left: 10px; } /*------------------------------ バナー -------------------------------*/ #mainBannerAreaInner { width: 96%; min-width: auto; margin: 0 auto;; } /*------------------------------ お役立ち情報 -------------------------------*/ #topMainFivedArea { width: 100%; min-width: auto; padding: 0 2%; box-sizing: border-box; } #topMainFivedArea .bannerList { display: block; flex-wrap: nowrap; justify-content: normal; } #topMainFivedArea .bannerList li { width: calc((100% - (15px * 2)) / 3); margin: 0 15px 5px 0; float: left; } #topMainFivedArea .bannerList li + li { margin: 0 15px 5px 0; } #topMainFivedArea .bannerList li:last-child { margin-right: 0; } #topMainFivedArea .bannerList li a span { font-size: 12px; line-height: 1.5; } @media screen and (max-width:580px){ #topMainFivedArea .bannerList li { width: 100%; margin: 0 15px 5px 0; } #topMainFivedArea .bannerList li a { width: 100%; overflow: hidden; } #topMainFivedArea .bannerList li a picture { width: 30%; display: block; float: left; } #topMainFivedArea .bannerList li a span { width: calc(70% - 8px); margin: 0 0 0 5px; display: block; float: left; line-height: 1.4; } } /* スライダー */ .headerSliderWrapper { position: relative; } .headerSlider li a img { width: 100% !important; height: auto !important; } .caroufredsel_wrapper { min-height: auto; } .headerSliderInner { height: auto; } .headerSlider { min-height: auto; } .headerSlider_pager { width: 100%; box-sizing: border-box; } #headerSlider_next, #headerSlider_prev { display: none; } /*------------------------------ フッター -------------------------------*/ #footerWrap #footerJumpSection { width:100%; margin:0 auto; } #footerWrap #footerJumpSection p { display:none; float:none; } #footerSection #footerLinkArea { width:100%; padding:0; } #footerWrap #footerSection { display:none; } #footerWrap #footerInfoSection { padding:0; } #footerWrap #footerJumpSection ul { padding:0; margin-top:15px; } #footerLinkArea ul li { font-size:108%; background:none; width:100%; margin:0; padding:0; } #footerLinkArea ul li.iconWin { font-size:108%; background:none; width:100%; margin:0; padding:0; } #footerLinkArea ul li a { display:block; text-decoration:none; padding:7px 8%; text-align:left; background:url(/common/images/mark_pc.png) no-repeat 96% center; border-bottom:solid 1px #e3e3e3; } #footerLinkArea ul li.iconWin a { display:block; text-decoration:none; padding:7px 8%; text-align:left; background:url(/common/images/icon_linkjump.gif) no-repeat 97% center; border-bottom:solid 1px #e3e3e3; } #footerSection .footerLinkInner { float:none; margin:0 2%; border-left:none; padding:0; } #footerSection .footerLinkInner h3 { margin:0; text-align:left; border-bottom:solid 1px #e3e3e3; font-size:116%; padding:7px 3%; background:url(/common/images/mark_pc.png) no-repeat 96% center; list-style:none; } #footerWrap #spFooter { margin-top:30px; background:#e0e0e0; padding:0.6em; display: none;} #footerWrap #spFooter ul { float:left; margin:0; } #footerWrap #spFooter ul li { font-size:93%; } #footerWrap #spFooter p { display:block; float:right; width:2.5em; padding:0; } #footerWrap { width:100%; min-width:100%; position:relative; } #footerWrap p#footerPageTopSection { display:block; position:fixed; bottom:2em; right:0.6em; width:50px; height:50px; z-index: 10000; } #footerWrap p#footerPageTopSection.pos_abs { position:absolute; top:-60px; } #footerInfoSection #footerWordArea { width:100%; } #footerInfoSection ul, #footerInfoSection #formFooterCopy { float:none; text-align:center; } #footerCopyrightSection address, #footerLinkArea ul.firstLinkBox, #footerLinkArea ul.secondLinkBox { float:none; margin:0; } #footerSection .footerLinkInner strong { margin-top: 10px; } #footerLinkArea #footerThemeLinkInner ul { border-top:none; padding:0 2%; } #footerLinkArea #footerThemeLinkInner ul strong { display: block; margin: 15px 0 5px 0; font-size: 15px; } #footerLinkArea #footerThemeLinkInner ul li { font-size:116%;} #footerLinkArea #footerThemeLinkInner ul li:first-child{border-top:1px solid #e3e3e3} #footerLinkArea #footerThemeLinkInner ul li a { padding-left:3%;} #footerLinkArea .footerLinkInner .deleteMark { display:none; } #footerSection #footerGroupNav { display: none; } #topMainWrap + #footerWrap #footerSection .footerLinkInner #footerLogoArea { width: 100%; padding-top: 30px; padding-bottom: 25px; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 01:トップページ ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #mainSection { width:100%; margin:0 auto; } #mainSection #mainFrontCenterBox { width:96%; margin:0 auto; } #mainSection #mainFrontCenterBox.mainFrontCenterBoxWidthMax { width: 100%; } /*productHistory*/ #topHistoryBox { float: none; margin: 15px auto 0; width: 96%;} #topHistoryBox .recent_views { padding: 0 0 30px 0; } #topHistoryBox .recent_views ul { padding: 0 25px; } #topHistoryBox .recent_views ul li strong { height: auto; } #topHistoryBox .recent_views ul li .recentInner { margin: 0 5px 0 5px; } #topHistoryBox .recent_views ul .slick-list { max-height: 100%; } #topHistoryBox .recent_views ul .slick-list.on-Arrow { padding: 0 0 0 0; } #topHistoryBox .recent_views .slick-slider .slick-prev, #topHistoryBox .recent_views .slick-slider .slick-next { width: 20px; } .textMargin { margin:15px 2%; } .slick-slider:not(.bannerSlider) { height: auto; } .slick-slider:not(.bannerSlider).slick-initialized { height: auto;} .slick-slider .slick-prev,.slick-slider .slick-next { top: 50%; width: 25px; } .slick-slider .slick-next { right: 0; } .slick-slider .slick-prev { left: 0; } .slick-slider .slick-next:before { right: 4px; } .slick-slider .slick-prev:before { left: 4px; } .slick-slider .slick-prev:hover, .slick-slider .slick-next:hover { background: rgba(47, 142, 181, 0.5); } .slick-prev:before { border-width: 10px 10px 10px 0; } .slick-next:before { border-width: 10px 0 10px 10px; } .slick-dots { text-align: center; -moz-box-sizing: border-box; -webkir-box-sizing: border-box; box-sizing: border-box; position: relative !important; right: auto !important; bottom: auto !important; width: 100% !important; padding: 10px 0 0 0; text-align: center; -moz-box-sizing: border-box; -webkir-box-sizing: border-box; box-sizing: border-box; } .slick-dots li:hover:before { display: none; } /* .topSearchArea { margin: 20px 0; padding: 0 10px; } .topSearchArea .SarchAreaMain { width: 100%; } .topSearchArea #searchbox { width: 100%; margin-bottom: 5px; } .topSearchArea button { width: 100%; margin-left: 0; } */ }