@charset "UTF-8";

/* CSS Document */
::-moz-selection {
	background: #d3a359;
	color: #000000;
}

::selection {
	background: #d3a359;
	color: #000000;
}

html,
body {
	overflow-x: hidden;
	/* 横スクロールを隠す */
}

html {
	scroll-behavior: smooth;
}

body {
	/* font-family: "Noto Sans JP", sans-serif;	 */
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial,
		Verdana, Roboto, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ",
		"Meiryo", sans-serif;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 300;
	text-align: center;
	color: #121212;
	background-color: #ffffff;
	min-width: 100%;
	min-height: 100dvh;
}

* {
	vertical-align: top;
	box-sizing: border-box;
	word-break: break-all;
}

a {
	color: #121212;
	display: inline-block;
	text-indent: 0;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* 共通 */
.wrapper {
	width: 1200px;
	max-width: 95%;
	text-align: center;
	margin: 0 auto;
	position: relative;
}

p {
	margin-bottom: 1rem;
}

p.txt_s {
	font-size: 0.875rem;
}

li {
	text-align: left;
	margin-bottom: 1rem;
}

img {
	max-width: 100%;
}


button {
	font-size: 1.125rem;
	padding: 6px 30px;
	border: none;
}

button a {
	text-decoration: none;
}

button:hover {
	opacity: 0.8;
}

/* リンクボタン */
.btn-link a {
	border: solid 1px #ccc;
	border-radius: 6px;
	background: #fff;
	padding: 10px 20px;
	margin: 20px;
	text-align: center;
	text-decoration: none;
	min-width: 250px;
}

.btn-link a:hover {
	opacity: 0.7;
}

/* 注意事項へのリンクボタン */
.btn-link-notice {
	border: #c00 solid 1px;
	border-radius: 6px;
	margin-bottom: 2rem;
	background: #fff;
}

.btn-link-notice a {
	color: #c00;

}



/* リセットで消えたリストマークの復活 */
.with-marker ul,
.with-marker li {
	list-style-type: disc;
	margin-left: 2rem;
}

.with-marker-ol ol,
.with-marker-ol li {
	list-style-type: decimal;
	margin-left: 2rem;
}


.sp,
.tb {
	display: none;
}

@media screen and (max-width:1200px) {
	.tb {
		display: block;
	}

	.ps,
	.sp {
		display: none;
	}

}

@media screen and (max-width:767px) {
	.sp {
		display: block;
	}

	.pc,
	.tb {
		display: none;
	}

	p {
		text-align: left;
	}
}



/* /////////////////// */
/* ヘッダー             */
/* /////////////////// */
header {
	display: flex;
	justify-content: space-between;
	padding: 10px;
}

.logo img {
	width: 220px;
}

@media screen and (max-width:767px) {
	.logo {
		max-width: 50%;
	}
}


/* //////////////////////////// */
/* ハンバーガーメニュー */
/* //////////////////////////// */

/* ☰ボタン */
#gl_nav_hdr {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* position: fixed; */
	/* top: -20px; */
	/* right: 10px; */
	z-index: 99;
}

#gl_nav_hdr div {
	color: #000;
	font-size: 30px;
	padding-right: 30px;
}

.nav-btn {
	cursor: pointer;
	width: 40px;
	height: 30px;
	position: relative;
}

.nav-btn span {
	display: block;
	position: absolute;
	right: 0;
	width: 100%;
	height: 5px;
	background: #000;
	border-radius: 5px;
	transition: 0.4s;
}

.nav-btn span:nth-child(1) {
	top: 0;
}

.nav-btn span:nth-child(2) {
	top: 12px;
}

.nav-btn span:nth-child(3) {
	top: 24px;
}

#gl_nav {
	position: relative;
}

#gl_nav ul {
	width: 300px;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	top: 50px;
	right: 0;
	padding: 0 0 30px 0;
	z-index: 98;
}

.gl-nav ul#menu,
ul#menu {
	padding: 30px;
	display: flex;
	flex-direction: column;
	width: 300px;
}

#menu li {
	display: block;
	border: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 2rem;
}

#menu li a {
	/* display: block; */
	padding: 10px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 300;
	text-decoration: none;
	/* width: 100%; */
}

#menu li:last-child a {
	border-bottom: none;
}

