@charset "euc-jp";
/*=============================================
===============================================
=============== jsp-common.css ================
===============================================
===============================================
LastUpDate:18.05.24
=============================================*/



/*CommonStyle***************************************************************************************/

/*Reset*/
html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, 
dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}


/**============================================================================================**/


/*display*/
.dis-blk{display:block;}
.dis-ilblk{display:inline-block;}
.dis-non{display:none;}
.dis-tbl,
.dis-tbl01,
.dis-tbl02,
.dis-tbl03,
.dis-tbl04,
.dis-tbl05{display:table;}
.dis-tbl_tab,
.dis-tbl_tab01,
.dis-tbl_tab02,
.dis-tbl_tab03,
.dis-tbl_tab04,
.dis-tbl_tab05{display:table; table-layout: fixed;}
.dis-tblcl,
.dis-tblcl01,
.dis-tblcl02,
.dis-tblcl03,
.dis-tblcl04,
.dis-tblcl05{display:table-cell;}
.dis-tblcm{display:table-column;}


/*position*/
.posi-abs{position:absolute;}
.posi-fix{position:fixed;}
.posi-rlt{position:relative;}


/*float*/
.rf{float:right;}
.lf{float:left;}


/*clear*/
.clearfix:after {display: block; clear:both; content: "";}

.cl{clear:both;}
.clb{clear:both; visibility:hidden; margin:0; padding:0;}


/*margin*/
.m-0{margin:0;}
.m-0a{margin:0 auto;}

.m-5{margin:5px;}
.m-15{margin:15px;}
.m-10{margin:10px;}
.m-20{margin:20px;}

.m-tb5{margin:5px 0;}
.m-tb10{margin:10px 0;}
.m-tb15{margin:15px 0;}
.m-tb20{margin:20px 0;}
.m-tb30{margin:30px 0;}

.m-t5{margin:5px 0 0 0;}
.m-t10{margin:10px 0 0 0;}
.m-t15{margin:15px 0 0 0;}
.m-t20{margin:20px 0 0 0;}
.m-t25{margin:25px 0 0 0;}
.m-t30{margin:30px 0 0 0;}
.m-t35{margin:35px 0 0 0;}
.m-t40{margin:40px 0 0 0;}
.m-t45{margin:45px 0 0 0;}
.m-t50{margin:50px 0 0 0;}
.m-t55{margin:55px 0 0 0;}
.m-t60{margin:60px 0 0 0;}

.m-b5{margin:0 0 5px 0;}
.m-b10{margin:0 0 10px 0;}
.m-b15{margin:0 0 15px 0;}
.m-b20{margin:0 0 20px 0;}
.m-b25{margin:0 0 25px 0;}
.m-b30{margin:0 0 30px 0;}
.m-b35{margin:0 0 35px 0;}
.m-b40{margin:0 0 40px 0;}
.m-b45{margin:0 0 45px 0;}
.m-b50{margin:0 0 50px 0;}
.m-b55{margin:0 0 55px 0;}
.m-b60{margin:0 0 60px 0;}


/*padding*/
.p_0{padding:0;}

.p_5{padding:5px;}
.p_10{padding:10px;}
.p_15{padding:15px;}
.p_20{padding:20px;}
.p_25{padding:25px;}
.p_30{padding:30px;}


