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

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
	background: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	margin: 0;
	width: 100%;
}

a {
    color:#000;
}

img {
	max-width: 100%;
}

div {
	box-sizing: border-box;
}

/** -------------------------
	ヘッダー　ナビ上
------------------------- **/
#headerTop {
	background: #f6f6f6;
	box-sizing: border-box;
	padding: 10px 5px;
	position: relative;
	z-index: 10;
}

#headerTop .logo {
	text-align: left;
}

#headerTop .logo img {
	margin: 10px;
	width: 40%;
    filter: invert(1);
}

#headerTop .logo p {
	color: #331A00;
	font-size: 11px;
	margin: 0;
}

/* ガイドボタン */
#headerTop .guideBtn {
    width:27px;
	position: absolute;
	top: 4.5vw;
	right: 10px;
}
#headerTop .cartBtn {
    width:27px;
	position: absolute;
	top: 4.5vw;
	right: 50px;
}
#headerTop .favoriteBtn {
    width:27px;
    position: absolute;
	top: 4.5vw;
	right: 90px;
}
#headerTop .searchBtn {
    width:27px;
    position: absolute;
	top: 4.5vw;
	right: 130px;
}
#headerTop .guideBtn img,#headerTop .cartBtn img,#headerTop .favoriteBtn img,#headerTop .searchBtn img{
    filter: invert(1);
}

/* ガイドメニュー一覧 */
#headerTop .guideMenu {
	background-color: #fff;
	box-sizing: border-box;
	display: none;
	padding: 20px;
	position: absolute;
	top: 0;
	right: 0;
	width: 90%;
	height: 600px;
	z-index:  10000;
}
#headerTop .guideMenu.open {
	display: block;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#headerTop .modal-inner {
	height: 100%;
	overflow: hidden;
  overflow-y: scroll; /* スクロール設定 */
}
#headerTop .guideMenu .logo {
	max-width: 300px;
	text-align: center;
}
#headerTop .guideMenu .searchBox {
	margin: 10px 0;
}
#headerTop .guideMenu .loginBox {
	display: flex;
	margin: 10px -5px;
}
#headerTop .guideMenu .loginBox a {
	display: block;
	justify-content: space-between;
	padding: 20px;
	width: 100%;
	text-align: center;
	text-decoration: none;
	border: 1px solid #000;
	margin: 5px;
}
#headerTop .guideMenu .loginBox a.login {
	background: #000;
	color: #fff;
}
#headerTop .guideMenu .loginBox a.entry {
	color: #000;
}
#headerTop .guideMenu .listBox .ttl {
	color: #000;
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 30px;
	margin-bottom: 10px;
}
#headerTop .guideMenu .listBox a {
	display: block;
	color: #000;
	text-decoration: none;
	padding: 10px 0;
}

#headerTop .guideMenu .itemSearch a {
	border-bottom: dashed 1px #000;
	color: #000;
	display: block;
	font-size: 15px;
	padding: 10px;
	position: relative;
	text-decoration: none;
}

#headerTop .guideMenu .itemSearch a::after {
	content: '\f105';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}
#headerTop .guideMenu .snsBox {
	background: #000;
	text-align: center;
	margin: 40px -20px -20px -20px;
	padding: 20px;
}
#headerTop .guideMenu .snsBox a {
	color: #fff;
	font-size: 20px;
	padding: 10px;
}

/* 看板下メッセージ */
.message {
	background: #45260d;
	color: #f1f1f1!important;
	display: block;
	font-family: 游ゴシック, 游ゴシック体, YuGothic, 'Yu Gothic', "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 13px;
	margin: 0;
	padding: 7px 0;
	text-align: center;
}

/** -------------------------
	ヘッダー　ナビ
------------------------- **/
#firstNav div {
	background: -moz-linear-gradient(top, #aa0449, #000); 
	background: -webkit-linear-gradient(top, #aa0449, #000); 
	background: linear-gradient(to bottom, #aa0449, #000);
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 0;
	padding: 0;
}

#firstNav div a {
	color: #fff;
	display: block;
	font-size: 13px;
	padding: 30px 0 5px;
	position: relative;
	text-align: center;
	text-decoration: none;
	width: 20%;
}

#firstNav div a + a {
	border-left: solid 1px rgba(255, 255, 255, 0.2);
}

#firstNav div a i {
	display: block;
	font-size: 16px;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
}

#secondNav {
	position: relative;
	z-index: 10000;
    top:40px;
}

#secondNav div {
}

#secondNav div a {
	display: block;
}

