:root { font-size:16px; } body { margin: 0px; color:#333333; background-color:#FFFFFF; font-family:Verdana,Roboto,"Droid Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; } body,td { text-decoration:none; } a img { border:none; } div.title-logo div { font-size:0.6em; text-align:center; color:#ccc; } div#title_company h2 { font-size:1em; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html { overflow-y:scroll; } img { max-width:100%; height:auto; border: 0; } .img-responsive { display:block; width:100%; height:auto; } .grid { float:left; display:block; width:100%; margin:0; padding:0; } .grid:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow: hidden; } .grid > .col { width:100%; } .flexbox { display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; flex-wrap:wrap; -webkit-flex-wrap:wrap; } ul.flexbox { list-style:none; margin:0; padding:0; } .flexbox img { vertical-align: middle; } #sm-nav-btn { position:absolute; top:0; right:5px; display:none; z-index:9999999; } .mainbody { width:100%; overflow:hidden; } .maintablebox { margin:0px; padding:0px; } .maintablebox2 { margin:0 auto; padding-left:0px; padding-right:0px; padding-top:20px; background-image: url(/userimage/1_1_3.gif); } div#header_box { width:100%; } div#top_baner1_box { width:100%; } div#top_main_img_box { width:100%; } div#top_baner2_box { width:100%; } div#top_baner3_box { width:100%; } div#foot_baner_box { width:100%; } div.maintablebox2_outerbox { width:100%; } div.footbackground { background-color:#000000; } div.footbackground name > span { display:inline-block; } div.menut{ clear: left; width:; text-align:left; vertical-align:text-top; } div.navi_new { width:250px; float:left; } div.document_new { text-align:left; } div.document_new_r { margin-left:-250px; float:right; width:100%; } div.document_new_r_contents { margin-left:260px; } .menubt ul { margin:0px; padding:0px; list-style:none; } .menubt ul li { padding:0px; list-style:none; } .menubt a { margin:0px; padding:5px; display:block; width:; height:2.2em; overflow:hidden; font-size:0.9em; font-weight:bold; color:#B0B0B0; background-color:#000000; text-decoration:none; text-align:center; border:solid 1px #FFFFFF; } .menubt a:link { margin:0px; padding:5px; display:block; width:; height:2.2em; overflow:hidden; font-size:0.9em; font-weight:bold; color:#B0B0B0; background-color:#000000; text-decoration:none; text-align:center; border:solid 1px #FFFFFF; } .menubt a:visited { margin:0px; padding:5px; display:block; width:; height:2.2em; overflow:hidden; font-size:0.9em; font-weight:bold; color:#B0B0B0; background-color:#000000; text-decoration:none; text-align:center; border:solid 1px #FFFFFF; } .menubt a:hover { margin:0px; padding:5px; display:block; width:; height:2.2em; overflow:hidden; font-size:0.9em; font-weight:bold; color:#B0B0B0; background-color:#000000; text-decoration:underline; text-align:center; border:solid 1px #FFFFFF; } #sm-nav { position: absolute; top: -1000px; width:70%; height: auto; z-index: 999999; /* box-shadow: 0 0 3px 0 #333; */ padding: 5px; } #sm-nav-frm { border:none; width:100%; } ul.global_nav_list { margin: 0 auto; padding: 0; line-height: 2em; } ul.global_nav_list li.gnav_sub_head { border-bottom:none !important; list-style: none; background: none; text-indent: 0px; font-weight: bold; } ul.global_nav_list li:last-child { border-bottom:none !important; } ul.global_nav_list_disc { list-style-image: none !important; list-style-type: disc !important; list-style-position: inside !important; } ul.global_nav_list_icon { list-style: none; } ul.global_nav_list li { padding: 5px 10px; } ul.global_nav_list_icon li { background-image: url("/image/icon/sp_menu_icon.png"); background-repeat: no-repeat; background-position: 97% 50%; text-indent: 0; } ul.global_nav_list li a { text-decoration: none; display: block; font-weight: normal !important; } ul.global_nav_list_disc li a { display: inline-block; } #at-main-menu-area { width:100%; background-color:#000000; color:#B0B0B0; } #at-main-menu-in { text-align: center; } #at-main-menu-in .top-menu-button { border-right: 1px solid #FFFFFF; } #at-main-menu-in li.col:first-child > .top-menu-button { border-left: 1px solid #FFFFFF; } #at-main-menu-in .top-menu-button > a { color:#B0B0B0; line-height: 50px; text-decoration: none; display: block; } #at-main-menu-in .top-menu-button > a > img { width:100%; } #at-main-menu-in .top-menu-button:hover { background-color:#FFFFFF; } #at-main-menu-in .top-menu-button:hover > a { color:#B0B0B0; } @media screen and (min-width:768px) and ( max-width:1024px) { #at-main-menu-in .top-menu-button { border-bottom: 1px solid #FFFFFF; } } .footer_in .col h3 { color:#FFFFFF; font-size:1.1em; margin:0 0 7px 0; } .footer_in ul.flexbox > .col { padding:7px; border-left:1px solid #FFFFFF; } .footer_in { color:#FFFFFF; } .footer_in li a { color:#FFFFFF; font-size:0.9rem; } .footer_in li a:hover, .footer_in a:visited, .footer_in a:link { color:#FFFFFF; } .fre_pku_bef_comment { margin-top:0.5em; margin-bottom:0.5em; } .footer_in ul.flexbox > .col { padding-left:20px; } .fre_pku_image h3, .fre_pku_image h4 { margin: 0; padding: 0; } .fre_pku_comment h3, .fre_pku_comment h4 { margin: 0; padding: 0; font-weight: normal; } @media screen and (max-width:767px) { .sm-none { display:none; } .contents-pku .col { margin-bottom:1em; margin-right:2%; } .contents-pku.flexbox-sm-1 .col { width:100%; } .contents-pku.flexbox-sm-2 .col { width: calc(100% / 2 - 2% / 2); } .contents-pku.flexbox-sm-3 .col { width: calc(100% / 3 - 4% / 3); } .contents-pku.flexbox-sm-4 .col { width: calc(100% / 4 - 6% / 4); } .contents-pku.flexbox-sm-5 .col { width: calc(100% / 5 - 8% / 5); } .contents-pku.flexbox-sm-6 .col { width: calc(100% / 6 - 10% / 6); } .contents-pku .fre-pku-sm-rtn { margin-right:0; } .contents-pku .fre_pku_image { width:100%; } #mini-notification .inner { width: 100% !important; background: none !important; background-color: rgba(255, 255, 255, 0.9) !important; border: 1px solid #ccc !important; } #at-footer-menu > li.col { border-left:none; } #at-footer-menu ul li.col { padding:5px 0; } .footer_in .col h3{ margin:15px 0 7px 0; } } @media screen and (min-width:768px) and ( max-width:1024px) { .sm-show { display:none; } .contents-pku .col { margin-bottom:1em; margin-right:1.5%; } .contents-pku.flexbox-mm-1 .col { width:100%; } .contents-pku.flexbox-mm-2 .col { width: calc(100% / 2 - 1.5% / 2); } .contents-pku.flexbox-mm-3 .col { width: calc(100% / 3 - 3% / 3); } .contents-pku.flexbox-mm-4 .col { width: calc(100% / 4 - 4.5% / 4); } .contents-pku.flexbox-mm-5 .col { width: calc(100% / 5 - 6% / 5); } .contents-pku.flexbox-mm-6 .col { width: calc(100% / 6 - 7.5% / 6); } .contents-pku .fre-pku-mm-rtn { margin-right:0; } } @media print,screen and (min-width:1024px) { .sm-show { display:none; } .contents-pku .col { margin-bottom:1em; margin-right:1%; } .contents-pku.flexbox-wm-1 .col { width:100%; } .contents-pku.flexbox-wm-2 .col { width: calc(100% / 2 - 1% / 2); } .contents-pku.flexbox-wm-3 .col { width: calc(100% / 3 - 2% / 3); } .contents-pku.flexbox-wm-4 .col { width: calc(100% / 4 - 3% / 4); } .contents-pku.flexbox-wm-5 .col { width: calc(100% / 5 - 4% / 5); } .contents-pku.flexbox-wm-6 .col { width: calc(100% / 6 - 5% / 6); } .contents-pku .fre-pku-wm-rtn { margin-right:0; } } .mov { border: solid 1px #999999; background-color:#000000; } #read_brws_link_box a { /*font-size:1px;*/ text-indent: -10000px; position:absolute; top:0; left:0; } div.news_list { width:100%; border-style:none; font-size:1em; } div.news { width:100%; border-style:none; position:relative; } div.name { text-align:right; border-style:none; padding-left:20px; padding-right:20px; margin-top: 13px; } div.footselect { width:100%; height:7px; background-image:url(/userimage/1_1_6.gif); background-repeat:repeat-x; } div.topmenuarea { width:; margin-top:0px; margin-bottom:0px; margin-right:auto; margin-left:auto; } a:link { color:#0071db; text-decoration:none; } a:visited { color:#0071db; text-decoration:none; } a:hover { color:#0071db; text-decoration:underline; } div.menutR{ clear: left; width:; text-align:left; vertical-align:text-top; } img.button { width:100px; height:25px; margin-top:5px; margin-bottom:5px; border-style:none; } img.topl { width:140px; height:64px; margin-top:5px; margin-left:0px; border-style:none; } img.topr { width:140px; height:64px; margin-top:5px; margin-left:0px; border-style:none; } div.rcaptionex h1 { font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.rcaptionex span { padding-left: 90px; font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.rcaption h1 { font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.rcaption span { padding-left: 90px; font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.rcaption { margin-top:5px; margin-left:10px; width:; height:64px; padding-top:5px; background-image:url(/userimage/1_1_2.jpg); background-repeat:no-repeat; background-position:top center; } div.rcaptionex { margin-top:0px; margin-left:0px; padding-top:0px; background-image:url(/userimage/1_1_2.jpg); background-repeat:no-repeat; background-position:top center; } div.menu_space { height:10px; } div.document_space { height:10px; } div.news_scroll { width:100%; height:150px; overflow-y:auto; } div.news2_scroll { width:100%; height:150px; overflow-y:auto; } div.vmode_scroll { width:100%; height:0px; overflow-y:auto; } div.toplimg_new { width:140px; text-align:center; vertical-align:top; float:left; } div.rcaption_new { margin-top:5px; margin-left:10px; width:520px; height:64px; padding-top:5px; background-image:url(/userimage/1_1_2.jpg); background-repeat:no-repeat; background-position:top center; float:left; } div.rcaption_new h1 { font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.rcaption_new span { padding-left: 90px; font-weight:bold; font-size:1.1em; text-align:center; display:none; } div.qrcode_new { width:174px; text-align:center; vertical-align:text-top; float:left; } div.toprimg_new { vertical-align:text-top; text-align:left; float:left; } div.blockend { clear:both; } div.blockend_br { padding-top:1em; clear:both; } div.naviR_new { width:; float:left; } ; div.document1_new { width:; } div.document2_new { width:; float:left; } a.rss { margin-left:4px; } img.newsbar { vertical-align:bottom; } td.p_nopad p { margin-top:0;padding-top:0; } hr.news_head { height:1px; border:none; color:000; background-color:#000; } hr.news2_head { height:1px; border:none; color:000; background-color:#000; } hr.news_contents { height:1px; border:none; color:000; background-color:#000; } hr.news2_contents { height:1px; border:none; color:000; background-color:#000; } hr.youtube_head { height:1px; border:none; color:000; background-color:#000; } hr.youtube_foot { height:1px; border:none; color:000; background-color:#000; } div.at-content-box { margin-top:5px; } div.at-content-text { text-align:left; } .clear { clear:both; } .center_box { margin:0 auto; width:100%; } .left_box { text-align:left; width:100%; } .right_box { text-align:right; width:100%; } div#font-size-change { font-size:1em; line-height:150%; text-align:center; } div#font-size-change > dl { margin:0px; } div#font-size-change > dl > dt { float: left; font-size: 85%; margin-top: 5px; margin-right:2px; color:#333; } div#font-size-change > dl > dd { float: left; border-radius:2px; margin-left: 2px; padding: 3px; min-width: 20px; background-color:#FFFFFF; border:1px solid #404040; color:#333; } div#font-size-change > dl > dd:hover { } dd.font-select { background-color:#404040 !important; color:#FFFFFF !important; } dd#font-size-normal { min-width: 30px !important; cursor:pointer; } dd#font-size-small { font-size:75% !important; cursor:pointer; } dd#font-size-big { font-size:130% !important; cursor:pointer; } div#color-change { font-size:1em; text-align:center; } div#color-change > dl { margin:0px; } div#color-change > dl > dt { float: left; font-size: 85%; margin-top: 5px; margin-right:2px; } div#color-change > dl > dd { float: left; cursor:pointer; border-radius:2px; margin-left: 2px; padding: 3px; width: 20px; } div#color-change > dl > dd:hover { } dd#color-mode-default { width: 30px !important; background-color:#ffffff; border:1px solid #d9d9d9; color:#333333; } dd#color-mode-white { background-color:#ffffff; border:1px solid #d9d9d9; color:#000000; } dd#color-mode-black { background-color:#000000; border:1px solid #000000; color:#ffffff; } dd#color-mode-blue { background-color:#0000aa; border:1px solid #0000aa; color:#ffffff; } .video-title-box { text-align:center; margin:0 0.5em; } .video-desc { margin:1em; display:block; } .at-video { object-fit: cover; } div.news h3 { margin:0px; padding:0px; display:inline; } div.news h2 { margin:0px; padding:0px; display:inline; } .at_anime01 h2, .at_anime01 h2 span { opacity: 0; //不透明度0% } .at_anime02 h2 { opacity: 0; //不透明度0% position:relative; overflow:hidden; transform : translate(0, -2em); transition : all 1.0s ease; } .at_anime03 h2 { opacity: 0; //不透明度0% position:relative; overflow:hidden; transform : translate(0, 2em); transition : all 1.0s ease; } .at_anime04 h2 { opacity: 0; transition: all 1.0s; } .pku_anime01 > ul > li, .pku_anime01_ex > ul > li, .at_img_anime01 { opacity: 0; transition: all 1.0s; } .pku_anime02 > ul > li, .pku_anime02_ex > ul > li, .at_img_anime02 { opacity: 0; transform: scale(0, 0); transition: all 1.0s; } .pku_anime03 > ul > li, .pku_anime03_ex > ul > li, .at_img_anime03 { opacity: 0; transition: all 1.0s; transform : translate(0, 100px); } .at-icon-none { list-style:none; } .at-icon-disc { list-style:none; } .at-icon-disc a.text_link { position: relative; } .news .at-icon-disc a.text_link , .news2 .at-icon-disc a.text_link { margin-left:20px; display:inline-block; } .at-icon-disc a.text_link::after { display: block; content: ''; position: absolute; top: .45em; left: -1em; width: 6px; height: 6px; background-color: #666; border-radius: 100%; } .at-icon-arrow { list-style:none; } .at-icon-arrow a.text_link { position: relative; } .news .at-icon-arrow a.text_link , .news2 .at-icon-arrow a.text_link { margin-left:20px; display:inline-block; } .at-icon-arrow a.text_link::after { display: block; content: ''; position: absolute; top: .5em; left: -1em; width: 6px; height: 6px; border-right: 2px solid #666; border-bottom: 2px solid #666; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .at-icon-arrow2 { list-style:none; } .at-icon-arrow2 a.text_link { position: relative; } .news .at-icon-arrow2 a.text_link , .news2 .at-icon-arrow2 a.text_link { margin-left:20px; display:inline-block; } .at-icon-arrow2 a.text_link::after, .at-icon-arrow2 a.text_link::before { display: block; content: ''; position: absolute; } .at-icon-arrow2 a.text_link::after { top: 0.15em; left: -1.2em; width: 14px; height: 14px; background-color: #3498db; border-radius: 100%; } .at-icon-arrow2 a.text_link::before { z-index: 2; top: 0.42em; left: -1.05em; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .at-cion-none { list-style:none; } #at-footer-menu > li > ul > li.at-icon-arrow2 a.text_link { margin-left:1.5em; } #at-footer-menu > li > ul > li.at-icon-arrow a.text_link { margin-left:1em; } #at-footer-menu > li > ul > li.at-icon-disc a.text_link { margin-left:1em; } #at-footer-menu > li > ul > li.at-icon-arrow2 a.text_link::after { background-color: #FFFFFF; } #at-footer-menu > li > ul > li.at-icon-arrow a.text_link::after { border-color: #FFFFFF; } #at-footer-menu > li > ul > li.at-icon-disc a.text_link::after { background-color: #FFFFFF; } @media screen and (max-width:767px) { .ccaption h1,.ccaption h2 { font-size:1.2rem !important; font-weight:bold !important; } .ccaption_sub h2,.ccaption_sub h3 { font-size:1.1rem !important; font-weight:bold !important; } .ccaption_sub_min h3,.ccaption_sub_min h4 { font-size:1rem !important; font-weight:bold !important; } } /* 共通 -------------------------------------------------------------------------------------- */ body { line-height: 140%; } h1,h2,h3,h4,h5,h6,p { margin: 0; padding: 0; } a { text-decoration: none; } a img { border: none; } a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; } img { vertical-align: bottom; } .clear { clear: both; } ruby { line-height:1em; } .maintablebox2_outerbox { clear: both; /* padding: 10px; */ padding:0; } /*.at-content-box { max-width:700px; }*/ .at-content-img.side_img_box { max-width:40%; } #at-main-menu-in { max-width:1220px; padding:0 10px; margin:0 auto; } .footer_in { max-width:1220px; padding:0 10px; margin:0 auto; } .at_news_cate { width:100px !important; } #at-footer-menu ul { margin:0; padding:0; } /* ec-cube */ #sub_area iframe { max-width:100%; } /* トップメニュー・nav -------------------------------------------------------------------------------------- */ #top-menu { max-width: 1040px; margin: 0 auto; padding: 5px 5px 0 5px; height: 35px; } #top-menu ul { float: right; margin: 5px 20px 0 0; padding: 0; font-size: 12px; } #top-menu ul li { list-style: none; display: inline-block; padding: 0 0 0 17px; margin: 0 0 0 10px; background: url(/files/icon-arrow1.png) no-repeat 0% 50%; } #top-menu ul li a { color: #333; } #top-menu ul li a:hover { color: #0071db; text-decoration: none; } div#font-size-change { float: right; margin: 0 20px 0 0; } .search_form { float: right; width: 226px; margin: 3px 25px 0 0; } .search_form #field { float:left; width:180px; height:22px; line-height:19px; text-indent:6px; font-size:1em; color:#333; background: #ffffff; border:solid 1px #dcdcdc; margin-top: 1px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .search_form #space { float:left; width:2px; height:21px; line-height:19px; margin:0; padding:0; font-size:1px; border:none; } .search_form #submit { float:left; cursor:pointer; width:40px; height: 23px; line-height:0; font-size:0; text-indent:-999px; color: transparent; background: url(/image/search/ico-search.png) no-repeat #333 center; border: 1px solid #333; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .search_form .fclear {clear:both} #shop-info { clear: both; max-width: 1040px; margin: 0 auto; } #logo { margin-left: auto; margin-right: auto; width: 300px; height: 135px; } #logo img { margin: 10px 0 0 0; width: 100%; } img#shop-tel { display: inline-block; width: 360px; height: 90px; float: right; margin: 0 10px 0 0; } nav > ul#main-menu { clear: both; float: left; width: 100%; height:auto; line-height: 46px; margin: 0; padding: 0; } nav > ul#main-menu > li { display: block; float: left; margin: 0; text-align: center; list-style: none; border-right: 1px solid #888; } nav > ul#main-menu > li:first-child { border-left: solid 1px #888; } nav > ul#main-menu > li > a { color:#ffffff !important; display: inline-block; width: 100%; } nav > ul#main-menu > li > a:hover { color:#fff !important; background-color:#555; text-decoration: none; } /* 特定商取引 */ .table-style1 #law-table { width:97%; margin:10px auto 10px auto; border-collapse:collapse ; border:solid 1px #cdd1da; } .table-style1 #law-table th { padding:8px 10px; font-weight:bold; border-bottom:solid 1px #cdd1da; border-right:solid 1px #cdd1da; background-color:#f0f0f0; } .table-style1 #law-table td { padding:8px 10px; border-bottom:solid 1px #cdd1da; text-align:left; } /* 送料 */ /* .table-style1 .delivery-fee { width:60%; margin: 10px 0 10px 20px; border-collapse:collapse ; border:solid 1px #cdd1da; } .table-style1 .delivery-fee th { padding:8px 10px; font-weight:bold; border-bottom:solid 1px #cdd1da; border-right:solid 1px #cdd1da; background-color:#f0f0f0; } .table-style1 .delivery-fee td { padding:8px 10px; border-bottom:solid 1px #cdd1da; border-right:solid 1px #cdd1da; } */ /* テーブル */ .table-style1 { border-collapse: collapse; border: solid 1px #ccc; margin: 15px 0; font-size: 0.95em; } .table-style1 th { width: 15%; padding: 9px 10px; font-weight: normal; border: solid 1px #ccc; } .table-style1 td { padding: 9px 10px; border: solid 1px #ccc; } .deliv-table { border-collapse: collapse; border: solid 1px #ccc; margin: 15px 0; font-size: 0.95em; } .deliv-table th { padding: 9px 10px; font-weight: normal; border: solid 1px #ccc; } .deliv-table td { padding: 9px 10px; border: solid 1px #ccc; } .deliv-table td.td-price { text-align:center; } .tbl-50 { width: 50%; } .tbl-bg-gray { background-color: #eaf1e8; } #delivery-fee-comment { font-size:19px; margin-top:15px; margin-left: 10px; } /* ピックアップ */ .pku_cont1 .pku_cont_list { text-align: center; } .pku_cont2 .pku_cont_list { text-align: center; } .pku_cont3 > ul > li { padding: 10px 2% 1% 2% !important; } .pku_cont4 > ul { width: 70%; margin: 0 auto !important; } .pku_cont4 > ul > li { text-align: center; } .pku_cont4 .pku_cont_box img { width: 55% !important; } #pku_box3 { padding-bottom: 70px; } /* サブメニュー */ div#side-menu { width: 220px; margin: 0 auto; } #side-menu ul { list-style: none; margin: 0; padding: 0; } #side-menu ul li { padding: 10px; margin: 0; border-bottom: 1px solid #aaa; } #side-menu ul li a { color:#515151; } h3.shop-category-title { background-color: #000; padding: 10px; color: #fff; font-size: 1em; margin-top: 15px; } h3.shop-category-title a { color: #fff; } .side-box { padding: 10px 15px; margin: 20px 0 0 0; background-color: #efefef; font-size: 0.85em; } #count { margin: 10px 0 0 22px !important; } /* 販売エリア地図 */ .mapoint { width: 60%; margin: 0 auto; border: 1px solid #aaa; border-collapse: collapse; text-align: center; } .mapoint th { font-size: 0.9em; padding:7px 0; border: 1px solid #aaa; background-color: #333; color: #fff; } .mapoint td { width: 19%; font-size: 0.8em; padding: 2px 0; border: 1px solid #aaa; } .mapoint a { color: #333; } .mapoint a:hover { color: #0071db; } /* GoogleMap */ .google_map{ position:relative; width:90%; height:0; padding-top:75%; margin:auto; } .google_map iframe{ position:absolute; top:0; left:0; width:90%; height:90%; } /* ショップライダー */ .shop-rider { margin: 15px 0 0 0; padding: 0; } .shop-rider li { list-style: none; } /* ニュース */ .news h2 { background-color: #000; width: 100%; display: block !important; padding: 0 0 0 10px !important; } img.newsbar { vertical-align: middle; margin-right: 10px; } .news_title a { color: #333 !important; } .news_title a:hover { color: #0071db !important; text-decoration: none; } .more_box { background-color: #333; color: #fff; width: 130px; padding: 0 12px; margin: 10px 0 10px 50px !important; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .more_box a { color: #fff !important; } .more_box a:hover { color: #0071db !important; text-decoration: none; } /* フッター */ .footbackground { padding-top: 20px; } .footselect { background-image: none !important; } .footer-nav { max-width: 1500px; margin: 20px auto; padding: 0; text-align: center; } .footer-nav li { display: inline-block; margin: 0 2px 8px 0; padding: 0 8px 0 0; border-right: solid 1px #aaa; list-style: none; font-size: 0.9em; line-height: 1.1em; } .footer-nav li:last-child { border: none; } .footer-nav li a { color: #333; } .footer-nav li a:hover { color: #0071db; text-decoration: none; } .shop-info-wrap { clear: both; background-color: #000; color: #fff; padding: 20px 0; font-size: 0.9em; } .shop-info { max-width: 1270px; margin: 0 auto; text-align: right; padding: 0 15px; } .footbackground .name { color: #fff; } .copyright { background-color: #000; color: #fff; padding: 2px 0; font-size: 0.9em; } /* 余白等 */ .mar-t10 { margin-top: 10px; } .mar-t15 { margin-top: 15px; } .mar-t20 { margin-top: 20px; } .mar-b10 { margin-bottom: 10px; } .mar-b15 { margin-bottom: 15px; } .mar-b20 { margin-bottom: 20px; } /* レスポンシブ用テンプレート -------------------------------------------------------------------------------------- */ .main_inner { width:100%; margin:0 auto; padding:0; } .main_block1_inner { width:95%; } .pku_inner { width:95%; } .news_inner { width:95%; background-color: #fff; } .free_inner { max-width:95%; margin:0 auto; padding:20px 0;} .main_block_updown_img img { display: block; margin: 0 auto; } .main_block1_box { background-color:#ffffff; padding:0 0 10px; } .main_block2_box { background-color:#ffffff; padding:30px 0; } .tpc_box { background-color:#ffffff; padding:30px 0; } .pku_box { background-color:#ffffff; padding:0; } .pku2_box { background-color:#ffffff; padding:30px 0; } .news_box { background-color:#ffffff; padding:40px 0; } .news2_box { background-color:#ffffff; padding:30px 0; } .vmode_box { background-color:#ffffff; padding:30px 0; } .youtube_box { background-color:#ffffff; padding:30px 0; } .cover_box { background-color:#ffffff; padding:30px 0; } .more_box { text-align:center; margin:20px 0; } #top_baner1_box { clear: both; background-color: #000; } #top_baner1_box_in { max-width:1300px; margin: 0 auto; padding: 0; } #sm-nav-btn img { width: 40px; /* 必要な幅 */ border: 1px solid; /* 枠線の設定 */ border-radius: 0.3em; background-color:#fff; /* 好きな背景色 */ margin-top: 5px; } /* media screen スマホ用 -------------------------------------------------------------------------------------- */ @media screen and (max-width:767px) { /*　画面サイズが480pxからはここを読み込む　*/ .top_menu_fixed { position:absolute; } .sm-none { display:none; } .top_fixed_menu { display:none; } .navi_new { display:none; } .document_new_r { margin-left:0 !important; } .document_new_r_contents { margin-left:0 !important; } .at-content-text { overflow: initial !important; } .at-content-img.side_img_box { float:none !important; margin-bottom:0.5em; max-width:100%; } .news_img_auto_size_box { float: none !important; max-width: 100% !important; margin-right: 0px !important; margin-left: 0px !important; margin-bottom: 7px; } .main-menu01 { display:none; } #sm-nav-btn { display:block; } #sm-nav { background-color: #fff !important; /* 好みの背景色 */ background-image:none; } #sm-nav .span { display:block; color:#fff; font-size:16px; } #sm-nav > ul { width:100%; } #sm-nav ul.at_listmenu { position:relative; } #sm-nav ul.at_listmenu li { width:100%; } #sm-nav ul.at_listmenu ul { position:relative; left: 0; } #sm-nav > ul > li { padding:10px 5px; } #sm-nav > ul > li > a { background:none; height:auto; } .grid-sm-1 > .col { width:100%; padding-right:0; } .grid-sm-2 > .col { width:50%; float:left; } .grid-sm-2 > .col-top4 { width:48%; margin:0 1% 13px 1%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-sm-3 > .col { width:33%; float:left; } .grid-sm-3 > .col-top3 { width:31%; margin:0 1% 13px 1%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-sm-4 > .col { width:25%; float:left; } .flexbox-sm-1 > .col { width:100%; padding-right:0; } .flexbox-sm-2 > .col { width:50%; } .flexbox-sm-3 > .col { width:33%; } .flexbox-sm-4 > .col { width:25%; } .flexbox-sm-5 > .col { width:20%; } .flexbox-sm-6 > .col { width:16.6%; } .maintablebox2 { padding-top: 5px; font-size:0.9em; } .main_block1_box { padding:0 0 15px 0; } .main_block2_box { padding:15px 0; } #top_baner1_box_in { max-width: 100%; margin: 0 auto; } #top_baner2_box_in { max-width: 100%; margin: 0 auto; } .tpc_box { padding:15px 0; } .pku_box { padding:15px 0; } .pku2_box { padding:15px 0; } .news_box { padding:22px 0; } .news2_box { padding:15px 0; } .vmode_box { padding:15px 0; } .youtube_box { padding:15px 0; } .cover_box { padding:15px 0; } #top-menu ul { display: none; } .search_form { margin: 12px 70px 0 0; } #logo { margin-left: 12px; } nav { display: none; } .main_inner { width:97%; margin:0 auto; } .main_block1_inner { padding: 0; } div#main_block_head1_1 h2 { margin-left: 7px !important; } .news_inner { max-width: 95%; padding: 15px 6px; } .pku_cont1 .pku_cont_list { padding: 0 !important; min-height: 80px; } .pku_cont1 .pku_cont_list .pick1-title { padding: 5px 5px; font-size: 0.85em; } .pku_cont1 .pku_cont_list .pick1-contents { padding: 8px 5px 8px 5px !important; font-size: 0.85em; line-height: 130%; } #pku_box3 { padding-bottom: 20px; } .flexbox-sm-3 > .col { width: 80%; margin: 0 auto; } .pku_cont3 > ul > li { padding: 10px 0.5% 15px 0.5% !important; } .pku_cont4 > ul { width: 90%; } .pku_cont4 .pku_cont_box img { width: 70%; } /* .ccaption_pku1 h2 img { width:156px !important; } .ccaption_pku2 h2 img { width: 113px !important; } */ .footer-menu { display: none; } .table-style1 .delivery-fee { width:99%; margin: 10px 0; font-size: 0.8em; } .table-style1 .delivery-fee th { padding:8px 2px; } .table-style1 .delivery-fee td { padding:8px 2px; } /* スマホグローバルメニュー */ #smp-global-nav { clear: both; } #smp-global-nav h3 { background-color: #696969; color: #fff; padding: 8px 6px; margin: 0; font-size: 0.97em; } #smp-global-nav h4 { background-color: #c0c0c0; color: #fff; padding: 8px 6px; margin: 5px 0 0 0; font-size: 0.97em; } #smp-global-nav ul { margin: 0; padding: 0; } #smp-global-nav ul li { margin: 0; padding: 0 0 0 20px; height: 38px; line-height: 38px; list-style: none; background: url(/files/icon-arrow3.png) no-repeat 0% 50%; border-bottom: 1px solid #ebebeb; } #smp-global-nav ul li a { color: #333; display:block; width: 100%; height: 100%; text-decoration: none; } #smp-global-nav ul li a:hover { color: #f07f03; } .toppage { background-color: #f1f0f0; height: 38px; line-height: 38px; margin: 0 0 5px 0; padding-left: 6px; font-size: 0.97em; font-weight: bold; } .toppage a { color: #333; display:block; width: 100%; height: 100%; text-decoration: none; } .sp-tel { width: 100%; margin: 5px auto; } .home { display: inline-block; margin: 9px 7px 0 0; float: right; } } /* media screen タブレット用 -------------------------------------------------------------------------------------- */ @media screen and (min-width:768px) and ( max-width:1024px) { /*　画面サイズが768pxから1024pxまではここを読み込む　*/ .grid-mm-1 > .col { width:100%; padding-right:0; } .grid-mm-2 > .col { width:50%; float:left; } .grid-mm-3 > .col { width:33%; float:left; } .grid-mm-3 > .col-top3 { width:32%; margin:0 0.5%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-mm-4 > .col { width:25%; float:left; } .grid-mm-4 > .col-top4 { width:24%; margin:0 0.5%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-mm-5 > .col { width:20%; float:left; } .flexbox-mm-1 > .col { width:100%; padding-right:0; } .flexbox-mm-2 > .col { width:50%; } .flexbox-mm-3 > .col { width:33%; } .flexbox-mm-4 > .col { width:25%; } .flexbox-mm-5 > .col { width:20%; } .flexbox-mm-6 > .col { width:16.6%; } #top_baner1_box_in { max-width: 100%; margin: 0 auto; } #top_baner2_box_in { max-width: 100%; margin: 0 auto; } #logo { margin-left: 20px; } #logo { margin: 0 0 0 10px !important; } nav > ul { width: 97%; margin: 0 auto; padding: 0; } nav > ul li { over-flow: none; } nav > ul li a { font-size: 0.9em; } .main_inner { width:97%; margin:0 auto; } .main_block1_inner { padding: 0; } div#main_block_head1_1 h2 { margin-left: 7px !important; } .main_block1_inner ul#top-main-mechabey li h3 { padding: 7px 6px 5px 6px; } .main_block1_inner ul#top-main-mechabey li p { max-width: 90%; padding: 0 10px 7px 10px; } .news_inner { max-width: 95%; padding: 15px 20px; } .pku_cont1 .pku_cont_list .pick1-title { padding: 5px 5px; font-size: 0.9em; } .pku_cont1 .pku_cont_list .pick1-contents { padding: 8px 5px 8px 5px !important; font-size: 0.9em; line-height: 130%; } /* .ccaption_pku1 h2 img { width:156px !important; } .ccaption_pku2 h2 img { width: 113px !important; } */ .footer-menu { width: 94%; margin: 0 auto; padding: 15px 0 15px 20px; font-size: 0.9em; } .footer-menu ul li { padding: 0 0 0 4px; list-style: none; background: none; } .footer-menu1 { margin: 0 2px; padding: 12px 5px; } .footer-menu2 { margin: 0 2px; padding: 12px 5px; } .footer-menu3 { margin: 0 2px; padding: 12px 5px; } .footer-menu4 { margin: 0 2px; padding: 12px 5px; } .footer-menu5 { margin: 0 2px; padding: 12px 5px; } .table-style1 .delivery-fee { width:99%; margin: 10px 0 10px 5px; font-size: 0.9em; } .table-style1 .delivery-fee th { padding:8px 5px; } .table-style1 .delivery-fee td { padding:8px 5px; } } /* media screen PC用 -------------------------------------------------------------------------------------- */ @media screen and (min-width:1024px) { /*　画面サイズが1024pxからはここを読み込む　*/ .grid-wm-1 > .col { width:100%; padding-right:0; } .grid-wm-2 > .col { width:50%; float:left; } .grid-wm-3 > .col { width:33%; float:left; } .grid-wm-3 > .col-top3 { width:31%; margin:0 1%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-wm-4 > .col { width:25%; float:left; } .grid-wm-4 > .col-top4 { width:23%; margin:0 1%; border-width: 1px; border-style: solid; border-color: #dcdcdc; float:left; } .grid-wm-5 > .col { width:20%; float:left; } .grid-wm-6 > .col { width:16.6%; float:left; } .grid-wm-7 > .col { width:14%; float:left; } .flexbox-wm-1 > .col { width:100%; padding-right:0; } .flexbox-wm-2 > .col { width:50%; } .flexbox-wm-3 > .col { width:33%; } .flexbox-wm-4 > .col { width:25%; } .flexbox-wm-5 > .col { width:20%; } .flexbox-wm-6 > .col { width:16.6%; } .flexbox-wm-7 > .col { width:14%; } #at-foot-company-tel a { color: #fff !important; } } /* 管理画面ここから a img{border:none;} .span{display:none;} */ /* main img #title-logo {width:900px; height:70px; background: url(http://www.eco-loop.jp/files/title-logo.jpg) no-repeat; margin:0px 0px 5px 0px; padding:0px;} */ /* main menu .menu-main01 ul { margin:0px 0px 0px 0px; padding:0px; list-style:none;} .menu-main01 ul li{ margin:0px 0px 1px 0px; padding:0px; float:left; list-style:none;} a.main-btn01:link, a.main-btn01:visited {display:block; width:147px; height:25px; margin:0px 3px 0px 0px ; padding:12px 0px 0px 0px; background :url(http://www.eco-loop.jp/files/btn01.jpg) repeat-x; overflow:hidden; font-size:0.8em; color:#FFFFFF; text-align:center; vertical-align:middle; text-decoration:none;} a.main-btn01:hover {margin:0px 3px 0px 0px ; padding:12px 0px 0px 0px; overflow:hidden; text-decoration:none; font-size:0.8em; color:#FDFEB7; text-align:center; vertical-align:middle; background :url(http://www.eco-loop.jp/files/btn01.jpg) repeat-x;} .menu-main02 ul { margin:0px 0px 0px 0px; padding:0px; list-style:none;} .menu-main02 ul li{ margin:0px 0px 0px 0px; padding:0px; float:left; list-style:none;} a.main-btn02-01:link, a.main-btn02-01:visited {display:block; width:299px; height:90px; margin:0px 1px 0px 0px; background :url(http://www.eco-loop.jp/files/kaitori.gif) repeat-x;} a.main-btn02-01:hover {display:block; width:299px; height:90px; margin:0px 1px 0px 0px; background :url(http://www.eco-loop.jp/files/kaitori.gif) repeat-x;} .main-btn02-02 {display:block; width:299px; height:90px; margin:0px 1px 0px 0px; background :url(http://www.eco-loop.jp/files/otoiawase.gif) repeat-x;} .main-btn02-02 {display:block; width:299px; height:90px; margin:0px 1px 0px 0px; background :url(http://www.eco-loop.jp/files/otoiawase.gif) repeat-x;} a.main-btn02-03:link, a.main-btn02-03:visited {display:block; width:299px; height:90px; margin:0px 0px 0px 0px; background :url(http://www.eco-loop.jp/files/shohin.gif) repeat-x;} a.main-btn02-03:hover {display:block; width:299px; height:90px; margin:0px 0px 0px 0px; background :url(http://www.eco-loop.jp/files/shohin.gif) repeat-x;} .email { display:block; width:280px; height:17px; padding:67px 0px 0px 10px;} */ /* sub menu #left-box{width:190px; border:0; align:left; margin:0px 0px 0px -20px; padding:0;} #left-box ul{margin:0 ; padding:0px; list-style:none;} #left-box ul li{margin:0px; padding:0; list-style:none;} a.left-btn:link, a.left-btn:visited {display:block; width:163px; height:32px; margin:0; line-height: 30px; padding-left: 27px; font-size:0.8em; color:#000000; text-align:left; vertical-align:middle; background :url(http://www.eco-loop.jp/files/submenu-bg.gif) no-repeat; overflow:hidden; text-decoration:none;} a.left-btn:hover {color:#0123FF; } */ /* main content #right-box{width:680px; margin:0px 0px 0px 0px; padding:0;} .banner01{ width:680px; height:85px; margin-bottom:10px; padding:0px;} .banner02{ width:680px; height:85px; margin-bottom:20px; padding:0px;} .c-title-bg { width:680px; height:25px; margin:20px 0px 10px 0px; padding:8px 0px 0px 20px; background :url(/files/c-title-bg.gif) no-repeat; font-size: 0.9em; color:#005D00;} .c-box-l{width: 218px; height: 120px; margin: 0px; float: right; border: 1px solid #ADDCC0;} .c-box-l{ float: left; margin-left: 0px;} .c-box-l{ margin-right: 10px; margin-bottom:10px} .c-box-r{width: 218px; height: 120px; margin: 0px; float: right; border: 1px solid #ADDCC0;} .c-box-r{ float: left; } .c-box-r{ margin-right: 0px; margin-bottom:10px} .c-box-l p a, .c-box-r p a { font-size:0.8em; color:#000000; text-decoration:none;} .c-box-l img, .c-box-r img{ margin: 13px 5px 5px 5px; float:left; border: 1px solid #ADDCC0;} .c-s-title a{font-size:0.9em; padding:5px 0px 3px 10px; color:#005D00; background-color:#E6F5E6; border-bottom:1px solid #ADDCC0; font-weight: bold; display:block; text-decoration:none;} */ /* index tag h1{margin:0px; padding:0px;} h2{margin:0px; padding:0px;} h3{margin:0px; padding:0px;} h4{margin:0px; padding:0px;} */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe[style]{ width: 100% !important; } .insta_btn { display: inline-block; text-align: center;/*中央揃え*/ color: #2e6ca5;/*文字色*/ font-size: 20px;/*文字サイズ*/ text-decoration: none;/*下線消す*/ } .insta_btn:hover {/*ホバー時*/ color:#668ad8;/*文字色*/ transition: .5s;/*ゆっくり変化*/ } .insta_btn .insta{/*アイコンの背景*/ position: relative;/*相対配置*/ display: inline-block; width: 50px;/*幅*/ height: 50px;/*高さ*/ vertical-align: middle;/*垂直中央に*/ background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/ overflow: hidden;/*はみ出た部分を隠す*/ border-radius: 13px;/*角丸に*/ } .insta_btn .insta:before{/*グラデーションを重ねるため*/ content: ''; position: absolute;/*絶対配置*/ top: 23px;/*ずらす*/ left: -18px;/*ずらす*/ width: 60px;/*グラデーションカバーの幅*/ height: 60px;/*グラデーションカバーの高さ*/ background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/ } .insta_btn .fa-instagram {/*アイコン*/ color: #FFF;/*白に*/ position: relative;/*z-indexを使うため*/ z-index: 2;/*グラデーションより前に*/ font-size: 35px;/*アイコンサイズ*/ line-height: 50px;/*高さと合わせる*/ } @media screen and (max-width: 640px) { .scroll { overflow-x: auto; } .tbl-r07 { min-width: 640px; margin: 0 10px 50px; } .tbl-r07 td { border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; } } div.ccaption { background-image: url(/image/sub/); width:100%; height:auto; background-color:#000; padding:7px 0px 7px 10px; font-weight:bold; font-size:1.6rem; color:#fff; line-height:1.3em; margin-bottom:7px; } div.ccaption h1 { font-size:1.6rem; font-weight:bold; text-align:left; margin:0; padding:0; } div.ccaption_sub { background-image: url(/image/sub/icon1_7.gif); width:100%; height:auto; background-repeat:no-repeat; background-position:left center; padding:6px 0 6px 10px; font-size:1.4rem; border-left:8px solid #000; border-bottom:1px solid #000; line-height:1.3em; margin-bottom: 10px;} div.ccaption_sub h2 { font-size:1.4rem; font-weight:normal; font-weight:normal; margin:0; padding:0; } table.inquirytable { width:90%; margin:0 auto; border-collapse: collapse; background-color: #cccccc; } table.inquirytable th { padding:10px; background-color:#eeeeee; text-align:left; } table.inquirytable td { padding:10px; background-color:#ffffff; text-align:left; } table.inquirytable, table.inquirytable th, table.inquirytable td { border:1px solid #cccccc; } table.inquirytable span { color:#FF0000; } table.inquirytable strong { margin:0px; padding:0px; font-weight:normal; } table.inquirytable h4 { margin:0px; padding:0px; font-weight:normal; } div.rcaptionex { margin-top:0px; margin-left:0px; width:px; height:px; padding-top:0px; background-image:url(/userimage/1_1_2.jpg); background-repeat:no-repeat; background-position:top center; } h1 { font-size:0.8em; font-weight:normal; text-align:center; margin:0.5em; } #at-foot-company-name { width:100%; font-size:1.1rem; } .footbackground div.name { text-align:center; padding:7px 0; } .footbackground div.copyright { text-align:center; padding:7px 0; } div.name span { margin:0 7px; display:inline-block; } #at-foot-company-mail img { vertical-align: middle; display: inline-block; } div.ccaption_foot { width:100%; height:100%; background-repeat:no-repeat; font-size:1.2em; text-align:center; margin-bottom:7px; } div.ccaption_foot span { display: none; } div.ccaption_foot h2 { font-size:1.2em; font-weight:normal; margin : 0; padding : 0; }