@charset "utf-8";

/*======================
CSSリセット*/

body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object {
margin:0;
padding:0;
vertical-align: baseline;
}

h1,h2,h3,h4,h5,h6 {
font-style: normal;
font-weight:normal;
font-size: 1.0em;
}
 
table {border-spacing:0;}
* html table {border-collapse:collapse;}
*:first-child+html table {border-collapse:collapse;}
caption,th {text-align:left;}
table,th,td,img {border:0;}
img,input {vertical-align:middle;}
q:before,q:after {content:'';}
ul {list-style: none;}


/*======================
初期設定*/

body{
	line-height: 1.5em;
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
	color:#434242;
}

a{ color:#02b2ed; text-decoration:underline }
a:hover{ text-decoration: none;}
a.dent:hover{ position: relative; top:1px; left:1px}
a.blink:hover img {-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80); border:none;}

.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix{zoom:1;}

.fltl{float:left}
.fltr{float:right}

/*マージン設定*/
.mt-9{margin-top:-9px}
.mb1{margin-bottom:1px}
.mb2{margin-bottom:2px}
.mb5{margin-bottom:5px}
.mb6{margin-bottom:6px}
.mb7{margin-bottom:7px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb23{margin-bottom:23px}
.mb25{margin-bottom:25px}
.mb30{margin-bottom:30px}
.mb35{margin-bottom:35px}
.mb40{margin-bottom:40px}
.mb45{margin-bottom:45px}
.mb50{margin-bottom:50px}
.mb55{margin-bottom:55px}
.mb60{margin-bottom:60px}
.mb70{margin-bottom:70px}
.mb75{margin-bottom:75px}
.mb80{margin-bottom:80px}
.mb90{margin-bottom:90px}
.mb100{margin-bottom:100px}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr25{margin-right:25px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr70{margin-right:70px;}
.mr80{margin-right:80px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml13{margin-left:13px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml35{margin-left:35px;}

.pt5{padding-top:5px;}
.pt15{padding-top:15px;}

.prel{position:relative}
.mcntr{margin:0 auto}
.tcntr{text-align:center}
.tright{text-align:right}
 

.f10{font-size:10px; line-height:1.5em}/*大きさ設定*/
.f11{font-size:11px; line-height:1.5em}
.f12{font-size:12px; line-height:1.5em}
.f13{font-size:13px; line-height:1.5em}
.f14{font-size:14px; line-height:1.5em}
.f15{font-size:15px; line-height:1.5em}
.f16{font-size:16px; line-height:1.5em}
.f17{font-size:17px; line-height:1.5em}

.bold{font-weight:bold;}

.fblue{color:#2b4c98}/*色設定*/
.fred{color:#dd0a0a;font-weight:bold;}
.fred2{color:#ff0000;}
.forange{color:#fe6600;}
.fbrown{color:#44220e;font-weight:bold;}
.fbrown2{color:#5a3808;font-weight:bold; font-size:17px; line-height:1.6em;}
.fgray{color:#656565;font-weight:bold;}
.fgreen{ color:#105A54; }
.fnarrow{letter-spacing:-0.1em}

.vasub{vertical-align:sub;}
.vami{vertical-align: middle;}
.vaspr{vertical-align:super; font-size:small;}
.cb{clear:both;}


/*======================
ページ用設定　*/

/*ヘッダ*/
#Header{
	height: 135px;
	background: url(../images/header/bg.gif) top center no-repeat;
}

	#Header .inner{
		position: relative;
		width: 900px;
		height: 135px;
		margin: 0 auto;
	}

	#Header h1{
		font-size: 11px;
		font-weight: bold;
		line-height: 1.5;
		padding-top: 8px;
	}

	#Header .logo{
		padding-top: 3px;
	}

	#Header .lead{
		position: absolute;
		left: 388px;
		top: 8px;
		width: 378px;
	}

	#Header .tel{
		position: absolute;
		left: 390px;
		top: 60px;
		width: 374px;
	}

	#Header .tel_n23{
		position: absolute;
		left: 380px;
		top: 24px;
		width: 255px;
	}

	#Header .mem_n23{
		position: absolute;
		left: 610px;
		top: 20px;
		width: 159px;
	}

	#Header .mem_reg_n23{
		position: absolute;
		left: 643px;
		top: 70px;
	}

	#Header .pct{
		position: absolute;
		right: 0px;
		top: 8px;
		width: 115px;
	}

/*グローバルナビ*/
#Globalnavi{
	padding-bottom: 15px;
	background: url(../images/header/bg.gif) bottom center no-repeat;
}
#Globalnavi.toppage{
	margin-bottom: 20px;
}

	#Globalnavi ul{
		width: 900px;
		margin: 0 auto;
	}

	#Globalnavi li{
		position: relative;
		float: left;
		margin-right: 15px;
	}
	#Globalnavi li.last{
		margin-right: 0px;
	}

	/*プルダウン用*/
	#Globalnavi li #roll1{
		position:absolute;
		left: -15px;
		top: 30px;
		z-index: 1000;
		width: 163px;
		height: 79px;
		padding-top: 11px;
		padding-left: 2px;
		background: url(../images/navi/bg.gif) left top no-repeat;
	}
	#Globalnavi li #roll1 li a{
		display:block;
		text-indent: 0px;
		height:inherit;
		margin-bottom: 2px;
	}
	
	#Globalnavi li #roll1 li a:hover{
		background:none;
	}
	
	#Globalnavi li #roll1 li{
		float:none;
		line-height:0;
	}
	
	/*ロード中削除*/
	#Globalnavi li #roll1{
		display:none;
	}
	