/* 商品検索 */
#secondNav .itemSearch {
	background-color: #fff;
	border-bottom: solid 5px #000;
	box-sizing: border-box;
	display: none;
	overflow: scroll;
	padding: 10px 50px 10px 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#secondNav .itemSearch.open {
	display: block;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}
/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* 検索窓 */
form {
	width: 100%;
}
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
.seachText {
	border: solid 1px #000;
	border-radius: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 13px;
	margin: 0;
	padding: 10px 10px;
	width: 80%;
}

.seachBtn {
	background-color: #000;
	border: solid 1px #000!important;
	border-radius: 0!important;
	box-sizing: border-box;
	color: #fff;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 13px;
	margin: 0 0 0 -6px;
	padding: 10px 10px;
	width: 20%;
}

/* カテゴリー一覧 */
#secondNav .itemSearch a {
	border-bottom: dashed 1px #000;
	color: #000;
	display: block;
	font-size: 15px;
	padding: 10px;
	position: relative;
	text-decoration: none;
}

#secondNav .itemSearch a::after {
	content: '\f105';
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

#secondNav .itemSearch .b_cat {
	cursor: pointer;
}

#secondNav .itemSearch .b_cat::after {
	content: '\f067';
}

#secondNav .itemSearch .b_cat.active::after {
	content: '\f068';
}

#secondNav .itemSearch .sub {
	display: none;
}

#secondNav .itemSearch .sub a {
	color: #202020;
	font-size: 14px;
	padding-left: 15px;
}
#secondNav .itemSearch .sub a::before {
	content: '├';
	display: inline-block;
	margin-right: 10px;
}
#secondNav .itemSearch .sub a:last-child::before {
	content: '└';
	display: inline-block;
}

/* sns */
#secondNav .sns {
	background-color: #fff;
	box-sizing: border-box;
	display: none;
	padding: 10px 10px 10px 50px;
	position: absolute;
	top: 0;
	right: 0;
}

#secondNav .sns a i {
	background-color: #000;
	border-radius: 50%;
	color: #fff;
	font-size: 24px;
	height: 40px;
	width: 40px;
	position: relative;
}
#secondNav .sns a i::before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#secondNav .sns.open {
	display: table;
	animation: fadeIn 1s ease 0s 1 normal;
	-webkit-animation: fadeIn 1s ease 0s 1 normal;
}

#secondNav #instambas a{
	background-color: #000;
	color: #fff;
	text-decoration: none;
	font-size: 8px;
    line-height: 1.3;
    border-radius: 10%;
    font-weight: bold;
	text-align: center;
}

@keyframes fadeIn { /*「fadeIn」と名前をそろえる*/
    0% {opacity: 0} /*アニメーション開始時は完全に透過*/
    100% {opacity: 1} /*アニメーション終了時は透過しない*/
}
/*旧 Safari 用のベンダー処理*/
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* xボタン */
.close {
	color: #000;
	display: none;
	font-size: 30px;
	margin: 0;
	z-index: 10;
}

.close.guideClose {
	display: table;
}
.close.guideClose i {
	color: #000;
	position: absolute;
	top: 10px;
	left: 10px;
}

.close.itemClose {
	display: table;
	position: absolute;
	top: 10px;
	right: 5px;
}

.close.snsClose {
	display: table;
	position: absolute;
	top: 0;
	right: 65px;
}

/* スクロールしたらheadInだけ追従 */
#headIn.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	background: #f6f6f6;
	padding: 10px 5px;
    border-bottom: 1px solid #dddddd;
}

#headIn.fixed .logo .copy {
	display: none;
}

/** -------------------------
	ヘッダー　ナビ下
------------------------- **/
.searchBox {
	margin: 10px;
}

/* ヘッダー下余白 */
#contents{
    margin-top: 50px;
}

/** -------------------------
	背景色変更による文字色調整
------------------------- **/
#footer .footer aside ul.listmenu li a{
    color: #000;
}
#footer section>p.ch{
    background: #eee;
    color: #000;
}
#footer section>p.ch a{
    color: #000;
}

/** -------------------------
	スライダー矢印非表示
------------------------- **/
#shownImg .bx-pager, #shownImg .bx-controls-direction{
    display: none;
}
#shownImg .bx-wrapper{
    margin:0 auto !important;
}
.loadImgSliderItem .bx-wrapper{
    margin:0 auto !important;
}
.loadImgSliderItem .bx-controls{
    display:none;
}

.footSlider .swiper-pagination{
    display: none;
}
.footSlider .swiper-button-prev, .footSlider .swiper-button-next{
    display: none;
}

