@charset "utf-8";

/************************************************
 import css
************************************************ */

/* トップページ */
#container {
width: 100%;
max-width: 1500px;
min-width: 980px;
}
.LC_Page_Index #container {
width: 100%;
max-width: 1500px;
min-width: 980px;
}

/* 商品一覧 */
.plg_Raku2_LC_Page_Products_List #container {
width: 100%;
max-width: 1500px;
min-width: 980px;
}

/* 商品詳細ページ */
.plg_Raku2_LC_Page_Products_Detail #container {
width: 100%;
max-width: 1500px;
min-width: 980px;
}

.slick-slide img {
width: 980px;
}

#main_column.colnum2{
float: none!important;
width: auto;
/*padding-left: 255px;*/
padding-left: 255px;
/*padding-right: 10px;*/
padding-right: 50px;
}

#main_column.colnum1 #mypagecolumn,
.custom_page #faqarea{
width: 100%;
}

/*---------------------------------------
headerエリア
---------------------------------------*/

.raku2_theme01 #header_wrap #header_wrap_02 {
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #site_description{
	max-width: 1500px;
	margin: 0 auto;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header {
	max-width: 1500px;
	display: flex;
	align-items: end;
	justify-content: space-around;
	margin-bottom: 20px;
}
.raku2_theme01 .-flex0{
	flex-grow: 0;
}
.raku2_theme01 .-flex1{
	flex-grow: 1;
}
.raku2_theme01 .-flex2{
	flex-grow: 2;
}
.raku2_theme01 .-flex3{
	flex-grow: 3;
}
.raku2_theme01 .-box{
	width: 100%;
}
.raku2_theme01 .logo_area {
	margin: 0;
	width: auto;
	text-align: left;
}
.raku2_theme01 .logo_area img {
	max-height: 40px;
}

/*
 * 1. ヘッダーユーティリティ全体をFlexコンテナにし、中の要素を横並びにする
 */
#header_utility {
    display: flex;             /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素を両端に配置する（左端と右端）*/
    align-items: center;       /* 子要素を垂直方向の中央に揃える */
    width: 100%;               /* 確実に横幅全体を使う */
}

/*
 * 2. ログイン/ログアウトエリア内のボタン群を横並びにする
 */
.btn_outer {
    display: flex;
    align-items: center;
    gap: 10px; /* 各ボタン要素間の間隔 */
}

/* ログイン時・未ログイン時共通のボタンエリア（新規会員登録/ログイン/MYページ/ログアウト）を横並びにする */
.btn_outer .layout_left {
    display: flex;
    align-items: center;
    gap: 10px; /* 各ボタン間の間隔 */
}

/* ログイン時のユーザー名とポイント表示を横並びにする（もし必要なら） */
#user_login p {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* カートボタンの数量表示を調整（必要に応じて） */
.cart_btn {
    display: flex;
    align-items: center;
    gap: 5px; /* カートのテキストと数量の間のスペース */
}

/* 必要に応じて、ログインエリア全体も調整 */
#header_login_area {
    display: flex;
    flex-direction: column; /* ユーザー名とボタンエリアを縦に並べる（既存のレイアウトを維持） */
    align-items: flex-end; /* 全体を右寄せにする */
}

/* ログイン後のユーザー情報と、ログアウト/カートのボタン群を横並びにする場合は、
   #header_login_area に display: flex; を適用し、flex-direction: row; などに調整が必要です。
   ここでは、メインのナビとユーティリティエリアの横並びを優先しています。
*/

/* ------------検索ボックス------------ */