/*color*/
.red{color:#FF0004;}
.orange{color:#FF670E;}
.yellow{color:#ffe207;}
.green{color:#13AD0D;}
.teal{color:#20c997;}
.cyan{color:#31d5f9;}
.blue{color:#0074FF;}
.navy{color:#101c7c;}
.purple{color:#AF65E7;}
.pink{color:#FC8FE0;}
.dark{color:#606060;}
.gray{color:#adadad;}
.light{color:#e0e0e0;}
.black{color:#000;}
.white{color:#fff;}



/*font*/
.fw_b{font-weight:bold;}

.fs_08{font-size:0.8em;}
.fs_09{font-size:0.9em;}
.fs_10{font-size:1.0em;}
.fs_11{font-size:1.1em;}
.fs_12{font-size:1.2em;}
.fs_13{font-size:1.3em;}
.fs_14{font-size:1.4em;}
.fs_15{font-size:1.5em;}
.fs_16{font-size:1.6em;}
.fs_17{font-size:1.7em;}
.fs_18{font-size:1.8em;}
.fs_19{font-size:1.9em;}
.fs_20{font-size:2.0em;}
.fs_23{font-size:2.3em;}
.fs_25{font-size:2.5em;}
.fs_27{font-size:2.7em;}
.fs_30{font-size:3.0em;}
.fs_35{font-size:3.5em;}
.fs_40{font-size:4.0em;}


/*text*/
.ta_l {text-align:left;}
.ta_c {text-align:center;}
.ta_r {text-align:right;}

.txd_unl{text-decoration:underline;}
.txd_non{text-decoration:none;}
.txd_ovl{text-decoration:overline;}


/*align*/
.vat{vertical-align:top;}
.vam{vertical-align:middle;}
.vab{vertical-align:bottom;}

/**============================================================================================**/

/**============================================================================================**/
/* フォント指定 */
body{
    padding: 60px 0 0;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    }

.w600 {max-width: 600px;}
a { color: #333; transition: all 0.4s;}
a:hover { color: #0066cc;}

/* 
　23.11.30
　臨時休業（NNM・RNS共通）などの案内でRNS用の記述をOFFにする 
*/
.nnmoff{display:none;}

/**============================================================================================**/
/* 背景の設定 */
body::after {
    content: '';
    display: block; position: fixed; top: 0; right: 0; left: 0; z-index: -2;
    width: 100%; height: 100%;
    background: url("../images/top/main_bg.png") top center;}

#left-logo {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-align-items: center;
    align-items: center;
    position: fixed; top: 0; left: 0;
    box-sizing: border-box; width: 100vw; height: 100vh; padding: 0 920px 0 15px;}

#left-logo div { display: table; width: 100%; max-width: 890px;}
#left-logo p { display: table-cell; vertical-align: top;}
#left-logo p:nth-of-type(1) { width: 52.24%;}
#left-logo p:nth-of-type(2) { width: 47.76%;}
#left-logo img { width: 100%; height: auto;}

@media screen and (max-width:1599px){
#left-logo div,
#left-logo p { display: block;}
#left-logo p:nth-of-type(1) { width: 100%; max-width: 465px;}
#left-logo p:nth-of-type(2) { width: 91.39%; max-width: 425px;}
}

@media screen and (max-width:1229px){
#left-logo { display: none;}
}

/**========================================**/

header {
    position: fixed; top: 0; left: 0; z-index: 2;
    width: 100%; height: 60px; 
    background: #005BAB;}

header .w600 {
    position: absolute; top: 0; right: 300px;
    box-sizing: border-box; width: 100%; padding: 0 0 0 60px;
    }

@media screen and (max-width:1229px){
header .w600 {
    position: relative; right: auto;
    padding: 0 10px 0 60px;
    }
}
    
/* ネオネットマリン アイコン */    
header h1 { 
    position: absolute; top: 8px; left: 10px;
    width: 45px; height: 45px; 
    }

/* 商品検索・買物カゴ・メニュー（共通） */
header ul { font-size: 0;} 
header li { 
    display: inline-block; 
    margin: 15px 0 0 40px; 
    font-size: 14px; line-height: 1.0em;}

header li a,
header li div {
    display: block; position: relative;
    box-sizing: border-box; height: 35px; padding: 10px 0 0 45px;
    color: #fff; text-decoration: none;
    cursor: pointer;}


header li a:hover,
header li div:hover { color: #fff;}

header li a::before,
header li div::before {
    content: '';
    display: block; position: absolute; top: 0; left: 0;
    width: 35px; height: 35px;}

@media screen and (max-width:499px){
header li { margin: 5px 0 0 30px; font-size: 12px; line-height: 1.0em;}

header li a,
header li div { padding: 38px 0 0;}

header li a::before,
header li div::before { left: 50%; margin: 0 0 0 -17px;}
}

/* 商品検索 */
header li div#search-btn::before { background: url("../images/top/head_btn01.png");}

/* 買物カゴ */
header li a::before { background: url("../images/top/head_btn02.png");}

/* メニュー */
header li div#nav-btn::before { background: url("../images/top/head_btn03.png");}

/**========================================**/
/* グローバルメニュー */
#nav-area a { display: inline-block; padding: 5px; color: #fff; text-decoration: none;}
#nav-area a:hover { border-radius: 3px; background: #aaa; }

/* 閉じるボタン */
#nav-btn_cl { cursor: pointer; }
#nav-btn_cl {
    display: block; position: absolute; top: 8px; right: 10px; z-index: 10003;
    box-sizing: border-box; width: 32px; height: 32px; padding: 3px;
    border: solid 1px #fff;
    cursor: pointer; }
#nav-btn_cl::before,
#nav-btn_cl::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 20px; height: 3px;
    background: #fff; }
#nav-btn_cl::before {
    transform: translateX(-50%) translateY(-1px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(45deg); }
#nav-btn_cl::after {
    transform: translateX(-50%) translateY(-1px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-1px) rotate(-45deg); }



/* メニューが開いた時にスクロールをblock
#nav-top.noscroll {
    overflow-y: hidden;
    box-sizing: border-box; height: 100vh; }
 */
 
/* グローバルメニュー表示エリア */
#nav-bg {
    position: fixed; top: 60px; left: 0; z-index: 20000;
    width: 0vw; height: 100vh; margin: 0;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: background 0.8s; }

#nav-bg.slide-in { width: 100vw;}

#nav-area {
    position: fixed; top: 60px; left: auto; right: 0; z-index: 20002;
    box-sizing: border-box; width: 300px; height: 100%; padding: 15px 10px 10px;
    background: #444;
    transform: translateX(100%); transition: 0.8s; }

#nav-area.slide-in {
    transform: translateX(0);
    transition: 0.8s; }

@media screen and (max-width:599px){
#nav-area { width: 100%; padding: 5px 10px 10px;}
#nav-area > div { 
    overflow-y: scroll;
    height: 81vh; margin: 10px 0 0; padding: 0 10px 0 0;
}
#nav-area > div::-webkit-scrollbar { width: 8px;}
#nav-area > div::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 1.0);}
#nav-area > div::-webkit-scrollbar-thumb {background-color: rgba(150, 150, 150, 1.0);}

}

/**========================================**/
/* ユーザーネーム */
#nav-area .guest {
    margin: 0 0 10px 10px; 
    color: #fff; font-size: 16px; line-height: 1.5em;}

#nav-area .user_name {
    display: table; table-layout: fixed;
    width: 100%; margin: 0 0 5px;}

#nav-area .user_name::before {
    content: url("../images/top/people_ico.png");
    display: table-cell;
    width: 27px; padding: 0 10px;
    vertical-align: middle;}

#nav-area .user_name span {
    display: table-cell;
    color: #fff; font-size: 16px; line-height: 1.2em; vertical-align: middle;}

/* ユーザーポイント */
#nav-area .user_point { 
    margin: 0 0 5px; padding: 10px 0 10px 49px;
    color: #fff; font-size: 16px; line-height: 1.2em;}

/**========================================**/
/* ログイン*/
#nav-area .login { display: table; table-layout: fixed; width: 100%;}

#nav-area .login::before {
    content: url("../images/top/people_ico.png");
    display: table-cell;
    width: 27px; padding: 0 10px 0 0;
    vertical-align: middle;}

#nav-area .login a {
    display: table-cell;
    font-size: 16px; line-height: 1.2em; vertical-align: middle;}

/*・ログアウト */
#nav-area .logout {
    padding: 5px 0;
    border-top: solid 1px #fff;
    text-align: right;}

#nav-area .logout a {
    display: inline-block; position: relative;
    padding: 5px 40px 5px 5px;
    text-decoration: none;}

#nav-area .logout a::after {
    content: '';
    display: block; position: absolute; top: 0; right: 0;
    width: 30px; height: 30px;}

#nav-area .logout a::after { background: url("../images/top/logout_ico.png");}

/* グローバルナビ リンク */
#nav-area ul { padding: 10px 0 0; border-top: solid 1px #fff;}
#nav-area ul li { 
    position: relative; 
    margin: 0 0 10px; padding: 0 0 5px 5px;
    border-bottom: solid 1px #666;} 

/**============================================================================================**/

/**============================================================================================**/
 /* NaviPlus */
#naviplus .dis-tbl_tab { width: 100%; margin: 0 0 15px;}

#naviplus .dis-tblcl01 { 
    padding: 5px 5px 5px 60px; 
    border: solid #707070; border-width: 1px 0px 1px 1px; border-radius: 20px 0 0 20px;}
    
#naviplus .dis-tblcl02 { 
    width: 26px; padding: 8px 15px 0px 5px; 
    border: solid #707070; border-width: 1px 1px 1px 0px; border-radius: 0 20px 20px 0;}

/* 検索カテゴリ */
#category_grp { position: absolute; top: 5px; left: 10px;}

/* 全て */
#select_category_btn {
    width: 40px; height: 35px; padding: 0;
    border: none; background: transparent;
    color: #333; cursor: pointer;}
 
/* 検索カテゴリ　カテゴリ一覧 */
#category_options {
    display: none; position: absolute; top: 35px; left: 0; z-index: 1;
	width: 160px; padding: 5px; 
	border: none; background:#fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	color: #333; font-size: 12px; cursor: pointer;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;}

#category_options:focus { outline: none;}
 
/* キーワード入力欄 */ 
#search_text {
    box-sizing: border-box; width: 100%; height: 35px;
    border: none;
    font-size: 16px;
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;}
    
#search_text:focus {outline: none;}
 
 /* 送信ボンタン */
#naviplus input[type="submit"] {
    width: 26px; height: 26px; padding: 0;
    border: none; background: url(../images/top/search_btn.png);
    cursor: pointer;} 

/**========================================**/
/* ナビプラス サジェストリスト */
#saggest_list {
    position: absolute; bottom: 0; left: 30px; z-index: 1;
    box-sizing: border-box; width: 100%; margin: 0;
    opacity: 0;}

#search_text:focus ~ #saggest_list { opacity: 1;}


#saggest_list .inner{
    position: absolute; 
    width: 100%; padding:5px 0 0; 
    border: solid 1px #ddd; background:#FFF;}
    
#saggest_list ul li{ height:28px; background: transparent;}
#saggest_list ul li:hover{ background: #eee;}
#saggest_list ul li > div:not(.smart_suggest){
	display:inline-block;
	width:13%; height:20px; margin:0 1%; 
    background:#AAA;
	color:#FFF; font-size:13px; text-align:center; line-height:20px;}

#saggest_list ul.sg_item li > div{ background:#3e8abb;}
#saggest_list ul.sg_brand li > div{ background:#1fa38b;}

#saggest_list ul li a{
	display:inline-flex; overflow:hidden;
	width:80%; height:20px;
	color:#555; font-size:13px; line-height:20px; vertical-align:top;
	text-decoration:none; text-overflow: ellipsis;}

/**========================================**/
/* スマートサジェスト */
#saggest_list .sg_item .smart_suggest {
  display: none; position: relative; top: -28px; left: -260px;
  width: 250px; padding: 5px;
  background: #fff; border: solid 1px #ddd;
  font-size: 13px;}