/** -------------------------
	TOP
------------------------- **/
#contents section{
    background:#fff;
}
section>div.freearea:first-child{
    background:#fff !important;
}
.freearea{
    color:#000;
    padding:0;
}
.freeBox2{
    background:#fff;
}
.freeBox2 .cateList{
    background:#fff;
}
.li_r div{
    color:#000;
}
.li_r div.price{
    color:#000;
}
.cataloglist ul li{
    background:#fff;
}
.cataloglist .itemname{
    color: #000;
}
.price{
    color: #000;
}
.sp_top .ttl{
    font-family: 'Jost', sans-serif;
    font-size:24px;
    font-weight:normal;
}
.sp_top .ttl span{
    color:#999;
    font-size:12px;
}
    
.sp_top .category ul {
    margin:0;
    padding:0;
}
.sp_top .category ul li {
    box-sizing: border-box;
    float: left;
    width: 50%;
    list-style: none;
    padding:0 5px 0 10px;
}
.sp_top .category ul li:nth-child(2n) {
    box-sizing: border-box;
    float: left;
    width: 50%;
    list-style: none;
    padding:0 10px 0 5px;
}
.sp_top .category ul li a {
    text-decoration: none;
}
.sp_top .category ul li a .inner {
    display: table;
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}
.sp_top .category ul li a .cat_img {
    display: table-cell;
    width: 40px;
    padding-right: 8px;
    vertical-align: middle;
}
.sp_top .category ul li a .cat_img img {
    max-width: 100%;
    height: auto;
}
.sp_top .category ul li a .cat_name {
    display: table-cell;
    font-size: 12px;
    line-height: 1.5;
    color: #3c4650;
    vertical-align: middle;
}
.sp_top .spNews li a{
    text-decoration: none;
}
section>div.freearea:first-child{
    padding-top:0 !important;
}
/* 見出し調整 */
#contents .title{
    background: none;
}
.title h1{
    font-family: 'Jost', sans-serif;
    font-size: 24px;
    font-weight: normal;
    position: relative;
}
.title h1#mp_txt_new, .title h1#mp_txt_rank, .title h1#mp_txt_rec {
    display:block;
    height:40px;
}
.title h1#mp_txt_new::after{
    content:"新商品";
    position: absolute;
    left:10px;
    top:30px;
    color:#999;
    font-size:12px;
}
.title h1#mp_txt_rank::after{
    content:"売れ筋商品";
    position: absolute;
    left:10px;
    top:50px;
    color:#999;
    font-size:12px;
}
.title h1#mp_txt_rec::after{
    content:"再入荷商品";
    position: absolute;
    left:10px;
    top:50px;
    color:#999;
    font-size:12px;
}
.btn button{
    background: #fff;
    color: #000;
}

/* お店ページに会員カート情報表示（SMP03） */
.member_info_cart_info #headerbox {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    background: url('../../../hpgen/HPB/theme/img/header_bg.gif') repeat-x left top;
    display: table;
    padding: 15px 10px;
    box-sizing: border-box;
    vertical-align: middle;
}

.member_info_cart_info #headerbox a {
    color: #282828;
    display: inline-block;
    position: relative;
}

.member_info_cart_info #logo {
    width:25%;
    display: table-cell;
    vertical-align: middle;
}

#hbtnbox {
    width: 34%;
    padding-left: 41%;
    vertical-align: middle;
    display: table-cell;
    text-align: right;
}

.member_info_cart_info #hbtnbox img {
    width: 60px;
    height: auto;
}

span.item_cnt  {
    position: absolute;
    right: -10px;
    top: 0px;
    border-radius: 50%;
    min-width: 15px;
    font-size: 10px;
    text-align: center;
    padding: 3px 1px;
    border: 1px solid #FF6F6F;
    background-color: #ff6f6f;
    color: #fff;
}

#member_info {
    line-height: 135%;
    font-size: 11px;
}

.memberrank {
    display: inline-block;
    font-size: 10px;
}

/* お店ページに会員カート情報表示（非表示設定） */
.member_info_cart_info {
    display: none;
}

.member_info_cart_info .account_guest {
    display: none;
}

.member_info_cart_info .rank_name_0 {
    display: none;
}

.member_info_cart_info .rankup_none {
    display: none;
}

.member_info_cart_info .nrank_prc_0 {
    display: none;
}

.member_info_cart_info .nrank_cnt_0 {
    display: none;
}

.member_info_cart_info .firstname_guest {
    display: none;
}

.member_info_cart_info .more_maru_1 {
    display: none;
}

.member_info_cart_info .free_shipping_0 {
    display: none;
}

.member_info_cart_info .shipping_box_none {
    display: none;
}

.member_info_cart_info .pointmember_none {
    display: none;
}

