@charset "utf-8"; /*menu*/ #menu{ font-size:0; width:100%; border-top:5px solid #d4d1bc; background-color:#f8f6e9; background-image:url(/~/media/cojp/product/pro-embroidery/navi/img/g_navi/line); background-repeat: repeat-x; background-position:bottom; /* float:left; */ z-index: 90; } #menu .g_navi{ padding:0 !important; } .g_navi{ max-width: 1020px; margin:0 auto; text-align:center; overflow:hidden; } #menu .spg_navi{ display:none; } #menu .g_navi div{ display:inline; zoom:1; vertical-align:top; } #menu .g_navi div a img{width:calc((100% / 6) - 0.1px);} #menu a, .sp_top a { color: #1f1800; } /*sub_menu*/ #sb_menu{ width:100%; float:left; background-color:#cee9ff; border-bottom: 1px dashed #c3d0d9; } #sb_menu .sb{ width:1020px; margin:0px auto; padding:10px 19px 10px; text-align:center; overflow:hidden; } #sb_menu .sb .sb1{ margin-right:18px; float:left; } #sb_menu .sb .sb2{ margin-right:18px; float:left; } #sb_menu .sb .sb3{ margin-right:18px; float:left; } #sb_menu .sb .sb4{ float:left; } /*sp*/ #sb_menu .sp_sb{ display:none; } .sp_top{ display:none; width:100%; /* float:left; */ /*margin-bottom: 65px;*/ background-color: #e6f4ff; border-bottom: 1px dashed #c3d0d9; } .sp_top .spg_pan{ width:100%; /* float:left; */ margin:0 auto; text-align:center; overflow:hidden; background-color:#e8e5d2; } .sp_top .spg_pan .spg_pan_txt{ margin: 8px 30px 0; float:left; } .sp_top .spg_pan .spg_pan_txt p{ font-size:12px; } .sp_top .spg_pan .spg_pan_yazi{ float:left; } .sp_top .spg_pan .spg_pan_yazi img{ width:60%; } .sp_top .spg_pan .spg_pan_txt2{ float:left; margin:8px 0px 0px 15px; } .sp_top .spg_pan .spg_pan_txt2 p{ font-size:12px; } #pc-side-nav { display: none; } #pc-side-nav.sidebar { top: 0; left: 0; width: 100%; height:100%; z-index: 2; position: fixed; visibility:hidden; } #pc-side-nav.sidebar img{ position:absolute; top:15%; right:0; z-index:50; visibility:visible; } .fixed { position: fixed; top: 0; width: 100%; z-index: 10000; } .fixed1{ position: fixed; top: 79px; width: 100%; z-index: 10000; } /*レスポンシブ*/ @media screen and (max-width : 640px){ /*mnenu*/ #menu{ font-size:0; width:100%; float:left; background-image:none; z-index: 90; } #menu .g_navi{ display:none; } #menu .spg_navi{ display:block; width:100%; float:left; margin:0 auto; /*text-align:center;*/ overflow:hidden; } #menu .spg_navi .spg_navi_title{ margin: 10px 0 0 10px; float:left; width:200px; } #menu .spg_navi .spg_navi_title .spg_navi_txt{ float:left; /*margin-right:20px;*/ } #menu .spg_navi .spg_navi_title .spg_navi_txt img{ width:75%; } /*#menu .spg_navi .spg_navi_title .spg_navi_txt p{ font-size:30px; }*/ #menu .spg_navi .spg_navi_title .spg_navi_icon{ margin-top: 10px; float:left; } #menu .spg_navi .spg_navi_btn{ display:none; width:100%; min-width:320px; /*float:left;*/ margin:0 auto; /*text-align:center;*/ overflow:hidden; background-color:#f8f6e9; z-index: 100; } #menu .spg_navi .spg_navi_btn .spg_navi_main1{ width:100%; border-top: 1px dashed #c3d0d9; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main1 img{ margin:15px 0px 15px 50px; height:15px; } #menu .spg_navi .spg_navi_btn .spg_navi_main2{ width:100%; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main2 img{ margin:15px 0px 15px 50px; height:15px; } #menu .spg_navi .spg_navi_btn .spg_navi_main3{ width:100%; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main3 img{ margin:15px 0px 15px 50px; height:15px; } #menu .spg_navi .spg_navi_btn .spg_navi_main4{ width:100%; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main4 img{ margin:15px 0px 15px 50px; height:15px; } #menu .spg_navi .spg_navi_btn .spg_navi_main5{ width:100%; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main5 img{ margin:15px 0px 15px 50px; height:15px; } #menu .spg_navi .spg_navi_btn .spg_navi_main6{ width:100%; border-bottom: 1px dashed #c3d0d9; text-align:left; } #menu .spg_navi .spg_navi_btn .spg_navi_main6 img{ margin:15px 0px 15px 50px; height:15px; } #panel-btn{ display: inline-block; position: relative; width: 48px; height: 48px; background-color: #bcbaa8; float:right; } #panel-btn:hover{ background: #bcbaa8; } #panel-btn-icon{ display: block; position: absolute; top: 45%; left: 33%; width: 30px; height: 2px; margin: -1px 0 0 -7px; background: #ffffff; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after{ display: block; content: ""; position: absolute; top: 50%; left: 0; width: 30px; height: 2px; background: #ffffff; transition: .3s; } #panel-btn-icon:before{ margin-top: -10px; } #panel-btn-icon:after{ margin-top: 8px; } #panel-btn .close{ background: transparent; } #panel-btn .close:before, #panel-btn .close:after{ margin-top: 0; } #panel-btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } #panel-btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .sp_top { display: block; } #pc-side-nav.sidebar { display:none; top: 0; left: 0; /*width: 100%; height:100%;*/ z-index: 2; position: fixed; visibility:hidden; } #pc-side-nav.sidebar a { opacity: 0.8; } #pc-side-nav.sidebar img{ position:absolute; /*top:70%;*/ top:55%; right:0; z-index:1; visibility:visible; width:50px; } .fixed { position: fixed; top: 0; width: 100%; z-index: 100; } .fixed1{ position: fixed; top: 600px; width: 100%; z-index: 99; } .fixed2{ position: fixed; top: 58px; width: 100%; z-index: 99; } /*footer*/ #footer .footer_txt{ width: 640px; margin: 20px auto; text-align: center; overflow: hidden; } }