#saggest_list .sg_item .smart_suggest p { font-weight: bold;}

#saggest_list .sg_item .smart_suggest img { width: 100px;}
#saggest_list .sg_item .smart_suggest a.itembtn::before {
  content: url(../images/icon/icon_search_small.png);
}

#saggest_list .sg_item .smart_suggest a.itembtn {
  width: auto; padding: 3px 10px;
  border-radius: 5px; background: #000;
  color: #fff;}

#saggest_list .sg_item li:hover .smart_suggest { display: block;}

@media screen and (max-width: 900px) {
  #saggest_list .sg_item li:hover .smart_suggest { display: none;}
}

/* */
#saggest_list .keyword_inner{
    position: absolute; 
    width: 100%; padding: 0; 
    border: 1px solid #ddd; background:#FFF;}

#saggest_list ul.sg_keyword li:first-child {
  background: #ccc;
  font-weight: bold;}

#saggest_list ul.sg_keyword li:hover:not(:first-child) { background: #eee;}

#saggest_list ul.sg_keyword li:not(:first-child) { background: transparent;}

#saggest_list ul.sg_keyword li { padding : 3px;}

@media screen and (max-width:499px){
#saggest_list ul li > div{width:24%;}
#saggest_list ul li a{width:74%;}
}

/**========================================**/
/* 注目アイテム */
/*
#naviplus .search_wrap { overflow-x: scroll; white-space: nowrap;}
#naviplus .search_wrap::-webkit-scrollbar { height: 10px;}
#naviplus .search_wrap::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: rgba( 150, 150, 150, 0.8);}
*/
#naviplus .search_word { 
    position: relative; 
    margin: 0 0 0 30px; padding: 2px 0 0 115px;
    font-size: 14px;}
    