/* サブメニュー（アンカーリンク）はPCでは非表示 */
#menu .sub_menu {
	display: none;
}

/* ルピシアトップへのリンク */
#menu li.parent_menu {
	margin-top: 20px;
	padding-top: 20px;
	border-top: solid 1px rgba(255, 255, 255, 0.3);
}


/* 最初は非表示 */
ul#menu {
	position: absolute;
	top: 50px;
	right: 0;
	width: 300px;
	transform: translateX(100%);
	opacity: 0;
	transition: transform 0.8s ease, opacity 0.8s ease;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
	padding: 1em;
	z-index: 99;
}

/* ☰クリックで表示 */
ul#menu.show {
	transform: translateX(0);
	opacity: 1;
}


/* Xにする */
.nav-btn.show span:nth-child(1) {
	transform: rotate(45deg);
	top: 12px;
}

.nav-btn.show span:nth-child(2) {
	opacity: 0;
}

.nav-btn.show span:nth-child(3) {
	transform: rotate(-45deg);
	top: 12px;
}

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

	/* ☰ボタン */
	#gl_nav_hdr {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 99;
	}

	#gl_nav ul {
		position: fixed;
		top: 50px;
	}

	.gl-nav ul#menu,
	ul#menu {
		width: 100%;
		max-width: 500px;
	}

	/* スマホだけアンカーリンク表示 */
	#menu .sub_menu {
		display: block;
		margin-left: 2rem;

	}

	#menu .sub_menu a {
		font-size: 1.125rem;
	}

	ul#menu li {
		list-style: none;
		position: relative;
		padding-left: 1rem;
	}

	ul#menu li.sub_menu::before {
		content: "•";
		position: absolute;
		left: 0;
		top: 0.6em;
		color: #ffffff;
		font-size: 1em;
	}

}

/* /////////////////// */
/* コンテンツ　　       */
/* /////////////////// */
section h2 {
	border-bottom: solid 1px #ccc;
	margin-top: 100px;
	text-align: left;
}

/* 前のページに戻る */
.navi-back {
	max-width: 95vw;
	margin: 10px 10px 0 10px;
	/* margin: 0 auto; */
	vertical-align: baseline;
	font-size: 14px;
	text-align: left;
}

.navi-back a {
	padding: 0 .5em;
	vertical-align: baseline;
	font-size: 14px
}

.navi-back a:hover {
	opacity: 0.8;
}


/* アンカーリンク */
.item_nav {
	padding: 10px;
}

.item_nav ul {
	display: flex;
	gap: 30px;
	justify-content: flex-start;
	height: fit-content;
}

.item_nav li {
	display: block;
	text-align: center;
	padding: 10px 30px;
}

.item_nav li::after {
	display: inline-block;
	content: "＞";
	transform: rotate(90deg) scaleX(0.5);
	font-size: 1.25rem;
	margin-left: 0.5rem;
}

.item_nav a {
	text-decoration: none;
}

.item_nav a:hover {
	opacity: 0.6;

}

@media screen and (max-width: 767px) {
	.item_nav {
		display: none;
	}
}

/* コンテンツ内見出し */
#item h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
	font-size: 1.75rem;
	margin: 30px auto;
	padding: 10px;
}

#item h3::before,
#item h3::after {
	content: "";
	width: 100px;
	height: 3px;
	background: #ccc;
}

/*===== サブページのコンテンツ =====*/
.subpage {
	margin-top: 50px;
}

.subpage_content {
	width: 1000px;
	margin: 100px auto;
}


/*===== メール注文の注意事項 =====*/

.notes {
	background: #f4f4f1;
	padding: 20px;
	margin-top: 50px;
}

.notes button {
	background: #ffffff;
	border: solid 1px #ccc;
	border-radius: 6px;
}


/* メール注文テキスト */
.mail-order-list {
	padding: 50px 30px;
	background: #fff;
	width: fit-content;
	margin: 10px auto;
	position: relative;
}

.mail-order-address {
	margin-top: 50px;
	padding: 20px;
	background: #ffffff;
}

#notes_2 ol li {
	margin-bottom: 0.5em;
}

.mail-order-list ol li {
	padding-left: 1em;
}

/* メール注文テキストをコピーボタン */
button#copyButton {
	position: absolute;
	top: 5px;
	right: 5px;
	padding: 0 10px;
	margin: 0;
	font-size: 0.875rem;
	border: solid 1px #999;
	cursor: pointer;
}