.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area{
	padding: 0 0 3px 0;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area form#search_form{
	overflow: hidden;
	display: flex;
	align-items: center;
	border-radius: 20px;
	padding: 0 0 0 4%;
	background-color: #eeeeee;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area form#search_form select{
	width: 100px;
	border: none;
	background-color: #eeeeee;
	outline: 0;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area form#search_form input[type='text'],
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area form#search_form input[type='password'] {
	width: 95%;
	border: none;
	padding: 2px;
	background-color: #eeeeee;
	outline: 0;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area .submit_btn{
	background-image:url('../img/common/submit-img.png');
	background-repeat:no-repeat;
	background-color: #aaaaaa;
	background-size: 28%;
	background-position: center;
	border:none;
	width:80px;
	height:38px;
	cursor: pointer;
	transition:background 1s,color 1s;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #search_area .submit_btn:hover {
	background-color: #ccc;
}

/* -------------カートエリア------------- */

	.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea{
	display: flex;
	align-items: end;
	justify-content: right;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_name{
	text-align: right;
	margin: 0 10px 0 20px;
	font-size: 90%;	
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_cart_btn,
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_new_btn,
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_mypage_btn,
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_login_btn{
	position: relative;
	font-size: 78%;
	margin-left: 2px;
	width: 62px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_cart_btn img{
	position: absolute;
	left: 20px;
	top: -19px;
	width: 27px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_cart_btn .quantity{
	position: absolute;
	top: -36px;
	left: 10px;
	background: var(--accent-color);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center!important;
	line-height: 20px;
	z-index: 9;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_new_btn img{
	position: absolute;
	left: 17px;
	top: -25px;
	width: 30px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_mypage_btn img{
	position: absolute;
    left: 18px;
    top: -25px;
    width: 25px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header .block_outer #header_login_area #header_userarea .userarea_login_btn img{
	position: absolute;
	left: 14px;
	top: -23px;
	width: 28px;
}

/* -------------特典------------- */

.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a{
	background-color: #EFE56E;
	margin: 0 auto;
	border-radius: 8px;
	color: #1D1D1D;
	width: 98%;
	max-width: 1500px;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a h2{
	background-color: var(--accent-color);
	text-align: right;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	padding: 8px 2vw;
	margin-right: 2vw;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a,
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a ul li{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a ul{
	display: flex;
	align-items: center;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a ul li{
	font-weight: 600;
	font-size: 0.8rem;
	margin: 5px 0;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a ul li span{
	margin: 0 0.5vw;
	background-color: #fff;
	border-radius: 5px;
	padding: 8px 4px;
	width: 30px;
	text-align: center;
}
.raku2_theme01 #header_wrap #header_wrap_02 #header_benefits a ul li span img{
	max-width: 22px;
}

/* -------------headerナビ------------- */

.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi{
	border-bottom: none;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1500px;
	margin: 0 auto;
	font-size: 90%;
	width: 98%;
}
.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi > ul{
	width: auto;
	margin: 0;
	display: flex;
	justify-content: space-between;
}
.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi .shoppingt_btn > li > a,
.raku2_theme01 #footer_wrap #footer #info_area .shoppingt_btn a{
	background-color: var(--main-color);
	border-radius: 30px;
	color: #fff!important;
	padding: 12px 1.5vw;
	margin: 0 5px;
	min-width: 7vw;
	display: block
}
.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi .shoppingt_btn li.header_cat_btn a:after{
	color: #fff;
}
.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi .use_btn > li > a{
	position: relative;
	padding: 0 0 0 1em;
	margin: 0 0 0 1.5vw;
}
.raku2_theme01 #header_wrap #header_wrap_02 #gloval_navi .use_btn > li > a::before {
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	width: 0px;
	height: 0px;
	border: 0.3em solid transparent;
	border-left: 0.4em solid var(--main-color);
	content: "";
}
#gloval_navi .header_catwrap ul.tree1-outer{
	top: 40px;
    left: 42%;
}


/*---------------------------------------
mainエリア
---------------------------------------*/

.LC_Page_Index #container{
	max-width: 1500px;
	margin: 0 auto;
}


.LC_Page_Index div#main_column > div{
	margin-top: 15px;
}
.bx-wrapper img{
	border-radius: 8px;
}

#leftcolumn .raku2_theme01 .block_outer #category_area h2,
#main_column .raku2_theme01 #main_category_area h2,
#main_column .raku2_theme01 .recommend_list h2,
#main_column .history_list h2,
#main_column .raku2_theme01 .block_outer #news_area h2,
.raku2_theme01 #footer_wrap #footer #footer_category_area h2,
.raku2_theme01 #footer_wrap #footer #use_area h2,
.raku2_theme01 #footer_wrap #footer #info_area h2,
.raku2_theme01 .block_outer #exclusive_benefits_area h2,
.raku2_theme01 .block_outer #choose_area h2{
	background-color: transparent;
	color: var(--main-color);
	font-size: 140%;
	font-weight: 600;
	text-align: left;
	padding: 0px;
	margin: 0;
	border: none;
}
.raku2_theme01 #footer_wrap #footer #footer_category_area h2,
.raku2_theme01 #footer_wrap #footer #info_area h2,
.raku2_theme01 #footer_wrap #footer #use_area h2{
	font-size: 115%;
}

#leftcolumn .raku2_theme01 .block_outer #category_area h2 span,
#main_column .raku2_theme01 #main_category_area h2 span,
#main_column .raku2_theme01 .recommend_list h2 span,
#main_column .history_list h2 span,
#main_column .raku2_theme01 .block_outer #news_area h2 span,
.raku2_theme01 #footer_wrap #footer #footer_category_area h2 span,
.raku2_theme01 .block_outer #exclusive_benefits_area p,
.raku2_theme01 .block_outer #choose_area p{
	font-size: 80%;
	color: #aaa;
	margin: 0 15px;
	font-weight: 600;
}
#main_column .raku2_theme01 .recommend_list{
	margin-bottom: 0;
}
#main_column .raku2_theme01 .recommend_list .block_body{
	padding: 0 0 10px;
}
#main_column .raku2_theme01 .block_outer #news_area dl.newslist{
	display: flex;
	align-items: center;
}
#main_column .raku2_theme01 .block_outer #news_area .news_contents{
	overflow-y: hidden;
}