#naviplus .search_word::before {
    content: '注目アイテム：';
    position: absolute; top: 0; left: 0;
    font-size: 16px;}
    
#naviplus .search_word a { display: inline-block; margin: 0 10px 10px 0; }
#naviplus .search_word a:hover { text-decoration: underline;}

@media screen and (max-width:599px){
#naviplus .search_word {margin: 0;}
}

/**========================================**/
/* 閉じるボタン */
#search-btn_cl { cursor: pointer; }

/* グローバルメニュー表示エリア */
#search-bg {
    position: fixed; top: 60px; left: 0; z-index: 10000;
    width: 100vw; height: 100vh; margin: 0;
    background: rgba(0, 0, 0, 0.0);
    opacity: 0; cursor: pointer;
    transform: translateY(-200%);
    transition: background 0.8s, opacity 0.8s;}

#search-area {
    position: fixed; top: 50%; left: auto; right: 50%; z-index: 10002;
	overflow: scroll;
    box-sizing: border-box; width: 560px; height: 600px; margin: -274px -280px 0 0; padding: 50px 10px 10px;
    background: rgba(255, 255, 255, 0.0);
    opacity: 0; transform: translateY(-200%);
    transition: background 0.8s, opacity 0.8s;}


#search-bg.fade,
#search-area.fade {
    opacity: 1;
    transform: translateY(0%);
    transition: background 0.8s, opacity 0.8s;}
    