.member_info_cart_info .rankmember_none {
    display: none;
}

.member_info_cart_info .memberrank_none_none {
    display: none;
}

.member_info_cart_info #member_info_none_none {
    display: none;
}

/** -------------------------
	下層ページ調整
------------------------- **/
/* 商品説明背景 */
#contents .description #group {
    -webkit-box-shadow:none;
    background: white;
}
#contents .description #group h1{
    color: black;
}
#contents .description aside{
    -webkit-box-shadow:none;
    background: white;
    color: black;
}
/* カートに入れるボタンまわり */
.stock form{
    background: white;
    -webkit-box-shadow: none;
}
.stock form input{
    border-radius: 0;
}
#pi_cart table.matrix tr td{
    color: #000;
}
#spsVarpriceBox > div{
    background: #ffffff;
    color: #000;
}
#spsVarpriceBox > div #btnKagoService input[type='submit']{
    border-radius: 0px;
}
.stock form input[type="submit"]{
    background: url(https://grace-garden.co.jp/sp/img/btn3_bg_simple.png) no-repeat;
    height: 50px;
}
.stock .wish_add{
    background: url(https://grace-garden.co.jp/sp/img/bm_smp_simple.png) no-repeat;
    height: 50px;
    color: #000;
}
#contents>section>p{
    background: white;
    color: black;
}
.attention{
    background: white;
    color: black;
    background-image:none;
}
.formcontents{
    background: white;
    color: black;
}
.ar_link_r a{
    background-color: white;
    color: black;
}
.ar_link_l a{
    background-color: white;
    color: black;
}
.info{
    background: white !important;
    color: black;
}
section>div:not(.accordion):not(.customersbox):not(.titlebar_list):not(.footer):not(.period):not(.form_t):not(.formlist):not(.titlebar_g):not(.pager):not(.required):not(.title):not(.formbox):not(.formbox_n):not(.title_c):not(.comment):not(.commentbox):not(.titlebar_g_o):not(.product_img):not(#sub_img):not(#freearea):not([class^=mp_itemgroup_layout]):not([id^=mp_ta_free]):not([class^=mp_itemfreepage_layout]):not([class^=mp_itemcategory_layout]):not(.mp_subcategory1_layout1):not(.mp_subcategory2_layout1):first-child{
    background: white;
}
#page{
    background: white;
    color: black;
}
#contents>section>aside>div.formbox{
    background: white;
    color: black;
}
.formtable{
    background: white;
    -webkit-box-shadow:none;
}
.formtable table .r{
    background: white;
    color: black;
}
.payment .formtable{
    background: white;
    color: black;
}
.payment .formtable li+p{
    color: black;
}
.text_1{
    color: black;
}
.btg_r input[type="submit"]{
    background: url(https://grace-garden.co.jp/sp/img/btn3_bg_simple.png) no-repeat;
    height: 50px;
}
.formbox input.submit_or{
    background: url(https://grace-garden.co.jp/sp/img/btn3_bg_simple.png) no-repeat;
    height: 50px;
}
.formbar{
    background:none;
}
.formbar>h3{
    font-weight: bold;
}
.formtable table{
    background: white;
    color: black;
}
.table2 td{
    color: black;
}
.table2 td.esy{
    color: black;
}
.description .seemore{
    height: 30px;
    background: black;
}
.titlebar_g_o{
    background:none;
}
.titlebar_g_o h1{
    padding:0;
    font-weight: bold;
}
#pi_review div.total{
    background: white;
}
.customerbar{
    background: white;
    -webkit-box-shadow: none;
}
.customerscomment{
    background: white;
    -webkit-box-shadow: none;
}
.form_t p{
    color: black;
}
aside.agreement pre{
    color: white;
}
.info+div{
    background: white;
}
.button .btg_r a{
    background: url(https://grace-garden.co.jp/sp/img/btn3_bg_simple.png) no-repeat;
    height: 50px;
    padding: 15px 0 0;
}
.itemlist li a{
    background:white;
    border: 1px solid #ccc;
    -webkit-box-shadow: none;
}
.itemlist .wish_button_area .wish_add_cart{
    background: black;
}

.productprice p{
    color: black;
}

.productprice p span{
    color: black;
}

.customerscomment p{
    color: black;
}

/* カテゴリ一覧サブメニュー */
.accordion aside ul.listmenu li a{
    color: black;
    background-color: white;
}


.sp_cal{
    display:flex;
    justify-content: space-between;
}

/* 在庫表示調整 */
.stock .variation3 td {
    background: white;
    border:none;
}

.cataloglist .wish_area .wish_add{
    padding: 5px 10px;
}