#main_column .raku2_theme01 #main_category_area ul{
        max-width: 1050px;
	display: flex;
	align-items: flex-start;
	margin-bottom: 5px;
	text-align: center;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#main_column .raku2_theme01 #main_category_area ul li{
	margin-bottom: 5px;
}
#main_column .raku2_theme01 #main_category_area ul img{
	max-width: none !important; /* 制限を解除し、上書きを無効化 */
	margin: 10px;
}
#main_slide_image .bxslider li img{
	width: 980px;
}

/*---------------------------------------
leftエリア
---------------------------------------*/


#leftcolumn{
	margin-left: 1%;
}
.side_column .block_body{
	border: none;
}

/* -------------カテゴリ------------- */

#leftcolumn .raku2_theme01 .block_outer #category_area li.level1 p a{
	position: relative;
	display: block;
	padding: 12px 10px;

	text-decoration: none;
}
#leftcolumn .raku2_theme01 .block_outer #category_area li.level1 p a:before{
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #847563;
	border-right: solid 2px #847563;
	position: absolute;
	top: 50%;
	right:10px;
	margin-top: -4px;
	transform: rotate(45deg);
}
#leftcolumn .raku2_theme01 .block_outer #category_area li.level1:nth-child(odd) {
	background: #F0EBE6
}

/* -------------カレンダー------------- */

#leftcolumn .raku2_theme01 .block_outer #calender_area table {
	width: 100%;
	margin: 20px auto;
}
#leftcolumn .raku2_theme01 .block_outer #calender_area table .month {
	background: #847563;
	border-radius: 30px;
	padding: 5px 0px;
	margin: 10px 0;
}
#leftcolumn .raku2_theme01 .block_outer #calender_area th {
	border-bottom: 1px solid transparent!important;
	background-color: transparent!important;
}
#leftcolumn .raku2_theme01 .block_outer #calender_area table td{
	border-bottom: none!important;
	border-right: none!important;
	padding: 6px;
}
#leftcolumn .raku2_theme01 .block_outer #calender_area .off {
	color: grey;
	background-color: #f0ebe5;
}
#leftcolumn .raku2_theme01 .block_outer #calender_area .today {
	background-color: #efe56e;
	font-weight: bold;
}


/*---------------------------------------
fooderエリア
---------------------------------------*/

.raku2_theme01 #footer_wrap  {
	border-top: none;
	background-color: #e4dfda;
	padding: 0;
}
.raku2_theme01 #footer_wrap #footer {
	max-width: 1500px;
	width: 98%;
	display: flex;
	align-items: flex-start;
	margin: 40px auto;
}

/* -------------バナーエリア------------- */

.raku2_theme01 #footer_wrap #footer_banner{
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #fff;
}
.raku2_theme01 #footer_wrap #footer_banner #banner_area{
	max-width: 1500px;
	margin: 0 auto;
}
.raku2_theme01 #footer_wrap #footer_banner #banner_area div{
	margin: 10px;
}
.raku2_theme01 #footer_wrap #footer_banner #banner_area div img{
	width: 100%;
}


/* -------------fooderナビ------------- */

.raku2_theme01 #footer_wrap #footer #category_area,
.raku2_theme01 #footer_wrap #footer #use_area{
	padding: 0 4vw 0 0;
}
.raku2_theme01 #footer_wrap #footer #info_area{
	margin-left: auto;
	text-align: center;
	background-color: #fff;
	border-radius: 30px;
	padding: 18px;
}
.raku2_theme01 #footer_wrap #footer #info_area h2{
	text-align: center;
}
.raku2_theme01 #footer_wrap #footer #info_area .tel{
	font-size: 210%;
	font-weight: 600;
	margin-top: -12px;
}
.raku2_theme01 #footer_wrap #footer #info_area p{
	font-size: 90%;
	margin-bottom: 20px;
}

.raku2_theme01 #footer_wrap #footer ul{
	display: flex;
	flex-direction: column;
	background: none;
	text-align: left;
}
.raku2_theme01 #footer_wrap #footer ul li,
.raku2_theme01 #footer_wrap #footer ul li:first-child{
	border: none;
	margin: 0;
	padding: 0;
}
.raku2_theme01 #footer_wrap #footer ul li a{
	display: block;
	padding: 6px 10px;
	text-decoration: none;
}

.raku2_theme01 #footer_wrap #copyright{
	padding-top: 30px;
	padding-bottom: 30px;
}

.raku2_theme01 #footer_wrap #copyright #company_area,
.raku2_theme01 #footer_wrap #footer_banner #banner_area{
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;
	justify-content: center;
	text-align: left;
}