#search-bg.fade { background: rgba(0, 0, 0, 0.6);}
#search-area.fade { background: rgba(255, 255, 255, 1.0);}




/* 閉じるボタン */
#search-btn_cl {
  display: block; position: absolute; top: 4px; right: 5px; z-index: 10003;
  width: 40px; height: 40px;
  cursor: pointer; }
  
#search-btn_cl::before,
#search-btn_cl::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 30px; height: 6px;
    background: #18a6cb; }
    
#search-btn_cl::before {
    transform: translateX(-50%) translateY(-3px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-3px) rotate(45deg); }

#search-btn_cl::after {
    transform: translateX(-50%) translateY(-3px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-3px) rotate(-45deg); }

@media screen and (max-width:599px){
#search-area { 
    right: 0;
    width: 96%; height:auto; margin: -200px 2% 0; padding: 50px 5px 10px;}

/* スクロールバーの装飾 */
#search-area > div { 
    overflow-y: scroll;
    height: 400px; padding: 0 10px;
}
#search-area > div::-webkit-scrollbar { width: 8px;}
#search-area > div::-webkit-scrollbar-track {background-color: rgba(230, 230, 230, 0.7);}
#search-area > div::-webkit-scrollbar-thumb {background-color: rgba(190, 190, 190, 0.8);}
}




/**========================================**/
/* オリジナル検索システム・その他検索方法（共通） */
#original-search h3,
#other-search h3 {
    margin: 50px 0 0; padding: 0 0 5px; 
    border-bottom: solid 2px #000;
    font-size: 16px;}

/**========================================**/
/* オリジナル検索システム */
#original-search { margin: 50px 0 0;}
#original-search ul { font-size: 0;}
#original-search li { 
    display: inline-block; 
    box-sizing: border-box; width: 25%; margin: 15px 0 0; padding: 0 5px;
    vertical-align: top;}

#original-search li:nth-of-type(2) a { letter-spacing: -0.15em;}

#original-search a { 
    display: block; position: relative;
    padding: 10px 0;
    border: solid 2px #333; border-radius: 10px;
    font-size: 18px; font-weight: bold; text-align: center; text-decoration: none;}

#original-search a:hover { background: #ddd; color: #333;}


