@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Noto+Sans+JP:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');

/*============================
common style
============================*/
*{margin: 0 auto; padding: 0;}

html, body{
	margin: 0;
	padding:0;
	width:100%;
	height:100%;
	-webkit-overflow-scrolling: touch;
}
body{position: relative; background:url("../pc-img/back/back.jpg?") no-repeat top center; background-repeat:no-repeat; background-attachment:fixed; background-size:cover; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;}
a{text-decoration: none;}


section{
	width:100%;
	margin:0 auto;
	padding:70px 0;
	text-align:center;
}

p{text-justify: inter-ideograph !important; text-align: justify !important;}

/*寄せ*/
.valign-top{vertical-align:top !important;}

/*余白*/
.pb20{padding-bottom: 20px;}
.mb20{margin-bottom: 20px !important;}

/*表示切替*/
.pc-none{display: none;}
.sp-none{display: inherit;}

/*タイマー設定*/
.view_timer {display:none;}

/*画像*/
img{vertical-align:top;}
img.kadomaru{border-radius: 1.5em;}

/* 背景色 */
.back-gray{background: #ebebeb;}
.back-white{background: rgba(255, 255, 255,.8)}

/*みだし*/
h1, h2, h3, h4, h5{margin-bottom: 15px;}

/* フォントサイズ */
.fs10 {font-size: 10px; letter-spacing:-0.5px;}
.fs11 {font-size: 11px; letter-spacing:-0.5px;}
.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}
.fs17 {font-size:17px;}
.fs18 {font-size:18px;}
.fs20 {font-size:20px;}
.fs25 {font-size:25px;}
.fs30 {font-size:30px;}

/*文字色*/
.red{color: #d23;}

/*線*/
hr.dot-white {border-top: 1px dotted #ffffff; border-right: none; border-bottom: none; border-left: none; }

/*============================
header
============================*/
header{
	position: relative;
	z-index:10 !important;
	height: 65px;
	background: #ffffff;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 15px !important;
}
header img{
	margin:17px 10px 0;
	max-width: 200px;
	width: 50%;
}


/*============================
ポップアップ
============================*/
#c-modal_bg,#c-modal_bg02 {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
	overflow-y: hidden;
}

#c-modal,#c-modal02 {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    width:50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
	text-align: center;
    padding:30px;
	-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#c-modal_close,#c-modal_close02 {
	text-align:center;
	background: #ebebeb;
    padding: 10px 5px;
    cursor: pointer;
}
	.spimg{display:none;}
	.pcimg{display:block; width:80%; margin:0 auto 40px;}
	#c-modal_close{font-size:18px; font-weight:bold; margin-top:20px;}



/*============================
content
============================*/
h1{color: #111; font-weight:500; font-size:4rem; line-height:1.1; letter-spacing:2px; text-align: center; margin: 0 10px 20px; font-family:'Caveat', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;}
h1 span{font-size: 1.5rem;}

/*注意書き用*/
.attention{max-width:580px; width:70%; text-align:left; margin:0 auto 30px;}
.attention h2{font-size:16px; margin-bottom: 5px;}
.attention p{margin-bottom: 20px;}
.attention p:last-child{margin-bottom:0;}


.parallax {width: 100%; height:auto;  background-image: url(../pc-img/220304/sale_back.jpg); 
    background-repeat: no-repeat; background-size:150%; background-position: center top;}


/*売り切れ用*/
.soldoutbox{ position: relative;} /*SOLD OUTを入れる要素にclass追加*/
.soldout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.74);
  display: flex;
  justify-content: center;
  align-items: center;
}
.soldout .soldout-text {
	width: 100%;
	font-size: 160% !important;
	color: #ffffff !important;
	text-align: center;
	margin-bottom: 12rem;
}