/*---------------------------------------
加盟店ページ
---------------------------------------*/

/*----------------------------------------------------------*/

#main_column #undercolumn #undercolumn_entry h2.title{
    font-size: 180%;
    border-bottom: 3px solid #857663;
    margin: 30px auto 60px;
    width: 18%;
}
#main_column #undercolumn #undercolumn_entry .progressbar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    margin: 30px auto;
}
#main_column #undercolumn #undercolumn_entry .progressbar li{
    position: relative;
}
#main_column #undercolumn #undercolumn_entry .progressbar li:after{
    position: absolute;
    z-index: -1;
    top: 50px;
    left: 0;
    width: 360px;
    height: 1px;
    content: '';
    background-color: #857663;
}
#main_column #undercolumn #undercolumn_entry .progressbar li.active{
    background-color: #847563!important;
    color: #ffffff!important;
}
#main_column #undercolumn #undercolumn_entry .progressbar li:last-child:after {
    content: none;
}
#main_column #undercolumn #undercolumn_entry .progressbar li.item{
    background-color: #F0EBE6;
    text-align: center;
    color: #847563;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 8px;
    width: 60px;
}
#main_column #undercolumn #undercolumn_entry .progressbar li.item span{
    display: block;
}
#main_column #undercolumn #undercolumn_entry table,
#main_column #undercolumn #undercolumn_entry table#entry_input th,
#main_column #undercolumn #undercolumn_entry table#entry_input td{
    border: none;
    background-color: transparent;
}
#main_column #undercolumn #undercolumn_entry table#entry_input input[type='text'],
#main_column #undercolumn #undercolumn_entry table#entry_input input[type='password'],
#main_column #undercolumn #undercolumn_entry table#entry_input select{
    height: 40px;
    border: none;
    background-color: #eeeeee;
}
#main_column #undercolumn #undercolumn_entry table#entry_input td .box300{
    width: 90%;
}
#main_column #undercolumn #undercolumn_entry table#entry_input td .box30,
#main_column #undercolumn #undercolumn_entry table#entry_input td .box150{
    width: 50%;
}
#main_column #undercolumn #undercolumn_entry table#entry_input td .box10,
#main_column #undercolumn #undercolumn_entry table#entry_input td .box120{
    width: 25%;
}
#main_column #undercolumn #raku2_kiyaku_text p{
    text-align: center;
}

/* 3. コンテンツ全体（#undercolumn_entry）の幅を500pxに制限し、中央寄せにする */
#main_column #undercolumn #undercolumn_entry {
    max-width: 1000px; /* ★ コンテンツの最大幅 */
    width: 95%;
    margin-left: auto;  /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
    padding: 0; /* 必要に応じて調整 */
}

/* 4. 規約テキストエリア（textarea）も500pxに合わせる */
#undercolumn #raku2_kiyaku_text textarea.kiyaku_text {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box; /* paddingやborderを含めて幅を計算 */
}

/* フォーム項目名（<th>）の幅を調整し、隙間を詰める */
#main_column #undercolumn #undercolumn_entry table#entry_input colgroup col:first-child {
    width: 25%;
}

/* フォーム入力欄（<td>）の幅を調整（残りの領域を確保） */
#main_column #undercolumn #undercolumn_entry table#entry_input colgroup col:last-child {
    width: 75%;
}

/*----------------------------------------------------------*/


/*オーダーシート文字フォント*/
td.raku2_list_product_name p {
  font-size: 1.5em;
}

/*商品詳細 ...打ち消し */
div.listrightbloc h3 {
white-space: normal;
text-overflow: clip;
}


/* ログインボックス全体の調整 */
#login_area {
    /* 幅を親要素いっぱいに広げ、強制的に適用 */
    width: 100% !important; 
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* フォームリストの左右パディングを調整 */
#login_area dl.formlist {
    /* フォームリスト全体に左右の余白を設定し、内容物を内側に収める */
    padding: 0 5px !important;
    margin-bottom: 10px !important;
}

/* 入力フィールドの調整（メールアドレスとパスワードの入力欄） */
#login_area input[type='text'],
#login_area input[type='password'],
#login_area .box140 {
    /* 幅を強制的に100%にし、box-sizingでパディングやボーダーを含めた幅とする */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ログインボタンの調整 */
#login_area .btn {
    padding: 0 5px !important; /* ボタンエリアの左右パディングを調整 */
}