/* 右下の直角三角形 */
#original-search a::after {
    content: ' ';
    display: inline-block; position: absolute; right: 5px; bottom: 5px;
    width: 0; height: 0;
    border-style: solid; border-width: 0 0 10px 10px;
    border-color: transparent transparent #333;}


@media screen and (max-width:599px) and (min-width:500px){
#original-search a { font-size: 15px;}
}

@media screen and (max-width:499px){
#original-search li { width: 50%;}
}

@media screen and (max-width:399px){

}

/**========================================**/
/* その他検索方法 */
label[for="menu_bar01"],
#other-search .no_order,
#other-search .history {
    display: block; position: relative; 
    box-sizing: border-box; height: 60px; padding: 18px 0 0 60px;
    border: solid #707070;
    color: #333; font-size: 16px; text-decoration: none;}
    
label[for="menu_bar01"] { border-width: 1px 1px 0;}    
#other-search .no_order { border-width: 1px;}
#other-search .history { border-width: 0 1px 1px;}
    
label[for="menu_bar01"]:hover,
#other-search .no_order:hover,
#other-search .history:hover { background: #ddd;}
    
label[for="menu_bar01"]::before,
#other-search .no_order::before,
#other-search .history::before {
    content: '';
    display: block; position: absolute; top: 50%; left: 10px;
    width: 30px; height: 30px; margin: -15px 0 0;}

/* 商品カテゴリから探す */
label[for="menu_bar01"]::before { background: url(../images/top/search_ico01.png);}

/* 商品番号から探す */
#other-search .no_order::before { background: url(../images/top/search_ico02.png);}

/* 閲覧履歴から探す */
#other-search .history::before { background: url(../images/top/search_ico03.png);}

/* アコーディオン 開閉ボタン */
label[for="menu_bar01"]::after {
    content: '+';
    display: inline-block; position: absolute; top: 50%; right: 15px;
    margin: -20px 0 0;
    font-size: 26px; font-weight: 600;}

#other-search .no_order::after,
#other-search .history::after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 15px;
    width: 10px; height: 10px; margin: -8px 0 0;
    border: solid #333; border-width: 3px 3px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

/* アコーディオン 表示・非表示エリア */
.area1 {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; 
  border: solid #707070; border-width: 0; opacity: 0;
  font-size: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;}

.area1 li {
    display: inline-block;
    box-sizing: border-box; width: 50%;}
.area1 li:nth-child(odd) { padding: 5px 5px 5px 10px;}
.area1 li:nth-child(even) { padding: 5px 10px 5px 5px;}
.area1 a { 
    display: block; position: relative;
    box-sizing: border-box; height: 46px; padding: 11px 10px 0;
    border: solid 1px #707070; border-radius: 4px; 
    font-size: 16px; text-decoration: none; vertical-align: top;}
.area1 a:hover { border-color: #0066cc; background: #fff;}
.area1 a::after {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 10px;
    width: 10px; height: 10px; margin: -6px 0 0;
    border: solid #333; border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}
.area1 a:hover::after { border-color: #0066cc;}

/* アコーディオンをクリックした場合 */
#menu_bar01:checked ~ .area1 {
    height:auto; max-height: 500px; padding: 10px 0;
    border-width: 1px 1px 0; background: #eee; 
    opacity: 1;}
    
#menu_bar01:checked ~ label[for="menu_bar01"]::after {
    content: '−';
    }

@media screen and (max-width:499px){
.area1 a { padding: 12px 3px 0; font-size: 14px;}

.area1 a::after {
    width: 6px; height: 6px; margin: -3px 0 0;}
}

@media screen and (max-width:399px){
.area1 li:nth-child(odd) { padding: 3px 3px 3px 5px;}
.area1 li:nth-child(even) { padding: 3px 5px 3px 3px;}

.area1 a { padding: 13px 3px 0; font-size: 13px;}
}

@media screen and (max-width:349px){
.area1 a { padding: 14px 3px 0; font-size: 12px;}
}
/**============================================================================================**/

/**============================================================================================**/
footer { 
    padding: 15px 0;
    background: #ccc; 
    color: #666; font-size: 14px; text-align: center;}

/* LastUp2024.02.12_kimata */