/* メール注文テキスト（サブページ） */
.subpage_content .mail-order-list {
	width: fit-content;
	background: #f4f4f1;
	padding: 50px 30px;
	margin: 0 auto;
	position: relative;
}

/* メール送信ボタン */
button.mail {
	font-size: 1.5rem;
	padding: 10px 30px;
	background: #ccc;
	background: #206139;
	border: none;
	border-radius: 6px;
	margin: 30px;
}

button.mail a {
	text-decoration: none;
	color: #ffffff;
}

button.mail a:hover {
	opacity: 0.8;

}


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

	/* アンカーリンク */
	.item_nav ul {
		flex-wrap: wrap;
		gap: 0 0px;
	}

	.item_nav li {
		padding: 10px;
		margin-bottom: 0;
	}

	/* コンテンツ内見出し */
	#item h2 {
		padding: 0 10px;
	}

	#item h3 {
		font-size: 1.25rem;
	}

	#item h3::before,
	#item h3::after {
		flex: 1;
	}

	/* 注意事項 */
	#order-notes p {
		text-align: left;
	}

	/* メール送信ボタン */
	button.mail {
		font-size: 1rem;
	}

	/*===== サブページのコンテンツ =====*/
	.subpage_content {
		width: 95%;
		margin: 50px auto;
	}

}

@media screen and (max-width:767px) {
	h2#itemlist {
		margin-top: 50px;
	}

	/* メール注文テキスト */
	.mail-order-list,
	.subpage_content .mail-order-list {
		margin: 0;
		padding: 50px 10px 20px;
	}

}

/*===== トップページ =====*/

#global-title h1 {
	font-size: 2rem;
	margin: 30px;
}

/* box-howto */
.box-howto {
	margin: 30px auto;
	padding: 30px;
	background: #f4f4f1;
	text-align: center;
}

.box-howto p {
	width: fit-content;
	text-align: left;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}

.btn-order {
	display: inline-block;
	padding: 20px;
	background: #29603B;
	text-decoration: none;
	color: #fff;
	width: 300px;
}

@media screen and (max-width:767px) {
	#global-title h1 {
		font-size: 1.5rem;
	}

	.box-howto h3 {
		text-align: left;
	}

}

/*===== 注文方法ページ =====*/

/* 購入の流れ */
.flow-process {
	background-image: radial-gradient(#c9bc9c 2px, transparent 2px);
	background-size: 10px 10px;
	/* 縦方向の間隔を調整 */
	background-repeat: repeat-y;
	/* 縦方向に繰り返す */
	background-position: center;
	/* 中央に配置 */
}

.customer {
	/* background: #f9f7f1; */
	background: #e3ddcf;
	padding: 10px 20px;
	text-align: left;
	margin-top: 20px;
}

.customer-title {
	font-size: 2rem;
}

.lupicia {
	/* border: solid 2px #c9bc9c; */
	border-radius: 6px;
	background: #f9f7f1;
	width: 380px;
	padding: 10px 20px;
	margin-top: 20px;
	margin-left: auto;
	text-align: left;
}

.lupicia img {
	margin-right: 10px;
}

.tax {
	margin: 20px;
}

.tax p {
	color: #eb360c;
	background: #ffffff;
	text-align: center;
	margin: 30px auto;
}

/* 支払い方法のフロー図 */

ol.ol-checkout {
	margin-left: 1rem;
}

.ol-checkout li {
	padding-left: 1rem;

}

.ol-checkout li::marker {
	font-size: 2rem;
	font-weight: bold;
	color: #206139;
}

.security {
	margin-top: 50px;
}


@media screen and (max-width:767px) {
	.lupicia {
		width: 95%;
		margin: 20px auto;
		padding: 10px;
	}

	.tax p {
		text-align: left;
	}

}


/*===== 注意事項 =====*/
#notice h2 {
	margin-bottom: 2rem;
}

#notice h3 {
	text-align: left;
	background: #f4f4f1;
	margin: 50px 0 10px;
	padding: 7px 20px;
}

#notice p {
	text-align: left;
	margin: 0.35rem 0;
}

#notice li {
	position: relative;
	margin: 1.5rem 0 1.5rem 1rem;
	padding-left: 1.5rem;
}