/* カテゴリ名リンク（親・子すべて）を左寄せ＋1行省略＋フォントサイズ調整 */
#category_area .c_tree > a[href]:not(.toggle) {
  display: block;
  width: 100%;              /* 横幅いっぱいに広げる */
  text-align: left !important; /* 左寄せ強制 */
  white-space: nowrap;      
  overflow: hidden;
  text-overflow: ellipsis;  
  padding: 6px 10px;        /* 余白は好みで調整 */
  box-sizing: border-box;

  /* ▼ここでフォントの調整が可能 */
  font-size: 12px;          /* 任意：例として14px */
  font-weight: normal;      /* 必要なら bold に変更 */
  line-height: 1.4;         /* 行間調整（1行なら1.4前後が見やすい） */
  color: #333;              /* テキスト色（必要に応じて） */
}


/* ヘッダー全体の余白を削減 */
#header_wrap {
    margin-bottom: 0; /* 下の要素との隙間を詰める */
}

/* ヘッダー内部の上下のパディングを最小化 */
#header {
    padding: 20px 0; /* 上下のパディングを少なくする */
}

/* ログイン・ゲスト表示エリアの調整 */
#user_login p {
    margin: 0 0 5px 0; /* 上下のマージンを小さくする */
    line-height: 1.4; /* 行の高さを調整 */
}

/* ボタンエリアの上のマージンを削減し、ログイン情報との距離を詰める */
#header_login_area .btn_outer {
    margin-top: 5px; /* マージンを小さくする */
}

/* グローバルナビゲーションの調整 */
#gloval_navi {
    margin-top: 0; /* ヘッダー本体との隙間を詰める */
    padding: 0; /* 上下のパディングを削除または最小化 */
}
#gloval_navi ul li a {
    line-height: 1;
}

/* ターゲット: ボタンエリア全体 */
#header_login_area .btn_outer {
    /* 上部のマージンをリセットまたは削減します */
    margin-top: 5px !important; /* または 0 に設定 */
    /* 必要に応じてパディングも確認 */
    padding-top: 0; 
}

.user-auth-area {
    text-align: center!important; /* ← 中央揃えに変更 */
}

.login-message {
    font-size: 16px;
}

.user_name {
    font-weight: bold;
}

.entry_btn {
    display: inline-block;
}

.register-button {
    background-color: #e60033;
    color: white;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

/* ---------------------------------------
   中央寄せの強制修正
------------------------------------------ */

/* 1. ヘッダーユーティリティ内の #headerInternalColumn の幅を確保（念のため） */
#header_utility #headerInternalColumn {
    /* 必要に応じて幅を調整 */
    width: 100%; 
}

/* 2. ゲストコンテンツの親コンテナ（#header_login_area）から右寄せを完全に解除 */
#header_login_area {
    /* align-items: flex-end; の設定をリセットし、幅を確保 */
    align-items: center !important; 
    width: 100% !important; 
}

/* 3. ログイン/ゲストの切り替えエリア（#login_status_content）を中央寄せの核にする */
#login_status_content {
    /* 幅をコンテナいっぱいに広げ、Flexboxで中央寄せの基盤を作る */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* ★ コンテンツ全体を中央寄せにする */
}

/* 4. ログインしていない時のコンテンツ（#logged_out_content）を中央に配置 */
#logged_out_content {
    /* 縦並びを維持しつつ、中央に配置されるように調整 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 内部の要素（ゲスト様、ボタン）を中央に寄せる */
    
    /* 重要な修正: 外部のFlexboxで中央寄せされるため、自身の幅を内容物のサイズに合わせる */
    width: auto !important; 
    /* width: 100% から width: auto に変更することで、justify-content: center が機能しやすくなります */
}

/*
 * body要素のmarginを強制的に削除するための上書き
 * 他のCSSファイルやテーマ設定によるmarginをリセットします。
 */
body {
    margin: 0 !important; /* 上下左右の外部余白を強制的に0に設定 */
    padding: 0 !important; /* 念のため内部余白も強制的に0に設定 */
    width: 100% !important; /* 幅を確実に100%に設定 */
    box-sizing: border-box !important; /* 必要に応じて計算方法も上書き */
}


/* 左側：ようこそ部分のフォント調整 */
.user-auth-area {
    font-size: 20px !important;  /* 「ようこそ」「ゲスト様」などの文字サイズ */
    line-height: 1.4;
}

/* 右側：リンク部分（お問い合わせ・マイページ・ログアウト） */
.header-links {
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 12px; /* リンク間の距離（適宜調整） */
}

/* 区切り線の見た目と間隔調整 */
.header-links span {
    margin: 0 8px;
    color: #aaa;
}

/* リンクホバー時の視認性を改善 */
.header-link {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}
.header-link:hover {
    color: var(--main-color);
}

/*---------------------------------------
 #header / #raku2_new_header 幅の上書き
---------------------------------------*/

#header,
#raku2_new_header {
    max-width: 1500px !important; /* ← ここで980pxを上書き */
    width: 100% !important;        /* 横幅を画面全体に近づける */
    margin: 0 auto !important;    /* 中央寄せ維持 */
    position: relative !important;
}