/*パンくず*/
#Breadcrumb{
	padding: 5px 0 10px;
	font-size: 12px;
	font-weight: bold;
}

	#Breadcrumb ul{
		width: 900px;
		margin: 0 auto;
	}

	#Breadcrumb li{
		float: left;
	}

	#Breadcrumb li a{
		display: block;
		color: #0993e3;
		background: url(../images/header/bg-breadcrumb.gif) right center no-repeat;
		padding-right: 17px;
	}


/*左右カラムの設定*/
#Container{
	width: 900px;
	margin: 0 auto;
	padding-bottom: 40px;
}

	#Content{
		float: left;
		width: 685px;
	}
	/*1カラム*/
	#Content.oneColumn{
		float: none;
		width: 900px;
	}
	
	/*※右カラムスライドがずれるのでタイトルを枠の外に出す*/
	h2.title{
		width: 900px;
		margin: 0 auto 30px;
	}
	
	/*各コンテンツ区切り　調整*/
	.section{
		padding-bottom: 20px;
	}

	/*右ナビ*/
	#Sub{
		position: relative;
		float: right;
		width: 200px;
	}
	
		#nav {
			margin-bottom: 15px;
		}
		#nav li {
			font-size: 14px;
			font-weight: bold;
			line-height: 18px;
			background: url(../images/navi-right/line.gif) left bottom no-repeat;
		}
		#nav li.last {
			background: none;
		}
		#nav a {
			display: block;
			color: #7ecaf5;
			padding: 7px 0 7px 10px;
			text-decoration: none;
			background: url(../images/navi-right/icon-yellow.gif) left 10px no-repeat;
		}
		#nav a:hover {
			background: #fff06d;
		}
		#nav .current a {
			color: #1791d5;
			background: url(../images/navi-right/icon-blue.gif) left 10px no-repeat;
		}
	
		/*#Sub .facebookSide {
			overflow: hidden;
			width: 185px;
			height: 340px;
			border-right: 1px solid #ccc;
		}*/


