@charset "UTF-8"; @media screen and (max-width:768px) { #wrap_wide { position:relative; width:100%; margin:0 auto; } #header { width:100%; margin:0 auto; height:auto; } #header p#logo { left:2%; top:20px; } p#tabletMenu { display:block; position:absolute; top:20px; right:0; cursor:pointer; z-index:10; } #header #scd_menu { width:100%; margin:0 auto; height:auto; display:none; } #top #header ul#gbl_menu { display:none; height:auto; width:auto; padding:0; margin:0; background:#ebebeb; } #top #header ul#com_menu { display:none; position:static; height:auto; width:auto; margin:80px 0 0; background:#ebebeb; width:96%; padding:20px 2% 0; } #top #header ul#com_menu li.srh { float:left; width:80%; margin:0; padding:0; } #top #header ul#com_menu li.stp { float:right; width:20%; margin:0; padding:0; } #top #header ul#com_menu form { width:100%; margin:0; } #top #header ul#com_menu form p.area { width:94%; } #top #header ul#com_menu form p.area input { width:100%; } #top #header ul#com_menu form p.bt_search { width:6%; } #top #header ul#com_menu li.stp a { background:url(../img/link_sitemap_02_tablet.gif) no-repeat right 3px / 75px auto; width:100%; } #top #header ul#gbl_menu { width:96%; padding:15px 2% 10px; position:relative; z-index:99; } #header ul#gbl_menu li { width:32%; margin:0 0 2% 2%; } #header ul#gbl_menu li:nth-child(3n+1) { margin-left:0; } #top #header ul#gbl_menu li.pdc a, #top #header ul#gbl_menu li.pdc a:hover { background:url(../img/g_menu1_tablet.gif) no-repeat left center / 100% auto; } #top #header ul#gbl_menu li.swm a, #top #header ul#gbl_menu li.swm a:hover { background:url(../img/g_menu2_tablet.gif) no-repeat left center / 100% auto; } #top #header ul#gbl_menu li.prf a, #top #header ul#gbl_menu li.prf a:hover { background:url(../img/g_menu3_tablet.gif) no-repeat left center / 100% auto; } #top #header ul#gbl_menu li.rct a, #top #header ul#gbl_menu li.rct a:hover { background:url(../img/g_menu4_tablet.gif) no-repeat left center / 100% auto; } #top #header ul#gbl_menu li.mtl a, #top #header ul#gbl_menu li.mtl a:hover { background:url(../img/g_menu5_tablet.gif) no-repeat left center / 100% auto; } #top #header ul#gbl_menu li.pdc a:hover, #top #header ul#gbl_menu li.swm a:hover, #top #header ul#gbl_menu li.prf a:hover, #top #header ul#gbl_menu li.rct a:hover, #top #header ul#gbl_menu li.mtl a:hover { width:auto; height:auto; } #header ul#gbl_menu li span { display:block; text-indent:-9999px; } #top #header ul#gbl_menu li.pdc a, #top #header ul#gbl_menu li.swm a, #top #header ul#gbl_menu li.prf a, #top #header ul#gbl_menu li.rct a, #top #header ul#gbl_menu li.mtl a { width:auto; height:auto; padding:3% 0; } #wrap_wide #pageTop { width:96%; margin:0 auto; text-align:right; } #wrap_wide #pageTop a img { width:75px; } #wrap_wide #main { width:96%; margin:0 auto; } #wrap_wide #footer { width:96%; margin:0 auto; } #footer #footer_boader { width:100%; margin:0 auto; padding:0 2%; box-sizing:border-box; } #footer #foot_nav { height:auto; border:none; margin:0 auto; } #footer #foot_nav ul { float:none; margin:0; overflow:hidden; height:100%; } #footer #foot_nav ul li { margin-top:2%; padding:0 1.5%; } #footer #foot_nav ul li:first-child { padding-left:2.5%; } #footer #foot_nav ul#un_com_menu { float:none; } #footer #foot_nav ul:before, #footer #foot_nav ul:after { content:" "; display:table; } #footer #foot_nav ul:after { clear:both; } #footer #foot_nav ul#un_com_menu { height:auto; border-top:solid 1px #cccccc; border-bottom:solid 1px #cccccc; width:100%; margin:5px 0 0; padding:0 0 5px; background:none; } #footer #foot_nav ul#un_com_menu li { padding:5px 0 0; margin:0; } #footer p { word-break:break-all; margin:5px 0 0; float:left; width:55%; word-wrap:break-word; } #footer ul#ag_menu { width:252px; } #footer ul#ag_menu li { margin-top:5px; } #footer address { padding-top:5px; clear:both; } /* トップページ */ #wrap_wide #main #contents #topMainContentsSection { width:100%; background-size:cover; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector { width:96%; margin:0 auto; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li { width:30%; margin:0 0 0 1%; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li:first-child { margin-left:0; } #wrap_wide #main #contents #bottomNaviSection ul li { width:33%; margin-right:1%; } #wrap_wide #main #contents #topMainNaviArea .changeTab { width:96%; margin:0 auto; } #wrap_wide #main #contents #topMainNaviArea .changeTab ul li { width:24.25%; margin-left:1%; } #wrap_wide #main #contents #topMainNaviArea .changeTab ul li:nth-child(4n+1) { margin-left:0; } #wrap_wide #main #contents #topMainNaviArea .changeTab ul li a { width:100%; } #wrap_wide #main #contents #topMainNaviArea .changeTab ul li a img { box-sizing:border-box; } /* カテゴリー */ #wrap_wide #sidetitlearea { position:relative; top:0; } #wrap_wide #main #contents #pankuzuSection #sidetitlearea { top:0; height:auto; width:25%; } #wrap_wide #main #contents #pankuzuSection #sidetitlearea img { display:block; } #wrap_wide #side_title_flow { background:none; text-indent:0; width:100%; height:auto; } #wrap_wide #animated-tab { display:none; } #wrap_wide #main #contents #pankuzuSection #pankuzu { width:75%; } #wrap_wide #pankuzu ul#nav .list03 { height:auto; } #wrap_wide #pankuzu ul#nav li.list03 a { height:auto; } #wrap_wide #pankuzu ul#nav { top:0; } #wrap_wide #main #contents .productListSection { width:100%; margin-left:0; } #wrap_wide #main #contents .productListSection ul li { width:24.25%; margin-left:1%; padding:0 0 8px 0; } #wrap_wide #main #contents .productListSection ul li:nth-child(4n+1) { margin-left:0; } #wrap_wide #main #contents .productListSection ul li p.btMovie a img { box-sizing:border-box; width:100%; height:100%; } #wrap_wide #main #contents #listBackBtSection p.btBack { padding-left:0; text-align:center; } #wrap_wide #main #contents #listBackBtSection p.btBack a { margin:0 auto; width:25%; } #wrap_wide #main #contents #listBackBtSection #listBtInner ul { float:none; left:0; text-align:center; } #wrap_wide #main #contents #listBackBtSection #listBtInner ul li { float:none; left:0; display:inline-block; width:25%; margin:0 1%; } #wrap_wide #main #contents #listBackBtSection #listBtInner ul li a img { box-sizing:border-box; } #wrap_wide #pankuzu ul#nav li a.current { font-weight:bold; text-decoration:underline; } #wrap_wide #main .h3TopArea { background:none; } #wrap_wide #main .h3BottomArea { background:none; border:1px solid #cccccc; padding-top:6px; border-radius:5px; } #wrap_wide #main .h3BottomArea h3 { } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 00:ベーススタイル ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ img { width:100%; padding:0; margin:0; } /*------------------------------ 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; } .spFLeft { float:left !important; } .spFRight { float:right !important; } /* 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; } .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; } .w140 { width:auto; } .w150 { width:auto; } .w160 { width:auto; } .w170 { width:auto; } .w180 { width:auto; } .w200 { width:auto; } .w210 { width:auto; } .w240 { width:auto; } .w250 { width:auto; } .w260 { width:auto; } .w270 { width:auto; } .w280 { width:auto; } .w300 { width:auto; } .w310 { width:auto; } .w315 { width:auto; } .w320 { width:auto; } .w325 { width:auto; } .w330 { width:auto; } .w340 { width:auto; } .w350 { width:auto; } .w360 { width:auto; } .w370 { width:auto; } .w380 { width:auto; } .w390 { width:auto; } .w410 { width:auto; } .w440 { 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; } .w48per { width:48% !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; } } @media screen and (max-width:481px) { html { overflow-x:hidden; } p#tabletMenu { display:none; } p#spMenu { display:block; position:absolute; top:15px; right:0; cursor:pointer; z-index:10; width:60px; } #wrap_wide #pageTop a img { width:35%; } p#spFooter { margin:20px auto 0; display:block; width:96%; } #footer #footer_boader { border:none; } #footer #foot_nav { display:none; } #footer p { float:none; width:100%; text-align:center; } #footer ul#ag_menu { width:100%; text-align:center; border-top:solid 1px #cccccc; margin-top:5px; float:none; } #footer ul#ag_menu li { float:none; display:inline-block; } #footer address { text-align:center; border-top:solid 1px #cccccc; margin-top:5px; } /*トップページ*/ #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li { width:98%; margin:10px auto 0; border:solid 2px #e9e9e9; box-sizing:border-box; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li:first-child { margin:0; } #wrap_wide #main #contents #bottomNaviSection { margin-top:20px; } #wrap_wide #main #contents #bottomNaviSection ul li { width:48%; margin:0 1%; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li p { position:relative; width:98%; margin:0 auto; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li span.btnSquare { display:block; position:absolute; top:30%; right:2%; width:10%; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li ul li { width:48%; margin:10px 1%; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li ul li:first-child { margin:10px 1%; } #wrap_wide #main #contents #topMainNaviArea ul#tabSelector li ul li img { border:solid 2px #eaeaea; padding:2px; } #wrap_wide #main #contents #topMainNaviArea h2.mt20 { margin-top:5px !important; } #wrap_wide #main #contents #topMainNaviArea h2 { text-align:left; font-size:100%; padding:2%; } #wrap_wide #main #contents #topMainNaviArea .changeTab { padding:10px 0 0; } /*カテゴリー*/ #wrap_wide #side_title_flow { display:none; } #wrap_wide #main .pankuzu_contents { margin-top:20px; padding-top:0; } #wrap_wide #main .pankuzu_contents h2.ultimode { margin:10px 0; } #wrap_wide #main #contents .productListSection ul { margin-top:10px; } #wrap_wide #main #contents .productListSection ul li { width:49%; margin-top:10px; } #wrap_wide #main #contents .productListSection ul li:nth-child(2n) { margin-left:2%; } #wrap_wide #main #contents .productListSection ul li:nth-child(2n+1) { margin-left:0; } #wrap_wide #main #contents #listBackBtSection p.btBack a { width:70%; } #wrap_wide #main #contents #listBackBtSection #listBtInner ul li { display:block; float:left; width:32%; margin:0 0 0 2%; } #wrap_wide #main #contents #listBackBtSection #listBtInner ul li:first-child { margin-left:0; } #wrap_wide #main #contents #listBackBtSection p.btBack { border-bottom:solid 2px #e5e5e5; } #wrap_wide #main #contents #listBackBtSection #listBtInner { border-bottom:solid 2px #e5e5e5; } #wrap_wide #main #contents #pankuzuSection #pankuzu { width:100%; height:auto !important; padding:10px 5px 10px 5px; } #wrap_wide #main #contents #pankuzuSection #pankuzu ul#nav { position:static; } }