/* さらにheader内部の構造を全幅対応に */
#header_utility,
#headerInternalColumn {
    max-width: 1500px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* 左右に余裕を持たせる */
#header_utility #headerInternalColumn {
    padding: 0 260px !important; /* 左右余白（広げたいときは100pxなどに変更） */
}


.sale_price .price_label {
  color: black !important;
}
.sale_price .price {
  color: black !important;
}

#gloval_navi {
    border-bottom: none !important;
}

#news_area {
    /* 例として、最大幅を 800px に設定します */
    max-width: 1400px;

}

/* #header_wrap と #header_wrap_02 の内部コンテナ */
#header_wrap_02 #headerInternalColumn {
    /* 左右のパディングを20pxに固定（揃える基準位置） */
    padding-left: 40px !important;
    padding-right: 60px !important;
}

#header_wrap {
    /* 最小の高さを0に設定することで、min-height: 82px を打ち消す */
    min-height: 0 !important;
    
    /* 高さをコンテンツのサイズに合わせるため、heightも必要に応じてautoに設定 */
    height: auto !important;
}

.register-btn:hover {
    background-color: #002266;
    text-decoration: none;
}


#gloval_navi {
  position: relative;
  left: 20%;
  transform: translateX(calc(-50% + 255px)); /* ロゴ幅の半分を足す */
  display: inline-block;
}


#gloval_navi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}


#login_area {
  margin-top: -10px; /* 上に20pxずらす。必要に応じて数値調整 */
}

.all_category_block {
    margin-top: -30px; /* 上にずらす量 */
}

.icon_member_only,
.icon_member_only p {
    /* 要素自体と、その中のテキストを非表示にする */
    display: none !important;
}


/* クラス名「status_icon_span」を持つ要素のフォントサイズを調整 */
.status_icon_span {
  /* ここに希望のフォントサイズを指定します。 */
  /* 例：少し大きくしたい場合 */
  
  /* 例：少し小さくしたい場合 */
  /* font-size: 12px !important; */
  
  /* 既存のCSSを確実に上書きするために「!important」を付けています */
}

.status_icon_span {
  font-size: 12px !important; /* 調整したフォントサイズ */
  
  /* ボックスの幅を広げて、テキストが収まるようにする */
  width: 100px !important; /* 例：必要に応じて値を調整してください */
  /* width: auto !important; */ /* 親要素に依存するが、幅が自動で広がるか試す */
}

tr.row_charge,
tr.row_tax_rate0 {
  display: none;
}


#guide_navi {
    /* 上部のマージンを追加する */
    margin-top: 20px; /* 例として20ピクセル追加 */
}

/* ナビゲーション全体の調整（例：リストのマーカー非表示） */
#guide_navi ul {
    list-style: none; /* リストの点（マーカー）を消す */
    padding: 0; /* ulに付いているデフォルトのパディングを消す */
    margin: 0; /* ulに付いているデフォルトのマージンを消す */
}

/* 各リスト項目（<li>）の間隔を調整 */
#guide_navi li {
    margin-bottom: 20px; /* 項目間の距離を少し空ける */
}

/* リンクテキスト（<a>）のフォント関連を調整 */
#guide_navi a {
    font-size: 15px; /* フォントサイズの調整 */
    letter-spacing: -0.3px; /* 文字と文字の距離（字間）を少し詰める */
    line-height: 1.4; /* 行の高さ（行間）を調整 */
    text-decoration: none; /* 装飾（下線など）があればここで調整 */
    color: #333;
}



/* 1. 日付 (mini DT) と タイトル (次のDT) の間隔を広げる */
.newslist dt.mini {
    margin-right: 5px; /* 例: 日付の右側に20ピクセルの間隔 */
}




/* タブ内容の位置ズレ修正 */
.tabs {
  position: relative !important;
}

.tabs .tab_content {
  position: relative !important;
  top: 0 !important;
  margin-top: 0 !important;
  display: none; /* デフォルト非表示に戻す */
}

/* チェックされたタブのみ表示 */
#csv_order:checked ~ #csv_order_content,
#quick_order:checked ~ #quick_order_content {
  display: block !important;
}

.upload_order .tab_content {
  clear: none !important;
}


/* 固有のクラス「.layout_kikaku_select-03」を持つテーブルに限定して列を非表示にする */
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 th:nth-child(4),
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 td:nth-child(4),
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 th:nth-child(5),
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 td:nth-child(5),
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 th:nth-child(6),
.tbl_inventory_type.tbl_items.layout_kikaku_select-03 td:nth-child(6) {
    display: none;
}

   /* itemdetail内の画像を非表示にする */
    & .itemdetail img {
        display: none;
    }


.tbl_inventory_type.tbl_items {
    /* テーブル全体のレイアウトを固定にし、幅の計算を容易にします */
    table-layout: fixed;
    width: 100%; /* 必要に応じて調整してください */
}