#notice li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.6em;
	height: 0.6em;
	background-color: #000;
}

#notice ul.with-marker li {
	padding-left: 0;
	margin: 0.5rem 0 0 2rem;
}

#notice ul.with-marker li::before {
	content: none;
	display: none;

}

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

	#notice ul {
		margin-left: 0;
	}

	#notice li {
		padding-left: 1rem;
	}

	#notice ul.with-marker li {
		margin-left: 1rem;

	}
}

/*===== おすすめ商品 =====*/
/*---商品一覧 ---*/
.grid_item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: #f4f4f1;
	padding: 10px
}

#item h4 {
	font-size: 1.5rem;
	text-align: left;
	margin-top: 20px;
	padding: 0;
}

#item h4.green {
	border-bottom: solid 5px olivedrab;
}

#item h4.oolong {
	border-bottom: solid 5px olive;
}

#item h4.black {
	border-bottom: solid 5px brown;
}

#item h4.wellness {
	border-bottom: solid 5px rgb(226, 178, 45);
}

/* アイテム */
.list_item {
	display: flex;
	background: #fff;
}

.i_img {
	width: 40%;
}

.i_img img {
	width: 100%;
}

.i_text {
	flex: 1;
	padding: 10px;
	font-size: 1rem;
}

.i_name {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 0;
}

.i_name a {
	text-decoration: none;
}

.i_name span {
	border: solid #333 1px;
	padding: 0 5px;
	margin-right: 10px;
}

.i_kana {
	font-weight: bold;
}

.i_desc1 {
	text-indent: -5rem;
	padding-left: 5rem;
}

.i_desc1 img {
	width: 30px;
	height: 30px;
}

.i_desc2 {
	margin-top: 10px;
}

@media screen and (max-width:767px) {
	.grid_item {
		grid-template-columns: 1fr;
	}
}


/*===== 利用規約ページ =====*/
#userpolicy {
	width: 95%;
}

#userpolicy h2 {
	margin-bottom: 2rem;
}

#userpolicy h3 {
	text-align: left;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

#userpolicy .with-marker li {
	margin-left: 3rem;
}

#userpolicy p {
	text-align: left;
}

/*===== プライバシーポリシー　ページ =====*/
#privacy {
	width: 95%;
}

#privacy h2 {
	margin-bottom: 2rem;
}

#privacy .endtext p {
	text-align: right;
}

/* /////////////////// */
/* フッター　　　       */
/* /////////////////// */

nav.footer_nav {
	background: #ffffff;
}

#footer {
	margin-top: 100px;
}

.footer_inner {
	padding: 20px 50px;
	border-top: solid 1px #666;
	display: flex;
	justify-content: space-between;
}

/* フッターナビ */
.footer_nav ul {
	display: flex;
	gap: 1rem;
}

.footer_nav li {
	font-size: 1rem;
}

.footer_nav li::after {
	content: "|";
	margin-left: 1rem;
}

.footer_nav li:last-child::after {
	content: none;
}

.footer_nav a {
	text-decoration: none;
}

/* フッターアイコン */
.footer-icon {
	display: flex;
	gap: 20px;
}

.footer-icon img {
	width: 32px;
	height: 32px;
}

/* コピーライト */
#copyright {
	font-size: 16px;
	color: #fff;
	background-color: #206139;
	padding: 20px;
	margin-top: 30px;
}

/*===== トップへ戻るボタン =====*/
#pagetop {
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	text-align: center;
	line-height: 48px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none;
}

#pagetop a {
	text-decoration: none;
	color: #fff;
}

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

	.footer_inner {
		padding: 30px 0;
		flex-direction: column;
	}

	/* フッターナビ */
	.footer_nav ul {
		flex-direction: column;
		gap: 0;
	}

	.footer_nav li {
		text-align: center;
	}

	.footer_nav li::after {
		content: none;
	}

	.footer-icon {
		margin-top: 20px;
		justify-content: center;
	}

	/*===== トップへ戻るボタン =====*/
	#pagetop {
		width: 32px;
		height: 32px;
		font-size: 1rem;
		line-height: 32px;
		position: fixed;
		bottom: 20px;
		right: 10px;
		display: none;
	}

	#pagetop:hover {
		opacity: 1;
	}
}