@charset 'utf-8';
/*	Cascading Style Sheets: style.css 5.2	*/

body		{ margin:0px; padding:0px; color:#000; background:#fff; font:normal normal normal 14px/2em "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif; }
a		{ outline:0px none #fff; background-repeat:no-repeat; text-decoration:none; }
a span,a strong,a em,a small,a img	{ cursor:pointer; }
br		{ letter-spacing:0px; }
div		{ width:auto; height:auto; margin:0px; padding:0px; overflow:hidden; border:0px solid #000; }
hr		{ clear:both; height:1px; color:#000; background:#000; text-align:left; margin:0px; border:0px none #000; display:block; }
img		{ margin:0px; padding:0px; border:0px solid #000; }
form		{ margin:0px; padding:0px; }
select		{ cursor:hand; cursor:pointer; }
h1,h2,h3,h4,h5,h6	{ margin:0px; padding:0px; font-size:100%; line-height:100%; font-weight:normal; font:inherit; }
ul,ol		{ margin:0px; padding:0px; position:relative; }
li		{ margin:0px; padding:0px; display:block; list-style:none outside none; }
li img		{ vertical-align:top;margin:0px;padding:0px; }
li a img		{ vertical-align:top;margin:0px;padding:0px; }
dl		{ clear:both; float:left; display:inline; width:100%; margin:0px; padding:0px; }
dt		{ clear:both; float:left; display:block; width:15%; margin:0px; padding:0px; }
dd		{ clear:none; float:left; display:block; width:85%; margin:0px; padding:0px;  }
table		{ border-collapse:collapse; border-spacing: 0px; border:0px solid #ccc; table-layout:fixed; empty-cells:show; margin:0px; padding:0px; }
td,th		{ margin:0px; padding:0px; }
strong,em	{ font-style:normal; font-weight:normal; }



body	{ width:100%; text-align:center; color:#000; }
a	{ color:#000; }
input[type="button"],input[type="submit"] { -webkit-appearance:none; }


header{ width:95%; float:left; padding:10px 2.5% 0 2.5%; background:#fff; position:relative; z-index:25; }
header .LOGO{ float:left; font:normal normal normal 40px/1.2em impact; }
header .LOGO img{ width:205px; float:left; margin:7px 0 0 0; }
header #panel-btn{ display:inline-block; position:relative; width:40px; height:40px; float:left; margin:5px 20px 20px 0; }
header #panel-btn:hover{}
header #panel-btn-icon{ display:block; position:absolute; top:50%; left:0; width:40px; height: 6px; margin:-3px 0 0 0; background:#000; transition:.2s; }
header #panel-btn-icon:before, #panel-btn-icon:after{ display:block; content:""; position:absolute; top:50%; left:0; width:40px; height:6px; background:#000; transition:.3s; }
header #panel-btn-icon:before{ margin-top:-17px; }
header #panel-btn-icon:after{ margin-top:11px; }
header #panel-btn .close{ background:transparent; }
header #panel-btn .close:before, #panel-btn .close:after{ width:45px; margin-top:0; }
header #panel-btn .close:before{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
header #panel-btn .close:after{ transform:rotate(-135deg); -webkit-transform: rotate(-135deg); }

header #p-btn	{ width:240px; display:none; float:left; background:#fff; border:1px solid #ccc; border-bottom:none; position:absolute; top:74px; z-index:10; text-align:left; }
header #p-btn li	{ width:100%; float:left; clear:both; border-bottom:1px solid #ccc; }
header #p-btn li a	{ width:95%; height:40px; padding:0 2.5%; float:left; line-height:40px; }

header .panel{ width:46px; float:right; margin:3px 0 0 10px; }
header #panel-login{ width:40px; height:40px; float:right; border:3px solid #000; text-align:center; }
header #panel-login:hover{ background:#f0f0f0; }
header #panel-login.CLIP_CHOICE{ background:linear-gradient(#fff 40%, #f199bf 40%); }
header #panel-login.CLIP_CHOICE:hover{ background:#fff; background:linear-gradient(#fff 40%, #f9d6e5 40%); }
header #panel-login img{ width:auto; height:26px; float:left; margin:7px 0 0 13px; vertical-align:middle; }
header #panel-login img.C_CHOICE{ margin:4px 0 0 13px; }
header #panel-login span{ width:40px; float:right; margin:-3px 0 0 0; font-size:10px; line-height:1.2em; }
header .panel em{ width:120%; float:right; margin:3px -10% 0 -10%; text-align:center; font-size:10px; line-height:1.2em; }
#p-login{ width:100%; height:100%; float:left; display:none; background:#fff; position:fixed; top:0; left:0; z-index:30; overflow-y:scroll; }
#p-login .LOGIN_NAME{ width:95%; float:left; padding:17px 2.5%; border-top:1px solid #ccc; border-bottom:1px solid #ccc; position:relative; z-index:100; overflow:visible; text-align:left; font-size:24px; line-height:1.2em; }
#p-login .LOGIN_NAME .LOGIN_N{ font-size:24px; line-height:2em; }
#panel-login-close{ width:80px; height:40px; float:right; margin:0 0 0 1.5%; border:1px solid #ccc; text-align:center; font-size:14px; line-height:40px; }
#panel-login-close:hover{ opacity:0.7; }
#panel-login-close img{ width:5px; margin:0 0 0 10px; transform:rotate(180deg); vertical-align:middle; }
.PANEL_NEW{ height:40px; float:right; margin:0 0 0 1.5%; padding:0 1%; border:1px solid #ccc; background:#fff; text-align:center; font-size:14px; line-height:40px; cursor:pointer; }
.PANEL_NEW:hover{ opacity:0.7; }
.PANEL_NEW em{ width:18px; height:2px; float:right; margin:19px 0 0 10px; background:#333; cursor:pointer; }
.PANEL_NEW em:after{ content:""; width:2px; height:18px; float:right; margin:-8px 8px 0 0; background:#333; }
.NEW_CUS{ width:240px; float:right; padding:20px; display:none; border:5px solid #eee; background:#fff; position:absolute; top:60px; right:2.5%; }
.NEW_CUS dt{ width:100%; float:left; font-size:16px; line-height:1.2em; }
.NEW_CUS dd{ width:100%; float:left; margin:5px 0 10px 0; }
.NEW_CUS input[type="text"]{ width:220px; float:left; font-size:16px; }
.NEW_CUS input[type="password"]{ width:120px; float:left; font-size:16px; }
.NEW_CUS input[type="submit"]{ width:20%; float:right; margin:10px 40% 0 0; background:#666; border:none; color:#fff; font-size:14px; line-height:26px; letter-spacing:0.2em; cursor:pointer; }
.CUS_CLEAR{ width:auto; float:right; margin:0 1.5% 0 0; padding:0; text-align:center;  }
.CUS_CLEAR input{ width:auto; height:40px; float:left; border:none; background:none; border:1px solid #ccc; font-size:14px; line-height:40px; cursor:pointer;}
.NEW_STAFF{ width:240px; float:right; padding:20px; display:none; border:5px solid #eee; background:#fff; text-align:left; position:absolute; top:137px; right:2.5%; }
.NEW_STAFF dt{ width:100%; float:left; font-size:16px; line-height:1.2em; }
.NEW_STAFF dd{ width:100%; float:left; margin:5px 0 10px 0; }
.NEW_STAFF input[type="text"]{ width:220px; float:left; font-size:16px; }
.NEW_STAFF input[type="password"]{ width:120px; float:left; font-size:16px; }
.NEW_STAFF input[type="submit"]{ width:20%; float:right; margin:10px 40% 0 0; background:#666; border:none; color:#fff; font-size:14px; line-height:26px; letter-spacing:0.2em; cursor:pointer; }

#p-login p{ width:95%; float:left; margin:20px 0 0 2.5%; text-align:left; }
#p-login .CUSTOMER{ width:95%; min-height:370px; float:left; padding:30px 2.5%; border-bottom:1px solid #ccc; }
#p-login .CUSTOMER_NAME{ width:100%; float:left; text-align:left; position:relative; z-index:5; overflow:visible; }
#p-login .CUSTOMER_NAME strong{ font-size:25px; margin:0 20px 0 0; }
#p-login .CUSTOMER_NAME span.CUSTOMER_SAVE{ font-size:18px; margin:0 20px 0 0; }
#p-login .CUSTOMER_NAME a{ color:#0af; }
#p-login .CUSTOMER_NAME a:hover{ text-decoration:underline; }
#p-login .CUSTOMER_NAME .DELETE{ width:auto; float:right; margin:10px 20px 0 0; }
#p-login .CUSTOMER_NAME .DELETE input[type="submit"]{ border:none; background:none; color:#0af; font-size:14px; cursor:pointer; }
#p-login .CUSTOMER_NAME .DELETE input[type="submit"]:hover{ text-decoration:underline; }
#p-login .CUSTOMER_NAME span.STAFF_ADD{ width:40px; height:40px; float:right; border:2px solid #000; font-size:40px; position:relative; cursor:pointer; }
#p-login .CUSTOMER_NAME span.STAFF_ADD:hover{ background:#f0f0f0; }
#p-login .CUSTOMER_NAME span.STAFF_ADD .STAFF_ADD_PLUS{ width:30px; height:3px; float:left; background:#000; position:absolute; top:19px; left:5px; transition:.3s; }
#p-login .CUSTOMER_NAME span.STAFF_ADD .STAFF_ADD_PLUS:after{ content:""; width:3px; height:30px; float:left; position:absolute; top:-14px; left:13px; background:#000; }
#p-login .CUSTOMER_NAME span.STAFF_ADD .STAFF_ADD_CLOSE{ transform:rotate(45deg); transition:.3s; }
#p-login .CUSTOMER_NAME .PLUS{ width:auto; float:right; padding:20px; display:none; border:5px solid #eee; background:#fff; position:absolute; top:44px; right:0; }
#p-login .CUSTOMER_NAME .PLUS strong{ width:100%; float:left; font-size:16px; }
#p-login .CUSTOMER_NAME .PLUS span{ width:100%; float:left; }
#p-login .CUSTOMER_NAME .PLUS hr{ width:100%; float:left; margin:10px 0; background:none; border-bottom:1px solid #ccc; }
#p-login .CUSTOMER_NAME .PLUS form{ width:100%; float:left; }
#p-login .CUSTOMER_NAME .PLUS form input[type="text"]{ width:75%; float:left; font-size:16px; }
#p-login .CUSTOMER_NAME .PLUS form input[type="submit"]{ width:20%; float:right; background:#666; border:none; color:#fff; font-size:14px; line-height:26px; letter-spacing:0.2em; cursor:pointer; }
#p-login .C_LIST{ width:100%; float:left; margin:0; position:relative; x-index:0; }
#p-login .C_LIST ul{ width:102%; float:left; margin:10px 0 30px 0; display:flex; flex-direction:row; flex-wrap:wrap;}
#p-login .C_LIST ul li{ width:18%; float:left; display:inline-block; clear:none; margin:0 2% 20px 0; }
#p-login .C_LIST ul li a{ width:100%; float:left; }
#p-login .C_LIST ul li a:hover{ opacity:0.7; }
#p-login .C_LIST ul li a:active{ opacity:0.7; }
#p-login .C_LIST ul li a img.ZUMEN{ width:99.5%; float:left; border:1px solid #ccc; }
#p-login .C_LIST ul li a img.PHOTO{ width:100%; float:left; }
#p-login .C_LIST ul li span.TAG{ width:100%; float:left; margin:5px 0 0 0; }
#p-login .C_LIST ul li span.TAG span.NO{ width:auto; float:left; margin:0 10px 0 0; text-align:left; font-weight:bold; }
#p-login .C_LIST ul li span.TAG span.TASTE{ width:auto; float:left; }
#p-login .C_LIST ul li span.TAG em { height:20px; float:left; margin:3px 5px 0 0; padding:0 15px; color:#fff; font-size:11px; line-height:20px; }
#p-login .C_LIST ul li span.TAG em.TASTE1{ background:#9acad4; }
#p-login .C_LIST ul li span.TAG em.TASTE2{ background:#cfb881; }
#p-login .C_LIST ul li span.TAG em.TASTE3{ background:#cfb881; }
#p-login .C_LIST ul li span.TAG em.TASTE4{ background:#bdad9d; }
#p-login .C_LIST ul li span.TAG em.TASTE5{ background:#a4c1a4; }
#p-login .C_LIST ul li span.TAG em.TASTE6{ background:#c2afd7; }
#p-login .C_LIST ul li span.TAG em.TASTE7{ background:#bdad9d; }
#p-login .C_LIST ul li span.TAG em.TASTE8{ background:#bdad9d; }
#p-login .C_LIST ul li span.TAG em.TASTE9{ background:#c2afd7; }
#p-login .C_LIST ul li span.TAG em.TASTE10{ background:#a4c1a4; }
#p-login .C_LIST ul li span.TAG em.TASTE11{ background:#cfb881; }
#p-login .C_LIST ul li span.TAG img.TYPE_ICON{ width:25px; float:right; }
#p-login .C_LIST ul li strong{ width:100%; float:left; margin:0 0 5px 0; text-align:left; font-weight:bold; line-height:1.2em; }
#p-login .C_LIST ul li span.OUTLINE{ width:100%; float:left; text-align:left; font-size:10px; line-height:1.5em; }
#p-login .C_LIST ul li span.OUTLINE .LI_OUTLINE{ float:left; margin:0 10px 0 0; }
#p-login .C_LIST ul li span.PART{ width:100%; float:left; margin:0 0 5px 0; text-align:left; font-size:11px; line-height:1.2em; }
#p-login .C_LIST ul li span.PART img{ width:4px; margin:0 5px 0 0; vertical-align:middle; }

header .SEARCH{ width:auto; float:right; margin:20px 0 0 0; border-bottom:2px solid #000; }
header .SEARCH select{ float:left; padding:0 10px 0 25px; background-color:#fff; background-image:url(/img/icon_search.png),url(/img/arrow_d.png); background-repeat:no-repeat,no-repeat; background-position:2% 50%, 98% 50%; background-size:15px auto, 5px auto; border:none; font-size:14px; -moz-appearance:none; -webkit-appearance:none; }
header .SEARCH .ITEM{ width:275px; height:22px; float:left; position:relative; }
header .SEARCH input[type="text"]{ width:250px; float:left; margin:0 0 0 10px; padding-left:20px; border:none; border-left:1px solid #ccc; font-size:16px; line-height:1.2em; position:absolute; top:0; left:0; }
header .SEARCH input#item1{ display:inline; }
header .SEARCH input#item2{ display:none; }
header .SEARCH input[type="submit"]{ width:auto; float:right; clear:none; margin:0 0 0 10px; padding:5px 10px; background:#000; border:none; border-radius:0px; color:#fff; font-size:14px; line-height:1.2em; }

header ul.P{ float:right; margin:20px 20px 0 0; border-left:1px solid #0af; }
header ul.P li{ float:left; padding:0 15px; line-height:1.2; border-right:1px solid #0af; }
header ul.P li a{ color:#0af; }
header ul.P li a:hover{ text-decoration:underline; }
header ul.P li a:active{ text-decoration:underline; }
header ul.P li a strong{ display:block; clear:both; }
header ul.P li a span{ display:block; clear:both; font-size:10px; }

.SEARCH_BAR{ width:100%; float:left; background:url(../img/h_bg.png); background-size:8px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; position:relative; overflow:visible; }
.SEARCH_BAR dl{ width:auto; height:35px; padding:20px 0 20px 2.5%; position:relative; overflow:visible; }
.SEARCH_BAR dl dt{ width:70px; float:left; margin:0 10px 0 0; text-align:left; line-height:35px; font-weight:bold; letter-spacing:0.1em; }
.SEARCH_BAR dl dd{ width:auto; float:left; margin:0 10px 0 0; overflow:visible; }
.SEARCH_BAR div.P_PART{ width:auto; height:35px; float:left; margin:20px 20px 20px 2.5%; overflow:visible; }
.SEARCH_BAR a.P_BOTTON{ min-width:100px; height:35px; display:block; padding:0 20px 0 30px; background-color:#fff; background-image:url(/img/icon_search.png),url(/img/arrow_d.png); background-repeat:no-repeat,no-repeat; background-position:5% 50%, 98% 50%; background-size:15px auto, 5px auto; border:1px solid #666; text-align:left; font-size:14px; line-height:35px; }
.SEARCH_BAR a.CUR{ background-color:#ffc; }
.SEARCH_BAR a#panel-taste{ width:150px; }
.SEARCH_BAR a.CURRENT{ background-color:#eee; }
.SEARCH_BAR ul.P_HIDDEN{ display:none; background:#fff; z-index:20; }
.SEARCH_BAR ul.P_HIDDEN li{ height:35px; clear:both; line-height:35px; border:1px solid #ccc; border-top:none; }
.SEARCH_BAR ul.P_HIDDEN li a{ width:90%; height:35px; float:left; padding:0 5%; text-align:left; color:#999; }
.SEARCH_BAR ul.P_HIDDEN li a.CURRENT{ color:#000; font-weight:bold; }
.SEARCH_BAR ul.P_HIDDEN li a:hover{ background:#f0f0f0; }
.SEARCH_BAR ul.P_HIDDEN li a:active{ background:#f0f0f0; }

.SEARCH_BAR select{ min-width:150px; height:35px; padding:0 10px 0 20px; background-image:url(/img/icon_search.png),url(/img/arrow_d.png); background-repeat:no-repeat,no-repeat; background-position:2% 50%, 98% 50%; background-size:15px auto, 5px auto; border:1px solid #666; font-size:14px; -moz-appearance:none; -webkit-appearance:none; }
.SEARCH_BAR select:hover{ background-color:#ddd; }
.SEARCH_BAR select:active{ background-color:#ddd; }
.SEARCH_BAR a.CLEAR{ height:35px; float:left; padding:0 10px; background:#000; color:#fff; font-size:12px; line-height:33px; }
.SEARCH_BAR a.CLEAR:hover{ opacity:0.7; }
.SEARCH_BAR a.CLEAR:active{ opacity:0.7; }

.SEARCH_BAR ul.LIST{ width:auto; height:27px; float:right; margin:24px 2.5% 24px 0; }
.SEARCH_BAR ul.LIST li{ width:auto; float:left; margin:0 0 0 10px; }
.SEARCH_BAR ul.LIST li a{ width:auto; float:left; }
.SEARCH_BAR ul.LIST li a:hover{ opacity:0.7; }
.SEARCH_BAR ul.LIST li a:active{ opacity:0.7; }
.SEARCH_BAR ul.LIST li a img{ width:27px; opacity:0.3; }

a.LINK{ width:100%; height:35px; float:left; display:block; text-align:center; line-height:35px; }
a.LINK:hover{ background:#eee; }
a.LINK:active{ background:#eee; }
a.LINK img{ width:5px; margin:0 0 0 10px; vertical-align:middle; }

footer{ width:95%; display:block; float:left; padding:10px 2.5%; background:url(../img/h_bg.png); background-size:8px; text-align:right; }
footer small{ margin-left:20px; font-size:13px; }
footer a{ font-size:13px; }
footer a:hover{ text-decoration:underline; }
footer a:active{ text-decoration:underline; }