/*ポイントアップ企画*/
.ptup_wrap{background:#8c8c64; margin-top: 0; padding-top: 0 !important;}
/*エントリーボタン*/
a.btn_ptup {color:#fff; font-weight:700; font-size:1.5rem; letter-spacing: 3px; height:80px; width: 580px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #333, #000); border:4px solid #333; border-radius: 50px; line-height:80px; display:block; box-shadow: 4px 4px 0 #666; margin:0 auto 30px;}
a.btn_ptup:hover {color:#333; background:linear-gradient(to bottom, #ffffff, #ffffff); border:4px solid #333; text-decoration:none;}


/*LINE友だち企画*/
.line_wrap{background:#cbe5f0 url("../pc-img/220719/line_back.jpg") no-repeat top center; /*background-attachment:fixed;*/ background-size:cover; margin-top: 0px;}
.line_wrap img{margin: 0 auto;}
.line_wrap .attention{background:#fff; padding:40px; margin: 0 auto !important;}
/*友だち登録ボタン*/
a.btn_line {color:#fff; font-weight:700; font-size:1.5rem; letter-spacing: 3px; height:80px; width: 580px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #dd1e79, #b81e5f); border:4px solid #dd1e79; border-radius: 50px; line-height:80px; display:block; box-shadow: 4px 4px 0 #333; margin:0 auto 30px;}
a.btn_line:hover {color:#dd1e79; background:linear-gradient(to bottom, #ffffff, #ffffff); border:4px solid #dd1e79; text-decoration:none;}


/*特集用*/
.fuku_wrap{background:url("https://www.rakuten.ne.jp/gold/cbja/cp/2026fuku/fuku_back.jpg?2412") #E0CE72 no-repeat top center; background-attachment:fixed; background-size:cover; padding-top:0;}
	#cp_box {width:90%; max-width: 900px; text-align: center; margin:0 auto; padding: 50px 0;}
	#cp_box p{width:90%; max-width: 800px; margin: 0 auto; text-align:left; font-size:18px;}
	#cp_box hr{width:90%; max-width: 900px; margin: 40px auto;}

.cmp_wrap{}
.cmp_wrap .inner{background: #fff; width: 90%; max-width:840px; border-radius: 30px; padding: 40px 0;}

.p11th_wrap{width:100%; padding: 50px 0; background:url(../pc-img/240704/11th-back.jpg) #f2eaf5 no-repeat top center; background-repeat:no-repeat; background-attachment:fixed; background-size:cover;}
.new01_wrap{background:#ffffff;}
.new02_wrap{background:#eaeaea;}
.new03_wrap{background:#ffffff;}
.new04_wrap{background:#eaeaea;}
.new_wrap img,.new02_wrap img{margin: 0 auto;}
.new_wrap .text , .new02_wrap .text {}

.tokusyu_wrap{width:100%; padding:80px 0; /*background:url(../pc-img/230124/cpn_back.jpg) no-repeat top center; background-repeat:no-repeat; background-attachment:fixed; background-size:cover;*/
	background: linear-gradient(-225deg, #e6eb94CC 5%, #82cdddCC 30%, #C5C1FFCC 60%, #FFBAC3CC 100%);
	background-size: 200% 100%;
	animation: GradietionAnimation 15s ease infinite;
	padding: 100px 0;
	margin-bottom: 0px;
}
@keyframes GradietionAnimation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/*新発売セールなどに（必要に応じて使用）*/
a.btn_new {color:#fff; font-weight:700; font-size:1.5rem; letter-spacing: 3px; height:80px; max-width: 580px !important; width: 580px; text-align:center; text-decoration:none; background:linear-gradient(to bottom, #ed4a75, #cc3366); border:4px solid #ed4a75; border-radius: 50px; line-height:80px; display:block; box-shadow: 4px 4px 0 #333; margin:0 auto 30px;}
a.btn_new:hover {color:#ed4a75; background:linear-gradient(to bottom, #ffffff, #ffffff); border:4px solid #ed4a75; text-decoration:none;}

/*周年セット*/
.anniv_wrap{background:url("../pc-img/260703/13th_back01.jpg")#ffffff no-repeat top center; background-size:100%; text-align: center; padding: 150px 0 0;}
.anniv_wrap .inner{background:url("../pc-img/260703/13th_back02.jpg") no-repeat bottom center; background-size:100%; padding: 0 0 120px;}

/*アイテム枠*/
ul.two-column{width:1000px; max-width:100%; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap;}
ul.two-column li{width: 49%; display: inline-block; margin-bottom: 50px;}
ul.two-column li .item{height: 100%; margin:0 auto;}
ul.two-column .giza{margin: 20px 60px;}
ul.two-column li .item ul, ul.two-column li .item ul li{width:100%; margin:0 auto;}
.item{width:1000px; max-width: 85%; overflow: hidden; text-align: center; background: #fff; box-shadow: 0px 0px 20px -5px #777777; border-radius: 20px; /*border: #fff solid 1px;*/ margin:0 auto 30px; padding:0;}
.item .main{border-radius: 20px 20px 0 0;}
.item p{width:70%; text-align: left; font-size:15px; letter-spacing:2px; margin: 0 auto 20px; padding: 0 50px;}
.item ul{list-style: none; width: 90%; margin: 0 auto;}
.item ul li{display: inline-block; width: 40%; /*border-right: 1px dotted #a9a9a9;*/ margin-bottom: 30px;}
.item ul.three-row li{display: inline-block; width: 32%; /*border-right: 1px dotted #a9a9a9;*/ margin-bottom: 30px;}


/*割引率バッジ*/
.maru{position: absolute; width: 100px; height: 75px; border-radius: 50%; background: #5dc9de/*#110090*/; color: #fff; font-size: 25px; font-weight:700; line-height: 25px; text-align: center; padding-top: 25px;}
.maru span {font-size: 35px; font-weight:700; margin-right: 5px;}

/*商品名*/
.name{font-size:20px; font-weight:700; margin-bottom: 3px; letter-spacing:1px; line-height: 1.2;}
/*通常価格*/
.retailprice{font-size:15px; letter-spacing: 1px;}
.retailprice span:after{font-size: 12px; font-weight: 500; content: "￥";}/*￥*/
.retailprice s{text-decoration:none; /*position: relative;*/}
/*.retailprice s:before{position: absolute; content: ""; display: block; transform: rotate(-10deg); background-color:#333; width: 60%; height: 1px; top: 50%; left: 0;}*/
.retailprice s:after {font-size: 11px; letter-spacing: -0.5px; content: "(税込)";}/*(税込)*/
/*販売価格*/
.price{color: #d23 !important; font-size: 30px; font-weight: 700; margin-bottom: 15px;}
.price span:after{font-size: 16px; font-weight: 500; content: "￥";}/*￥*/
.price:after{font-size: 14px; font-weight: 500; content: "(税込)";}/*(税込)*/

/*まとめ買い*/
.matomegai, ul.two-column li .item ul li .matomegai{width: 90%; font-size: 14px; text-align: center; margin: 0 auto 5px;}
/*注釈*/
.notes{width: 80%; text-align: left; font-size: 10px; letter-spacing:1.3; letter-spacing: 2px; margin: -40px auto 50px;}

/*購入ボタン*/
a.btn01{color: #ffffff; font-weight:500; font-size: 20px; height: 72px; width: 90%; text-align: center; text-decoration: none; background: linear-gradient(to bottom, #110090, #110070); border: 2px solid #110090; border-radius: 10px; line-height: 72px; display: block; box-shadow: 2px 2px 0 #ededed;  margin: 0 auto 50px;}
a.btn01:hover, a.btn01:active {color:#110090; border:2px solid #110090; background:linear-gradient(to bottom, #ffffff, #ffffff);  text-decoration:none;}

a.btn02{color: #ffffff; font-weight:500; font-size: 20px; height: 72px; width: 90%; text-align: center; text-decoration: none; background: linear-gradient(to bottom, #5dc9de, #5cb3c3); border: 2px solid #5dc9de; border-radius: 10px; line-height: 72px; display: block; box-shadow: 2px 2px 0 #ededed;  margin: 0 auto 50px;}
a.btn02:hover, a.btn02:active {color:#5dc9de; border:2px solid #5dc9de; background:linear-gradient(to bottom, #ffffff, #ffffff);  text-decoration:none;}



/*============================
セールに関する注意枠
============================*/
.sale-attention {
	max-width:800px;
	width:75%;
	margin:0 auto;
	padding: 30px;
}
.sale-attention .fukidashi {
	background-color:#11006d;
	padding:15px;
	border-radius:30px;
	position:relative;
	color:#ffffff;
	width:300px;
	max-width: 70%;
	text-align:center;
	font-size:20px;
	margin:0 auto 30px;
}
.sale-attention .fukidashi:after {
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	margin-left: -10px;
  border: 10px solid transparent;
	border-top-color:#11006d;
	border-bottom-width:0;
	bottom:-10px;
	display:block;
	width:0;
}
.sale-attention h2{
	text-align: left;
	color: #11006d;
	margin: 0 auto 15px;
  border-bottom: 1px solid #11006d;
}
.sale-attention p {
	text-align:left;
	color: #11006d;
	text-indent: -1.0em;
	padding-left: 1.0em;
	font-size:17px;
	line-height: 1.3;
	margin-bottom: 7px;
}



/*============================
footer
============================*/
footer {
	width:100%;
	margin:0 auto 0;
	padding:60px 0;
	background-color: #11006d;
	text-align:center;
}

/* footer内バナー枠 */
.footer-bn{
	max-width: 580px;
	width:80%;
	margin:0 auto 40px;
}
.footer-bn a{
	display: block;
	margin-bottom:15px;
	color:#ffffff;
	text-decoration: none;
	font-size: 13px;
}
.footer-bn a img{
	margin: 0 auto;
	width: 100%;
}
.footer-bn ul{
	overflow: hidden;
}
.footer-bn ul li{
	list-style: none;
	float: left;
	width: 48%;
}
.footer-bn ul li:first-child{
	margin-right: 10px;
}

#footer-navi {max-width: 680px; width:80%; margin: 0 auto; text-align:center; color: #ffffff; }
#footer-navi h2 {margin: auto; font-size:16px; letter-spacing: 2px; padding:10px 0;}
#footer-navi p{padding:10px; text-align: center !important; border-top: 1px dotted #ffffff; border-bottom:1px dotted #ffffff;}
#footer-navi a.tel {font-size:20px; font-weight:600; letter-spacing:2px; line-height:30px; color: #ffffff;}
#footer-navi a.mail {font-size:18px; font-weight:600; letter-spacing:2px; line-height:30px; color: #ffffff;}
#footer-navi  ul {list-style: none; padding:10px 0 20px;  -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-padding-start: 0px;}
#footer-navi  ul li {list-style: none; margin: 0 10px; display:inline-block;}
#footer-navi  ul li a {color: #ffffff; font-size: 80%;}






/*============================
フローティングバナー
============================*/
/*PC追従*/
#pc-follow {z-index:9999;}
/*まとめ買いクーポン*/
.right01 a {position:fixed;  top:150px; right:0; outline:none; display:block; width:100px; height:100px; -webkit-transition: all 0.8s ease;  -moz-transition: all 0.8s ease;  -o-transition: all 0.8s ease;}
.right01 a:hover {width:350px;}
/*LINE友だち限定クーポン*/
.right02 a {position:fixed;  top:270px; right:0; outline:none; display: block; width:100px; height:100px; -webkit-transition: all 0.8s ease;  -moz-transition: all 0.8s ease;  -o-transition: all 0.8s ease;}
.right02 a:hover {width:350px;}

/*SOAバナー*/
.soa a {position:fixed;  top:390px; right:0; outline:none; display: block; width:100px; height:100px; -webkit-transition: all 0.8s ease;  -moz-transition: all 0.8s ease;  -o-transition: all 0.8s ease;}
.soa a:hover {width:385px;}

/*周年セット*/
.left01 a {position:fixed;  top:250px; left:-325px; outline:none; display:block; width:150px; height: 150px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;}
.left01 a:hover { left:0px; width:455px;}

/*福袋*/
.left01 a {position:fixed;  top:100px; left:-305px; outline:none; display:block; width:150px; height: 150px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;}
.left01 a:hover { left:0px; width:455px;}
.left02 a {position:fixed;  top:260px; left:-305px; outline:none; display:block; width:150px; height: 150px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;}
.left02 a:hover { left:0px; width:455px;}
.left03 a {position:fixed;  top:420px; left:-305px; outline:none; display:block; width:150px; height: 150px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;}
.left03 a:hover { left:0px; width:455px;}
.left04 a {position:fixed;  top:580px; left:-305px; outline:none; display:block; width:150px; height: 150px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;}
.left04 a:hover { left:0px; width:455px;}
	


/*============================
画面サイズが1150px以上の場合に適用
============================*/
@media (min-width: 1151px) {
	#sp-follow{display: none !important;} 
}



/*============================
画面サイズが1150px以下の場合に適用
============================*/
@media screen and (max-width:1150px) {
	
	body::before {
		content: "";
		background: url("../sp-img/back/back.jpg?") no-repeat top center;
		background-size:cover;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;}
	
	
	
	/*ポップアップ*/
	#c-modal,#c-modal02 {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    width:90%;
    transform: translate(-50%, -50%);
    background: #ffffff;
		text-align: center;
    padding:30px 10px;
	-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
	.spimg{display:block; width:100%; margin:0 auto;}
	.pcimg{display:none;}
	#c-modal_close{font-size:20px; font-weight:bold;}
	
	
	
	section{padding:30px 0;}

	/*表示切替*/
	.pc-none{display: inherit;}
	.sp-none{display: none !important;}
	
	/*みだし*/
	h1{font-size: 1.8rem; line-height: 1.3; letter-spacing:0;}
	h1 span{font-size: 1rem; letter-spacing:0;}
	
	.parallax {background: url("../sp-img/220304/sale_back.jpg") no-repeat top center; background-size:cover; }
	
	/*エントリーボタン*/
	a.btn_ptup {width:80% !important;  letter-spacing:1px;}
	
	/*LINE友だち企画*/
	.line_wrap{background:url("../sp-img/220719/line_back.jpg?0719") #cbe5f0  no-repeat top center; /*background-attachment:fixed;*/ background-size:100%;}
	/*友だち登録ボタン*/
	a.btn_line {width:80% !important;  letter-spacing:1px;}
	
	/*特集用*/
	.fuku_wrap{background:url("https://www.rakuten.ne.jp/gold/cbja/cp/2026fuku/fuku_back_sp.jpg?") #fee2de no-repeat;  background-size:100%;}
		#cp_box {padding:0 0 30px;}
		#cp_box p{font-size:12px;}
	

	.cpn_wrap{padding: 40 0  !important;}
	
	.p11th_wrap{background:url(../sp-img/240704/11th-back.jpg) #f2eaf5 repeat-y top  center;  background-size:100%; padding:20px 0 60px;} 
	.new01_wrap{background:#ffffff;}
	.new02_wrap{background:#eaeaea;}
	.new03_wrap{background:#ffffff;}
	.new04_wrap{background:#eaeaea;}
	
	/*新発売セールなどに（必要に応じて使用）*/
	a.btn_new {width:85% !important;  letter-spacing:1px;}

	
	/*周年セット*/
	.anniv_wrap{background:url("../pc-img/260703/13th_back01.jpg")#ffffff no-repeat top center; background-size:100%; text-align: center; padding: 60px 0 0;}
	.anniv_wrap .inner{background:url("../pc-img/260703/13th_back02.jpg") no-repeat bottom center; background-size:100%; padding: 0 0 40px;}

	
	/*アイテム枠*/
	ul.two-column{width:100%;}
	ul.two-column li{width:100%;}
	.item p{width:80%; text-align: left; font-size:14px; letter-spacing:1px; padding: 0; margin: 0 auto 20px;}
	.item ul li, .item ul.three-row li{display: inline-block; width: 100%; /*border-right: 1px dotted #a9a9a9;*/ margin-bottom: 30px;}
	
	/*スマホ追従*/
	#sp-follow{position: fixed; bottom: 0; z-index: 9 !important; width: 100%; text-align: center; padding-top: 0; background: none; display: none; /* 最初は非表示にする */}
	#sp-follow a img{width:50%; z-index: 9 !important; }
	
	
	/*footer*/
	footer {padding:60px 0 100px;}
}