.tbl_inventory_type.tbl_items th.itemdetail,
.tbl_inventory_type.tbl_items td.itemdetail {
    /* itemdetailの列幅を広くする */
    width: 50%; /* 例: テーブル全体の幅の50%を割り当てる */
}

.tbl_inventory_type.tbl_items th.quantity-01,
.tbl_inventory_type.tbl_items td.quantity-01 {
    /* quantity-01 (数量範囲) の列幅を調整 */
    width: 10%; /* 例: 比較的狭く */
    text-align: center; /* 値が中央にくるように調整（任意） */
}

.tbl_inventory_type.tbl_items th.price-01,
.tbl_inventory_type.tbl_items td.price-01 {
    /* price-01 (価格) の列幅を調整 */
    width: 20%; /* 例: 価格表示のためにやや広めに */
}

.tbl_inventory_type.tbl_items th.orderquantity,
.tbl_inventory_type.tbl_items td.orderquantity {
    /* orderquantity (注文) の列幅を調整 */
    width: 20%; /* 例: 注文入力欄のために広めに */
}




div#mycontents_area div.mycondition_area {
  margin: 0 !important;
  border: none !important;
  width: auto !important;
  background: none !important;
}


div#detailrightbloc.detaildescriptionbloc form {
    margin-bottom: 0; /* 50px の設定を 0 で上書き */
}



/* 特定の注文リストテーブル全体の設定（Sassのネスト記法を使用） */
.tbl_inventory_type.tbl_items.layout_orderlist {
    /* 1. 非表示にする列のcolgroup要素を隠す */
    /* 対象: 通常価格 (3列目/15%)、のし (5列目/10%) */
    & .raku2_product_price01_col,
    & .raku2_product_noshi_col {
        display: none;
    }

    /* 2. 非表示にするTH/TDセルを隠す */
    & th:nth-child(3),
    & td:nth-child(3),
    & th:nth-child(5),
    & td:nth-child(5) {
        display: none;
    }

    /* 3. 残りの列の幅を再配分し、テーブルのレイアウトを修正する (合計25%を再配分) */
    
    /* 1列目: 商品番号 (元の13%を維持) */
    & .raku2_product_code_col {
        width: 13% !important;
    }
    /* 2列目: 商品名・規格・入数 (元の20% + 10%を再配分 -> 30%) */
    & .raku2_product_name_col {
        width: 30% !important;
    }
    /* 4列目: 価格 (元の15% + 10%を再配分 -> 25%) */
    & .raku2_product_price_col {
        width: 25% !important;
    }
    /* 6列目: 注文数 (元の15% + 5%を再配分 -> 20%) */
    & .raku2_product_quantity_col {
        width: 20% !important;
    }
}

.profile {
    display: none !important;
}



#leftcolumn {
  float: left;
  width: 240px; /* 左カラムの幅 */
  margin-right: 50px; /* ← 左とメインの隙間を作る */
}

#main_column {
  margin-left: 50px !important; /* 左カラム+隙間分 */
}


.history_list {
  margin-top: 26px;
}





/* 1. カテゴリリストの親要素（Flexコンテナ）設定の調整 */
#main_column .raku2_theme01 #main_category_area ul {
    /* 既存のFlex設定を維持しつつ中央寄せと均等配置を優先 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between !important; /* ★ 要素間に均等なスペースを配置 */
    align-items: flex-start;
    width: 100% !important; /* 親要素の幅を確保 */
    max-width: 9000px !important; /* 既存の最大幅を維持 */
    margin: 0 auto 5px !important; /* 中央寄せと下マージンの調整 */
    padding: 0 !important; /* 念のためパディングをリセット */
}

/* 2. リストアイテム（カテゴリボックス）の幅設定 */

#main_column .raku2_theme01 #main_category_area ul li {
    /* Flexアイテムの幅を計算し、3列で収まるように設定 */
    /* 100%から2つの間隔（例: 2% + 2% = 4%）を引いた残りを3分割 */
    width: 30.3% !important;
   /* 例: (100% - 4%) / 3 = 32% (間隔は別途justify-content: space-betweenが担当) */
    
    /* 既存設定の上書き */
    margin-bottom: 40px !important; /* 縦の行間を確保 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box; /* paddingやborderを幅に含める */
}

/* 3. 画像サイズと比率の維持 */
#main_column .raku2_theme01 #main_category_area ul li img {
    width: 100%; /* liの幅いっぱいに広げる */
    height: auto; /* 比率維持 */
    max-width: 100% !important; 
    margin: 0 auto 10px !important; /* 画像の上下マージンを調整 */
    display: block;
}