/*フッタ*/
#Footer{
	width: 100%;
	height: 560px;
	background: url(../images/footer/bg.gif) top center no-repeat;
}

	/*上部*/
	#Footer .fTop{
		position: relative;
		width: 900px;
		height: 440px;
		padding-top: 14px;
		margin: 0 auto 20px;
		
		font-size: 14px;
		line-height: 20px;
	}
	
		#Footer .fTop .title{
			margin-bottom: 8px;
		}
	
		#Footer .fTop .cell{
			float: left;
			width: 293px;
			height: 500px;
			background-color: #fff;
			margin-right: 7px;
			
			border-radius: 4px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
		}
		#Footer .fTop .cell.last{
			width: 300px;
			margin-right: 0px;
		}
	
			#Footer .fTop .cell .inner{
				padding: 12px 0 0 14px;
			}
	
			#Footer .fTop .cell .subtitle{
				margin-bottom: 10px;
				width:260px
			}
	
				#Footer .fTop .cell .price{
					width:120px;
					margin-left:10px;
					padding-top:2px;
				}
		
			#Footer .fTop .cell strong{
				display: block;
				padding-left: 14px;
				background: url(../images/footer/icon/circle.gif) left center no-repeat;
				margin-bottom: 3px;
			}
	
			#Footer .fTop .cell .subtitle_s{
				display: block;
				padding-left: 14px;
				background: url(../images/footer/icon/circle_s.gif) left center no-repeat;
				margin-bottom: 3px;
			}
			#Footer .fTop .cell .ftsmall{
				font-size: 12px;
			}
	
			#Footer .fTop .cell ul{
				margin-bottom: 10px;
			}
	
			#Footer .fTop .cell ul.footerSmall{
				margin-bottom: 3px;
				font-size:12px;
			}
	
			#Footer .fTop .cell li{
				padding-left: 14px;
				background: url(../images/footer/icon/line.gif) left 4px no-repeat;
				margin-bottom: 2px;
			}
	
		#Footer .fTop .pagetopbtn{
			position: absolute;
			right: 0px;
			top: -38px;
		}


	/*代金引換・追加*/
		#Footer .fTop .cell .payment_note{
			font-size:15px;
			font-weight:bold;
		}


		#Footer .fTop .cell .payment_note2{
			font-size:13px;
			font-weight:bold;
		}



	/*下部*/
	#Footer .fBottom{
		position: relative;
		width: 900px;
		height: 102px;
		margin: 0 auto;
	}
	
		#Footer .fBottom .logo{
			float: left;
			width: 305px;
			padding-top: 23px;
		}
	
		#Footer .fBottom .address{
			float: left;
			width: 488px;
			font-size: 13px;
			line-height: 20px;
			padding-top: 23px;
		}
	
			#Footer .fBottom .address span{
				font-weight: bold;
			}
	
			#Footer .fBottom .address li{
				float: left;
				width: 120px;
			}
	
			#Footer .fBottom .address li.count{
				float: left;
				width: 220px;
			}
	
			#Footer .fBottom .address li.count img{
				vertical-align: middle;
			}
	
			#Footer .fBottom .address li.count span.text{
				vertical-align: bottom;
				margin-left: 5px;
				font-size: 11px;
				color: #333366;
			}
	
		#Footer .fBottom .pct{
			float: right;
			width: 99px;
		}
		
		
/* -----------------------------------------------------------------

 カート
 
------------------------------------------------------------------ */


/* テーマ色（オレンジ系・変更OK） */
:root{
  --fab-bg:  #ff7a00;  /* サークル背景（鮮やかオレンジ） */
  --fab-fg:  #ffffff;  /* アイコン色 */
  --fab-ring:#ffc077;  /* フォーカスリング */
  --label-bg:#ffffff;  /* ラベル背景 */
  --label-fg:#ff7a00;  /* ラベル文字色 */
}

/* SR-onlyが不要になったので省略可。別用途であれば維持 */

/* 右下10px固定・フラットのカートバナー（サークル） */
.cart-fab-flat{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  width: 60px;
  height: 60px;
  border-radius: 9999px;

  background: var(--fab-bg);
  color: var(--fab-fg);
  border: 2px solid rgba(0,0,0,0.04);
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cart-fab-flat:hover{ transform: translateY(-1px); }
.cart-fab-flat:active{ transform: translateY(0); filter: brightness(.98); }
.cart-fab-flat:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 0 6px var(--fab-ring);
  border-color: transparent;
}

/* アイコン（白） */
.cart-fab-flat__icon svg{
  display:block;
  stroke: currentColor;
}

/* ラベル（カートを見る）— サークルの"左"にピル型で表示 */
.cart-fab--with-label{
  /* アンカー自体はサークルなので余白は不要 */
}
.cart-fab-flat__label{
  position: absolute;
  right: 70px;            /* サークルの左側に配置（60px + 余白） */
  bottom: 50%;
  transform: translateY(50%); /* 見た目の中心揃え（やや下寄せでかわいげ） */

  max-width: 220px;
  padding: 8px 12px;
  background: var(--label-bg);
  color: var(--label-fg);
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  white-space: nowrap;

  /* モバイルではデフォ非表示にして省スペース */
  display: none;
}

/* 480px以上の画面でラベルを自動表示 */
  .cart-fab-flat__label{ display: inline-block; }

/* 小さい画面ではサークル/アイコンを少し縮小（位置は10pxのまま） */
  .cart-fab-flat{
    width: 60px;
    height: 60px;
  }
  .cart-fab-flat__icon svg{
    width: 30px;
    height: 30px;
  }

/* ダークモード（オレンジはそのまま、ラベルを少し落ち着かせる） */
@media (prefers-color-scheme: dark){
  :root{
    --label-bg:#f8fafc;
    --label-fg:#ff7a00;
  }
}