/* 4. 2行目で左寄せにならないように、最後の要素にマージンを強制的にリセット */
/* (6要素あるため、これは3列2行の場合に不要ですが、将来的な要素数変更に備えません) */
/* #main_column .raku2_theme01 #main_category_area ul li:nth-child(3n + 1),
#main_column .raku2_theme01 #main_category_area ul li:nth-child(3n) {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
*/

/* #main_category_area 内の <h2> 要素に下側のマージンを設定 */
#main_category_area h2 {
    /* 既存の上書き設定があればそれを維持 */
    
    /* ★追加・修正: <h2>の下側にスペースを設定 */
    margin-bottom: 25px !important; /* 任意のピクセル数で調整してください */
}

.kikaku_tablelayout_02 {
    /* これで元の margin-bottom: 100px; が無効化されます */
    margin-bottom: -30px;
}




/* 1. タイトル(●●年●月)の背景色を黒に、文字色を白に */
#calender_area caption.month {
    background-color: #01328D !important;
    color: white !important;
    border-radius: 0 !important; 
}

/* 2. カレンダーの休日(土日祝)の文字色を赤色に */
#calender_area .block_body td.off {
    color: red !important;
    /* 3. 土日祝日の背景色を薄いピンク色に (新しく追加) */
    background-color: #fce4ec !important; /* 薄いピンク色のカラーコード例 */
}


/* inputタグでクラス名がbox140の要素の幅を100%に */
input.box140 {
    width: 97% !important;
}

/* selectタグでクラス名がbox145の要素の幅を100%に */
select.box145 {
    width: 100% !important;
    /* 元々設定されているbox-sizing: border-box; はそのまま残しておくと良いでしょう。 */
    /* これにより、幅(100%)にpaddingやborderが含まれるようになります。 */
    box-sizing: border-box; 
}




#sales_total_detail {
    /* 1. テーブル全体の幅を25%に強制設定 */
    width: １00% !important;
    
    /* 2. 妙なボックス/線を消すため、テーブル全体の罫線を削除 */
    border: none !important;
    
    /* セル間の線を統合し、二重線が出ないように（既存設定があれば上書き） */
    border-collapse: collapse !important; 
}

#sales_total_detail tbody,
#sales_total_detail tr,
#sales_total_detail td {
    /* 3. セルや行の罫線も確実に削除 */
    border: none !important;
    /* 背景色も透明にして、他の設定を打ち消します */
    background-color: transparent !important;
}

#sales_total_detail td {
    /* セルの内側余白を調整し、リンクを詰める（任意） */
    padding: 0 !important;
}

#sales_total_detail td p#csv_download {
    /* CSVダウンロードのリンクを左寄せで表示するために、pタグの幅も調整 */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}




dd.mini {
  display: none;
}



<style>
/* アコーディオン全体のスタイル */
.accordion-news {
  width: 100%;
  max-width: 1000px; /* 既存サイトに合わせた幅 */
  margin: 20px auto;
  border-top: 1px solid #ccc;
}

/* 各記事の枠 */
.accordion-news .news-item {
  border-bottom: 1px solid #ccc;
  margin: 0;
}

/* タイトル部分（クリック可能エリア） */
.accordion-news .news-title {
  position: relative;
  padding: 15px 40px 15px 10px; /* 右側にアイコン用の余白を確保 */
  cursor: pointer;
  font-weight: bold;
  background-color: #fff;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.accordion-news .news-title:hover {
  background-color: #f9f9f9;
}

/* 日付のスタイル */
.accordion-news .news-title .date {
  margin-right: 15px;
  color: #666;
  font-weight: normal;
  font-size: 0.9em;
}

/* 開閉アイコン（＋記号を作成） */
.accordion-news .news-title .icon-toggle {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.accordion-news .news-title .icon-toggle::before,
.accordion-news .news-title .icon-toggle::after {
  content: '';
  position: absolute;
  background-color: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.accordion-news .news-title .icon-toggle::before {
  width: 100%;
  height: 2px; /* 横棒 */
}
.accordion-news .news-title .icon-toggle::after {
  width: 2px; /* 縦棒 */
  height: 100%;
  transition: transform 0.3s;
}

/* 開いている状態（activeクラスがついた時）のアイコン変化 */
.accordion-news .news-item.active .news-title .icon-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg); /* 縦棒を回転させて横棒と重ねる（－にする） */
}

/* 本文部分（初期状態は非表示） */
.accordion-news .news-content {
  display: none; /* ★ここで非表示にしています */
  padding: 20px;
  background-color: #f7f7f7;
  margin: 0;
  line-height: 1.6;
}

/* import.txt で dd が display:none されている場合の強制上書き */
/* import.txtの180行目付近の影響を回避 */
.accordion-news dd.news-content {
    display: none; /* JSで制御するため一旦none */
}
/* JSでクラスが付与されたら表示 */
.accordion-news .news-item.active dd.news-content {
    display: block; 
    border-top: 1px dashed #ddd;
}
</style>