/* ヘッダーの被りを解消する */
html {
    font-size: 16px;
}


.header_wrap.view_pc {
    display: block; /* もしくは flex 等 */
}

.view_sp{
		display: none;
	}	

.view_sp_cart{
display: none;
	}
	
.view_pc{
	width: 100%;
}

	.view_footer_sp{
		display: none;
	}

	.youtube_btn{
width: 90%;
    z-index: 300;
    text-align: right;
    position: absolute;
    margin-top: -40px;
		
	}	
	.youtube_btn img{
		width: 120px;
        text-align: right;
		
	}	


.index_wrap {
  align-items: flex-start;

  flex-direction: column;

  /* width: 100%; */
  /* max-width: 1490px; */
  margin: 0 auto;
}

.header-sp-wrap {
  display: none;
}

.header {
  margin: 0 auto;
  font-size: 1.4em;
  width: 100%;
  z-index: 1000;
  display: block;
  position: fixed !important;
  top: 0;
  /* height: 50px; */
  height: auto;
  background-color: #fff;   /* 透けないように白背景にしておく */
  box-shadow: 0 2px 4px rgba(0,0,0,.06); /* 見出しの境界線代わり（お好み） */
}
.text_red {
  color: var(--u8ynp2) !important;
}
.head_line {
  align-items: center;
  background-color: green;
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  width: 100%;
}

._line {
  align-items: center;
  background-color: var(--gray900);
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px;
  width: 100%;
}

.text-1-1 {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  color: #fff;
  width: fit-content;
  text-align: center;
}

.header_wrap {
align-items: center;
    background-color: var(--applecomnero);
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0rem;
    /* padding: 0.8rem; */
    position: relative;
    justify-content: center;
}

.headerlogo_wrap {
  align-items: center;
  background-color: var(--applecomnero);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0rem;
  padding: 1rem 2rem;
  position: relative;
}


.hedaer_logo{
	width:180px;
}

.about_logo{
	width:180px;
	margin-left: 50px;
}

.nav_logo{
	width:20%;
}

.nav_menu{
	width:100%;
	/* max-width: 1120px;  */
}

.hedaer_top {
align-items: center;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 100px;
	margin-bottom: 20px;
}
.logo_wrap :hover {
  opacity: 0.6;
}
.logo {
  width: 100%;
}
.logo_footer {
  width: 200px;
}

.research {
  align-items: center;
  align-self: stretch;
  background-color: var(--hitbox);
  display: flex;
  position: relative;
  width: 498.5px;
  margin-right: 16px;
}

.research-sp{
  display: flex;
  background-color: var(--hitbox);
  align-items: center;
  align-self: stretch;
}

.key {
  border: 0px solid;
background-color: var(--gray100);
  flex-grow: 1;
  gap: 8px;
  padding: 9px 8px;
	max-width: 250px;
}

.text-2-1 {
  color: var(--gray600);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -0.5px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-25 {
  align-items: flex-start;
  background-color: var(--u8ynp2);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 9px;
  position: relative;
	border: 0;
}

.search {
  height: 24px;
  position: relative;
  width: 24px;
}

.login_wrap {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 32px;
  position: relative;
}

.member_wrap {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  position: relative;
}

.text-3-1 {
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.vector-2 {
  height: 28.5px;
  position: relative;
  width: 1px;
}

.frame-2 {
  flex: 0 0 auto;
  position: relative;
}

.cart_wrap {
align-items: center;
    background-color: var(--u8ynp2);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 38px;
    padding: 4px 16px;
    position: relative;
    width: 200px;
	justify-content: space-between;
    
}


.triangle{
	width:10px;
}

.frame-13 {
align-items: flex-end;
    background-color: var(--hitbox);
    flex: 0 auto;
    position: relative;
    display: flex
;
    flex-direction: column;
}

.frame-12 {
  align-items: flex-end;
    background-color: var(--hitbox);
    gap: 4px;
    justify-content: flex-end;
    position: relative;
    display: flex;
}

.number {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 21px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-11 {
  align-items: flex-end;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
}

.text-5-1 {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.cache {
  align-items: flex-end;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
}

.text-6-1 {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.vector {
  align-self: stretch;
  position: relative;
  width: 1px;
}

.frame-10 {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  position: relative;
	align-items: center;
}

.text-8 {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.cart {
  height: 23.5px;
  position: relative;
  width: 23.5px;
}

.header-nav {
align-items: center;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 16px;
}


.nav_wrap ul {
    list-style: none;
    margin: 0;
    padding: 0 0;
    display: flex;
    gap: 4px;
    align-items: center;
}



.menu {
align-self: stretch;
    background-color: var(--hitbox);
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    position: relative;
    align-items: center;
    gap: 20px;
    width: 80%;
}

.category {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.category-dropdown {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列に分割 */
    background-color: #fff; /* 背景色 */
    border: 1px solid #ddd; /* ボーダー */
}

.category-item {
    display: block;
    background-color: #CC6666; /* アイテムの背景色 */
    color: #fff;
    text-align: center;
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; /* 下線をなくす */
}

.category-item:hover {
    background-color: #AA4444; /* ホバー時の背景色 */
}


.text-9 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.vector-3 {
  height: 6.8px;
  margin-right: -0.43px;
  position: relative;
  width: 11.86px;
}

.menu_list {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  justify-content: flex-end;
  position: relative;
}

.menu_item-1 {
  justify-content: center;
}

.free {
  height: 20px;
  position: relative;
  width: 20px;
}

.new {
  height: 20px;
  position: relative;
  width: 20px;
}

.tate_line{
	height: 100px;
    padding-right: 18px;
}

.text-10-3 {
  line-height: 24px;
  margin-top: -1px;
}

.menu_item-2 {
  justify-content: center;
}

.event {
  height: 20px;
  position: relative;
  width: 18px;
}

.text-11 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.present {
  height: 20px;
  position: relative;
  width: 15.25px;
}

.text-12 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.movie {
  height: 18.28px;
  position: relative;
  width: 24px;
}

.text-13 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.fv_wrap {
  overflow: hidden;
}

.fv_list {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
}
.fv_img{
  width: 100% !important;
  display: block;
}

/* Slick */
* {
  margin-to: 0;
  padding: 0;
}
.slider_width {
  margin: 0 auto;
  max-width: 1000px;
}
.slider {
  width: 100%;
  margin: 0 auto 0px;
	background-image: url("../img/slider_bck.jpg");
}

/* 旧スライダー専用にスコープする */
.mypattern .slick-slide img{
  width: 680px!important;
  height: auto;
}

.mypattern {
  width: 100%;
	margin-top: 219px;
	height: 460px;
	align-content: center;
}
.mypattern .slick-slide {
  margin: 15px;

}

.slick-dotted.slick-slider  {
	margin-bottom: 0px !important;
}

.slick-dots {
position: absolute;
    bottom: -45px  !important;
    display: flex;
    /* content: ""; */
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    z-index: 50;
    align-items: center;
    justify-content: center;
}

.ellipse {
  background-color: var(--hitbox);
  border: 1px solid;
  border-color: var(--applecomnero);
}

.ellipse-1 {
  background-color: var(--applecomnero);
}

.content_warp {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
	padding-right: 0px;
    padding-left: 0px;
}

.sp_recommend_viewed_container {
align-items: center;
    display: flex
;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 56px;
    padding: 60px 0px;
    position: relative;
    width: 100%;
}

.recommend_wrap {
  align-items: center;
  background-image: url("../img/bg_recommend.jpg");
	background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 120px 0px;
  position: relative;
  width: 100%;
}

.sp_recommend_wrap {
  align-items: center;
  background-image: url("../img/bg_recommend.jpg");
	background-size: cover;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 100px 0px;
  position: relative;
  width: 100%;
}


.shopping_wrap {
  align-items: center;
  background-color: var(--hitbox);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0px;
  position: relative;
  width: 100%;
}

.gensen {
  align-items: center;
  align-self: stretch;
  background-color: var(--hitbox);
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  justify-content: center;
  position: relative;
  width: 100%;
}

.text-1 {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-2 {
  letter-spacing: 0;
  line-height: 38.4px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
	width: 1080px;
padding: 80px 0 50px;
}

.sp-recommend {
display: flex
;
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: center;
    width: 980px;
    padding: 0px 0 50px;
    flex-direction: row;
    align-items: flex-start;
	margin-bottom: 120px;
}
				.sp-rectangle-4 {
					width: 400px;
					height: 400px;
					object-fit: cover;
					background-color: #fff;
					display: block;
					margin: 0 auto;
					object-position: center;
				}
.product-item {
display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    transition: 0.3s;
    width: 22%;
    min-width: 255px;
    margin-bottom: 60px;
    justify-content: space-between;
}



.sp-recommend-product-item {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    transition: 0.3s;
    width: 548px;
    align-items: stretch;
}


.product-item :hover {
  opacity: 0.7;
}

.sprecommend-product-item :hover {
  opacity: 0.7;
}

.rectangle-4 {
  object-fit: cover;
  position: relative;
}

.product-description {
flex-direction: column;
    align-items: flex-start;
    text-align: left;
    display: flex;
    font-size: 14px;
    line-height: 1.8rem;
}

.sp-product-description {
flex-direction: column;
    align-items: flex-end;
    text-align: left;
    display: flex;
    font-size: 14px;
    line-height: 1.8rem;
}



.categorytag{
	line-height: 1.5em;
    background-color: #f7f7f3;
    padding: 3px 12px;
}


.text-3 {
  height: 6em; /* 4行分の高さを確保 (1.5em x 4) */
  line-height: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 4行固定 */
  word-break: break-word;
  text-align: left;
}

.text-sp {
height: 3em;
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    word-break: break-word;
    text-align: left;
    font-size: 20px;
}


.product-price {
  height: 2em; /* 価格部分の高さを固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.sp-product-price {
  height: 2em; /* 価格部分の高さを固定 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.price {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  position: relative;
  font-size: 16px;
}

.price-1 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-tax {
  line-height: 24px;
  margin-top: 2px;
  font-size: 10px;
}

.text-18 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-4 {
  letter-spacing: 0;
  line-height: 16.8px;
  margin-top: -0.7px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-2 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-23 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-3 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-28 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-4 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-33 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-5 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-38 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-6 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-43 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-7 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-48 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-8 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-53 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-9 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-61 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-10 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-66 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-11 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-71 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-12 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-76 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-13 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-81 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-14 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-86 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-15 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-91 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-16 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-96 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}


.btn_right{
display: flex
;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
}


a.btn_ao_b {
    display: flex;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem 5rem;
    background-image: linear-gradient(75deg, #af212d, #6e212d);
    text-decoration: none;
    transition: 0.3s;
}

a.btn_viewmore {
display: flex;
    align-items: center;
    width: 180px;
    padding: 1.2rem 0px 1.2rem;
    border-bottom: 1px solid var(--u8ynp2);
    text-decoration: none;
    transition: 0.3s;
    margin-top: 50px;
}

a.recobtn_viewmore {
display: flex;
    align-items: center;
    width: 180px;
    padding: 1.2rem 0px 1.2rem;
    border-bottom: 1px solid var(--u8ynp2);
    text-decoration: none;
    transition: 0.3s;
}


a.btn_ao_b:hover {
  background-color: var(--u8ynp2);
  color: var(--applecomnero);
}
a.btn_ao_b:hover .b__text {
  color: aliceblue;
}
a.btn_ao_b:hover .b__text::after {
  color: aliceblue;
	
}
a.btn_ao_b .b__text {
  display: block;
  flex-grow: 1;
  color: var(--applecomnero);
  text-align: center;
  position: relative;
  font-size: 0.8rem;
	letter-spacing: 0.2rem;
}

a.btn_ao_b .b__text {
  display: block;
  flex-grow: 1;
  color: var(--applecomnero);
  text-align: center;
  position: relative;
  font-size: 0.8rem;
	letter-spacing: 0.2rem;
}


a.btn_viewmore:hover {
  background-color: var(--u8ynp2);
  color: var(--applecomnero);
	padding-left: 20px;
}
a.btn_viewmore:hover .b__text {
  color: aliceblue;
	content: "詳しくはこちら";
}
a.btn_viewmore:hover .b__text::after {
  color: aliceblue;
	
}
a.btn_viewmore .b__text {
  display: block;
  flex-grow: 1;
  color: var(--u8ynp2);
  /* font-weight: bold; */
  text-align: left;
  position: relative;
  padding-right: 24px;
  font-size: 0.8rem;
}
a.btn_viewmore .b__text::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: auto;
    transform: rotate(45deg);
    border-top: 1px solid var(--u8ynp2);
    border-right: 1px solid var(--u8ynp2);
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    transition: 0.3s;
}

a.btn_viewmore .b__text:hover::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    margin: auto;
    transform: rotate(45deg);
    border-top: 1px solid var(--applecomnero);
    border-right: 1px solid var(--applecomnero);
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    transition: 0.3s;
	margin-right: 10px;
}

/* ハンバーガーボタン */
.openbtn {
  display: none;              /* PC では非表示 */
}

/*FoodSaver*/
/* FoodSaver PC ヘッダー 3段構成 -------------------------- */

/* 検索＋カテゴリバー全体の横幅 */
.fs-search-category-wrap {
    max-width: 1120px;   /* コメントアウトを戻す */
    width: 100%;
    margin: 8px auto 0;  /* 画面中央に */
    padding: 0 8px;
}

/* --- 1段目：検索＋お問い合わせ＋会員リンク＋カゴ --- */
.fs-header-row1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 4px;
    background-color: white;
    /* border: 2px solid #ddd; */
    /* border-radius: 4px; */
    box-sizing: border-box;
}

.fs-search-main {
    flex: 0 0 50%;                /* ★横幅を全体の50%に固定 */
    max-width: 520px;             /* 保険で上限も指定 */
    margin: 0;
}

.fs-search-container {
    display: flex;
    align-items: stretch;
}

.fs-search-input {
    flex: 1 1 auto;
    height: 30px;
    padding: 0 12px;
    border: 1px solid #ccc;
    border-right: none;
    font-size: 14px;
}

.fs-search-button {
    flex: 0 0 110px;
    border: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
    font-size: 14px;
    background-color: #f7f7f7;
}

/* 1段目 右側 */
.fs-header-utilities {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    white-space: nowrap;
}

.fs-header-link {
    text-decoration: none;
    color: #333;
}

.fs-header-link:hover {
    text-decoration: underline;
}

.fs-header-hello {
    color: #666;
    margin-right: 4px;
}


/* ヘッダー右側のボタン共通デザイン */
.fs-util-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 12px;
    text-decoration: none;
    color: #333;
}

.fs-util-btn i {
    font-size: 14px;
}

/* ホバー時の軽い反応 */
.fs-util-btn:hover {
    background-color: #f7f7f7;
    text-decoration: none;
}

/* カゴ表示 */
.fs-header-cart {
    display: flex;
    align-items: center;
}

.fs-header-cart-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fafafa;
    gap: 6px;
}

.fs-header-cart-link:hover {
    background-color: #f0f0f0;
}


.fs-header-cart-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

/* --- 2段目：ロゴ＋グローバルナビ --- */
.fs-header-row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px 8px;
    border-bottom: 1px solid #eee;
    background-color: #ffffff;
    margin-top: 8px;
}

.fs-logo {
    flex: 0 0 auto;
}

.fs-logo .logo {
    width: 180px;   /* ロゴサイズはここで調整 */
    height: auto;
}

/* グローバルナビ */
.fs-main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.fs-nav-item {
    position: relative;
}

.fs-nav-link {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    padding: 4px 0;
}

.fs-nav-link:hover {
    border-bottom: 1px solid #333;
}

.fs-nav-caret {
    font-size: 10px;
    margin-left: 4px;
}

/* 製品一覧ドロップダウン */
.fs-nav-products {
    position: relative;
}

.fs-products-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 180px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    z-index: 1200;
}

.fs-products-link {
    display: block;
    padding: 6px 16px;
    font-size: 13px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
}

.fs-products-link:hover {
    background-color: #f5f5f5;
}

/* hover で開く */
.fs-nav-products:hover .fs-products-dropdown {
    display: block;
}

/* --- 3段目：おすすめなど（既存） --- */
.fs-category-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    justify-content: center;
    align-items: flex-start;
    overflow-x: auto;
    font-size: 1.4rem;

    /* ここを追加／変更 */
    padding: 8px 4px;
    margin-top: 2px;

    /* ▼ 追加：1〜2段目と同じ幅の箱に収める ▼ */
    /* max-width: 1120px; */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* ▲ ここまで ▲ */

    background-color: #ffffff;
}


.fs-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    min-width: 72px;
}
 
  .sp-category-bar {
    display: none;
  }

  .research_SP {
    display: none;
  }

  /* FontAwesomeアイコンをカテゴリバーの「画像アイコン」と同じ箱で扱う */
.fs-category-bar .fs-category-icon i{
  display: inline-block;
  font-size: 26px;
  line-height: 1;
}

/* 参考サイト風の色付け */
.fs-category-bar .fs-category-youtube .fs-category-icon i{ color:#ff0000; } /* YouTube */
.fs-category-bar .fs-category-recipe  .fs-category-icon i{ color:#22c55e; } /* レシピ */
.fs-category-bar .fs-category-news    .fs-category-icon i{ color:#16a34a; } /* 新着情報（緑系） */

  
 /* ============================
 * 静的ページ共通レイアウト
 *   会社概要 / 特定商取引法 / プライバシーポリシー / 利用規約 など
 * ========================== */

/* 背景＆中央寄せ（必要なら使う用。今は使ってなくてもOK） */
.fs-static-page {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 0 120px;
    background-color: #f7f7f7;
}

/* 白いカード部分 */
.fs-static-inner {
    width: 100%;
    max-width: 960px;
    background-color: #ffffff;
    padding: 56px 64px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

/* 見出し */
.fs-static-title {
    text-align: center;
    font-family: "Sawarabi Mincho", serif;
    font-size: 26px;
    letter-spacing: 0.2em;
    margin: 0 0 40px;
}

/* 定義リスト全体（←クラス名を fs-static-list に合わせる） */
.fs-static-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

/* 1行ぶん（ラベル＋内容） */
.fs-static-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 20px 0;
    border-top: 1px solid #eeeeee;
}

.fs-static-row:first-child {
    border-top: none;
}

/* ラベル側 */
.fs-static-list dt {
    margin: 0;
    min-width: 180px;
    max-width: 220px;
    font-weight: 700;
    font-size: 14px;
    color: #333333;
    line-height: 1.8;
    word-break: break-word;
}

/* 内容側 */
.fs-static-list dd {
    margin: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.8;
    color: #333333;
    word-break: break-word;
}

/* リンク（メールアドレス等） */
.fs-static-list a {
    color: #007bff;
    text-decoration: underline;
}
.fs-static-list a:hover {
    text-decoration: none;
}

/* ============================
 * ボタンのデフォルト色を黒に統一
 * （PC・スマホ共通）
 * ============================ */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}

/* ヒーローエリア */
.heroImage-fullScreen {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

.heroImage_slider_item_image {
    width: 100%;
    display: block;
}

/* トップコピー */
.topCopy {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 40px 0;
}

.topCopy_column {
    flex: 1 1 300px;
}

.topCopy_column img {
    width: 100%;
    height: auto;
}

/* ページ内ナビ */
.topNavi {
    margin: 24px 0 40px;
}

.topNaviList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.topNaviList_item_link {
    display: block;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 14px;
    background: #fff;
}

/* カテゴリ横スクロール */
.category_inner {
    padding: 12px 0;
}

.category_item {
    text-align: center;
    font-size: 12px;
}

.category_item_icon,
.category_item_icon-youtube {
    font-size: 20px;
    margin-bottom: 4px;
}

/* FAQバナー */
.faq_banner img {
    width: 100%;
    height: auto;
    display: block;
    margin: 8px 0 16px;
}

/* SP 用の表示制御（環境に合わせて調整） */
.pc-only { display: block; }
.sp-only { display: none; }

/* ロゴ */
.fs-logo-link { display: inline-flex; align-items: center; }
.fs-logo-img {
  width: 180px;
  height: auto;
  display: block;
}

/* 2段目：ロゴ＋ナビの並び */
.fs-header-row2{
  justify-content: space-between;   /* ロゴ左 / ナビ右 */
  gap: 24px;
}

/* カテゴリアイコン画像 */
.fs-category-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px; /* アイコンの上下が揃うように */
}
.fs-category-icon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* =========================
 * 共通：全幅（full-bleed）ヒーロー
 * ========================= */

/* 中央寄せの共通コンテナ（必要ならどのページでも使う） */
.fs-container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding:0 16px;     /* ← これが「消えちゃった余白」 */
}

/* 画面端まで“はみ出す”箱（親が1120pxでもOK） */
.fs-fullBleed{
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
  max-width: 100%;
}

/* ヒーロー */
.fs-hero{
  margin: 0 0 24px;
}

.fs-hero__media{
  width:100%;
  aspect-ratio: var(--ratio-pc, 1920 / 520);
}

.fs-hero__media picture,
.fs-hero__media img{
  display:block;
  width:100%;
  height:100%;
}

.fs-hero__media img{
  object-fit: cover;
}
:root{ --headerH: 260px; }

/* どのページでも確実に効かせたいなら body に入れるのが手堅い */
body{
  padding-top: var(--headerH);
}

/* ===== SP ドロワー（参考サイト風） ===== */
.g-nav{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
}

.g-nav-panel{
  position: absolute;
  top: 0;
  left: 0;
  width: min(420px, 86vw);
  height: 100vh;
  background: #f3f3f3;          /* 参考サイトの薄いグレー */
  transform: translateX(-100%);
  transition: transform .25s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 2px 0 18px rgba(0,0,0,.15);
}

/* open時（body.nav-open は既に使ってるので活用） */
body.nav-open .g-nav-overlay{
  opacity: 1;
  pointer-events: auto;
}
body.nav-open #g-nav{
  pointer-events: auto;
}
body.nav-open #g-nav .g-nav-panel{
  transform: translateX(0);
}

/* overlay より panel が必ず上に来るように */
.g-nav-overlay { z-index: 1490; }
.g-nav        { z-index: 1500; }
.g-nav-panel  { position: relative; z-index: 1; }

/* PC: ドロップダウンを少し上品に */
.fs-products-dropdown{
  border-radius:10px;
  padding:10px;
}

/* 項目が多いところだけ2列化したいなら */
.fs-nav-products .fs-products-dropdown{
  display:none; /* 既存の hover 開閉はそのまま */
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap:4px;
}
.fs-nav-products:hover .fs-products-dropdown{
  display:grid;
}

.fs-products-link{
  border-radius:8px;
  padding:8px 12px;
}
.fs-products-link:hover{
  background:#f4f4f4;
}

/* 1行を1カラムに（ラベル→入力の縦積み） */
.fs-form-page .fs-form-row{
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* ラベル行の見た目（必須バッジと並べる） */
.fs-form-page .fs-form-label{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0 !important;   /* 既存の padding-top:10px を無効化 */
}

/* 入力側は全幅 */
.fs-form-page .fs-field{
  width: 100%;
}

@supports not (width: 100dvw){
  .fs-fullBleed{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100%;
  }
}

@media (max-width: 1200px) {
    /* レスポンシブ微調整（必要なら） */
    .fs-header-row1 {
        flex-direction: column;
        align-items: stretch;
    }
    .fs-header-utilities {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
  /* カテゴリバーは既存の .fs-category-bar をそのまま利用 */
  a.btn_ao_b .b__text {
    font-size: 18px;
    padding-right: 20px;
  }
  a.btn_ao_b .b__text::after {
    width: 12px;
    height: 12px;
  }
}
@media (max-width: 768px) {
  a.btn_ao_b .b__text {
    font-size: 1rem;
    padding-right: 20px;
  }
  a.btn_ao_b .b__text::after {
    width: 10px;
    height: 10px;
  }
  /*FoodSaver検索*/
  .fs-search-main {
        padding: 8px 12px;
    }
    .fs-category-inner {
        padding-inline: 8px;
        gap: 12px;
    }
        .fs-search-category-wrap {
        padding: 0 10px;
    }
    .fs-category-bar {
        gap: 16px;
    }
     /* PC ヘッダーを消す */
   .view_pc {
    display: none;
  }
      .view_sp {
        display: block;
    }
      .header_wrap.view_pc {
        display: none;
    }
  .header-sp-wrap{
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #fff;
  }
    .header_wrap.view_pc{
    display: none !important;
  }

  /* 1段目：トップバー */
  .sp-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
  }

  .sp-top-icons{
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .sp-logo .fs-logo-img{
    width: 150px;
  }

  /* SPカテゴリバー（矢印付き横スクロール） */
.sp-category-wrap{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

.sp-category-wrap .js-catbar{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 auto;
}
.sp-category-wrap .js-catbar::-webkit-scrollbar{
  display: none;
}

.sp-cat-arrow{
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  background: #fff;
  position: relative;
  z-index: 2;
}
.sp-cat-arrow:disabled{
  opacity: .35;
}

.sp-cat-prev::before,
.sp-cat-next::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
}

.sp-cat-prev::before{
  transform: rotate(-135deg);
}
.sp-cat-next::before{
  transform: rotate(45deg);
}


  /* 1行目：ロゴ＋カート/ログイン＋ハンバーガー */
  .sp-head-left {
    flex: 0 0 50%;               /* 左半分 */
    display: flex;
    align-items: center;
  }

  .sp-head-right {
    flex: 0 0 50%;               /* 右半分 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }

  /* 2行目：検索バー（横幅100%） */
  .header-sp-wrap .fs-search-main {
    flex: 0 0 100%;
    margin-top: 6px;
    padding: 0 4px 4px;
  }

  .header-sp-wrap .fs-search-container {
    width: 100%;
  }

  .header-sp-wrap .fs-search-input {
    font-size: 13px;
    height: 32px;
  }

  .header-sp-wrap .fs-search-button {
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
  }

    /* 3行目：カテゴリバー（横スクロール可） */
  .header-sp-wrap .fs-category-bar{
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    padding: 0 4px;
    gap: 16px;
  }

  /* 既存定義と被っていたらこちらを優先させたいので念のため */
  .header-sp-wrap .fs-category-bar::-webkit-scrollbar{
    display: none; /* Chrome/Safari */
  }

    .header-sp-wrap .fs-category-item{
    scroll-snap-align: center;
    min-width: 72px;
  }

  .header-sp-wrap .fs-category-bar::-webkit-scrollbar-thumb {
    background: #ccc;
  }

    /* 3段目：検索 */
  .sp-search-main{
    padding: 8px 12px 10px;
  }
  .sp-search-main .fs-search-input{
    height: 36px;
  }
  .sp-search-main .fs-search-button{
    height: 36px;
  }

  .head-btn {
    display: flex;
    gap: 4px;
  }

  .icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    text-decoration: none;
    color: #333;
  }

  .icon-btn img {
    width: 24px;
    height: 24px;
  }

  /* 検索バー */
  .research {
    display: none;  /* PC 用検索は消す */
  }

  .research_SP {
    display: flex;
    padding: 8px 12px;
    background-color: #f7f7f7;
  }
  .sp-category-bar {
    padding: 0 12px 8px;
  }

  .sp-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ハンバーガー */
  /* ハンバーガーは右上に寄せたまま */
  .openbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0 4px;
    cursor: pointer;
  }

  .openbtn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #000;
    margin: 3px 0;
    transition: 0.3s;
  }

  .openbtn p {
    font-size: 10px;
    margin: 0;
  }

  /* 開いたときの×表示 */
  .openbtn.active span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .openbtn.active span:nth-child(2) {
    opacity: 0;
  }
  .openbtn.active span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  

  /* メニューオープン中は背景スクロール禁止 */
  body.nav-open {
    overflow: hidden;
  }

  /* ヘッダー高さぶんだけ本文を下げる（適宜微調整） */
:root{ --headerH: 170px; }
  .mypattern {
    margin-top: 0;
    margin-top: 140px;
  }

  .fs-static-page {
        padding: 72px 0 80px;
    }

    .fs-static-inner {
        padding: 32px 20px;
        box-shadow: none; /* 影を薄くしてシンプルにしてもOK */
    }

    .fs-static-title {
        font-size: 22px;
        letter-spacing: 0.15em;
        margin-bottom: 32px;
    }

        .fs-static-row {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0;
    }

    .fs-static-list dt {
        min-width: auto;
        font-size: 13px;
    }

    .fs-static-list dd {
        font-size: 13px;
    }

    .pc-only { display: none; }
    .sp-only { display: block; }
    .topCopy { flex-direction: column; }

      .fs-logo-img{ width: 150px; }
  .header-sp-wrap .fs-category-icon{ height: 28px; }
  .header-sp-wrap .fs-category-icon img{
    width: 24px;
    height: 24px;
  }

  .fs-form-page{ padding: 48px 0 80px; }
  .fs-form-card{
    padding: 32px 18px;
    box-shadow:none;
  }
  .fs-form-title{
    font-size: 22px;
    letter-spacing:.15em;
    margin-bottom: 28px;
  }
  .fs-form-row{
    grid-template-columns: 1fr; /* ラベル→入力を縦積み */
    gap: 10px;
    padding: 16px 0;
  }
  .fs-field-grid-2{
    grid-template-columns: 1fr; /* 姓/名も縦に */
  }
  .fs-field-with-btn{
    grid-template-columns: 1fr; /* 郵便番号とボタンも縦に */
  }
  .fs-inline-btn{
    width:100%;
  }
  .fs-form-page .fs-form-row{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .fs-form-page .fs-field-grid-2{
    grid-template-columns: 1fr !important;
  }

  .fs-form-page .fs-field-with-btn{
    grid-template-columns: 1fr !important;
  }

  /* iOS/Safariで入力が縮みすぎる保険 */
  .fs-form-page .fs-form-control{
    min-width: 0;
  }

  /* カード左右の余白もスマホで適正化 */
  .fs-form-page .fs-form-card{
    width: calc(100% - 24px);
    margin: 0 auto;
    padding: 28px 14px;
  }
}
@media (max-width: 360px){
  .sp-head-left, .sp-head-right{
    flex: 0 0 100%;
  }
  .sp-head-right{
    justify-content: space-between;
    margin-top: 6px;
  }
  .fs-logo-img{ width: 130px; }
  .icon-btn img{ width: 22px; height: 22px; }
}


.text-6 {
  color: var(--u8ynp2);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-xl);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.icon-2 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.width-change-size-here {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  overflow: hidden;
  position: relative;
}

.ignore {
  background-color: var(--hitbox);
  height: 1px;
  position: relative;
  width: 1px;
}

.icon-wrapper-h {
  align-items: center;
  align-self: stretch;
  background-color: var(--hitbox);
  display: flex;
  flex: 0 0 auto;
  position: relative;
  width: 100%;
}

.height-change-size-here {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 16px;
  margin-left: -8px;
  overflow: hidden;
  position: relative;
  transform: rotate(-90deg);
}

.icon-wrapper {
  align-self: stretch;
  flex: 1;
  flex-grow: 1;
}

.union {
}
.mypattern .slick-next{
  display:none;
  right:100px;
}
.mypattern .slick-next:before{
  display:none;
}

.about-container {
align-items: flex-start;
    background-image: url(../img/bg_gensen.jpg);
    background-repeat: no-repeat;
    background-position: center 150px;
    background-size: contain;
    display: flex
;
    flex-direction: column;
    gap: 120px;
    justify-content: flex-start;
padding: 100px 0px 180px;
    width: 100%;
}

.about-header {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: flex;
width: 90%;
  flex-direction: row;
}

.about_wrap{
align-items: flex-start;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 72px 0px;
    width: 100%;
	gap: 40px;
}

.about_img {
  background-image: url("../img/about_img.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  background-color: rgba(
    0,
    0,
    0,
    0.3
  ); /* 画像を暗くするために黒色の半透明のオーバーレイを追加 */
  background-blend-mode: darken; /* 画像と背景色を暗く混合 */
  height: 480px;
  padding: 32px;
  width: 80%;
}
.about_img p {
  color: #fff;
}
.about_text {
  font-size: 14px;
  width: 50%;
  line-height: 3;
	letter-spacing: 0.1rem;
}
.about_title_1 {
  font-size: 18px;
  margin-bottom: 16px;
	writing-mode: vertical-rl;
	text-shadow: 0px 0px 3px black;
	
}
.about_title {
display: flex;
    gap: 8px;
    position: relative;
    width: 20%;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;
}

.text-10 {
  color: var(--applecomblack);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
  width: 33px;
	writing-mode: vertical-rl;
}


  .about-slider {
    width: 100%;                /* 表示領域 */
    overflow: hidden;           /* はみ出した部分は非表示 */
  }

  .slide-track {
    display: flex;
    width: calc(320px * 8);    /* 画像幅×枚数(8枚×2セット=16枚) */
    animation: scroll 60s linear infinite;
  }

  .slide {
    width: 320px;               /* 画像の幅を揃える */
    flex-shrink: 0;
  }

  .slide img {
    width: 100%;
    height: 100%;
    display: block;
  }

  @keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }


.about-footer {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
}

.heading-h2 {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  position: relative;
}

.h2_accent {
	font-size: 3rem;
	font-weight: 300;
	color: var(--DU-gwi-2)
	
}

.h2_accent2 {
	font-size: 28px;
	font-weight: 300;
	color: var(--DU-gwi-2)
	
}


.h2_text {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.text-10-1 {
  line-height: 38.4px;
  margin-top: -1px;
}

.member_ship_wrap {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
  width: 100%;
}

.member_ship_item {
  align-items: center;
  background-color: var(--gray600);
  display: flex;
  gap: 8px;
  height: 220px;
  justify-content: center;
  padding: 8px;
  position: relative;
  width: 100%;
}

.text-10-2 {
  background-color: var(--hitbox);
  line-height: 38.4px;
}

.news-container {
align-items: center;
    background-image: url(../img/bg_news.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex
;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 56px;
    padding: 240px 0px;
    position: relative;
    width: 100%;
}

.news_list {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 1000px;
}

.news_item {
border-top: solid 1px #e5e5e5;
    background-color: rgb(255 255 255 / 0.5);
    margin-top: -1px;
    border-bottom: solid 1px #e5e5e5;
    width: 100%;
    display: flex !important
;
    align-items: center;
    justify-content: space-between;
    padding: 24px 100px;
}

.news_text_wrap {
  display: flex;
  gap: 5%;
  width: 100%;
}
.news_text {
  display: flex;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 任意の行数を指定 */
  line-height: 1.5;
}

.about_text {
  line-height: 24px;
  line-height: 2;
	writing-mode: vertical-rl;
	text-shadow: 0px 0px 3px black;
}

.angle {
  height: 8.37px;
  position: relative;
  width: 5px;
}

.text-108 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-109 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-110 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.news_item-2 {
  margin-bottom: -1px;
}

.text-111 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.recently_viewed {
  align-items: center;
  background-color: var(--hitbox);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 72px;
  justify-content: center;
  padding: 72px 0px;
  position: relative;
  width: 100%;
}

.recently_viewed_container {
align-items: center;
    background-image: url(../img/bg_recently.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex
;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 56px;
    padding: 60px 0px;
    position: relative;
    width: 100%;
}

.recently_title-col-12 {
  align-items: center;
  background-color: var(--hitbox);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--applecomblack);
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 16px 8px;
  position: relative;
  width: 100%;
}


.offer_viewed_container {
align-items: center;
    background-image: url(../img/bg_spoffer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex
;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 56px;
    padding: 120px 0px;
    position: relative;
    width: 100%;
}

.h2_ck_tittle{
font-family: "Sawarabi Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    letter-spacing: 0.2rem;
}



.h2_tittle_w{
font-family: "Sawarabi Mincho", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    letter-spacing: 0.2rem;
	color: var(--applecomnero);
}

.sp_offer_wrap{
max-width: 980px;
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 32px;
    position: relative;
    justify-content: center;
}

.sp_offer_box{
    width: 300px;
    border: solid 3px;
	border-image: linear-gradient(150deg, rgba(229, 209, 139, 1), rgba(255, 255, 255, 1) 50%, rgba(229, 209, 139, 1))1;
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    justify-content: center;
    padding: 24px;
        background-color: rgba(0, 0, 0, 0.5);
}


.sp_offer_banner_wrap{
max-width: 980px;
    align-items: center;
    background-color: var(--hitbox);
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 16px;
    position: relative;
    justify-content: center;
}

.sp_offer_banner{
	width:400px;
}


.text-112 {
  flex: 1;
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
}

.col-3 {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 21px;
  position: relative;
}

.price-17 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-114 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-18 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-119 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-19 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-124 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-20 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-129 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.a {
  flex: 1;
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
}

.price-21 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-134 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-22 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-139 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-23 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-144 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-24 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-149 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-153 {
  flex: 1;
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
}

.price-25 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-155 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-26 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-160 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-27 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-165 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.price-28 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-170 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.footer {
  align-items: center;
  background-color: var(--gray900);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.footer_main {
    align-items: center;
    background-color: var(--hitbox);
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    padding: 80px 40px 0px;
    position: relative;
    width: 100%;
    max-width: 1280px;
}

.footer_wrap {
align-items: flex-start;
    background-color: var(--hitbox);
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    padding: 48px 0px 60px;
    position: relative;
    width: 450px;
}

.footer_list {
    align-items: flex-start;
    background-color: var(--hitbox);
    display: flex
;
    flex: 0 0 auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
    flex-direction: column;
	gap:32px;
}
.footer_link {
  transition: 0.3s;
}


.footer_menu_sp{
	display: none;
}


.right_wrap {
display: flex
;
    gap: 100px;
    flex-direction: column;
    align-items: flex-end;
	width: 100%;
}

.right1_wrap {
align-items: flex-start;
    display: flex
;
    gap: 16px;
    justify-content: flex-end;
}

.right2_wrap {
	    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}


.text-17 {
  flex: 1;
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.text-177 {
  color: var(--body-textbody-color);
  flex: 1;
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  text-align: center;
}

.footer_link_list {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    width: 450px;
}

.sns_wrap {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.footer_contact_title {
  color: var(--body-textbody-color);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.sns_list {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  position: relative;
}
.sns_list a :hover {
  opacity: 0.6;
}

.youtube_1_ {
  height: 41px;
  position: relative;
  width: 41px;
}

.youtube {
  height: 30px;
  position: relative;
  width: 30px;
}

.facebook {
  height: 30px;
  position: relative;
  width: 30px;
}

.instagram {
  height: 30px;
  position: relative;
  width: 30px;align-items: center;
        display: flex
;
        justify-content: space-between;
        gap: 24px;
        flex-direction: column;
}

.x {
  height: 30px;
  position: relative;
  width: 30px;
}

.contact_wrap {
align-items: flex-start;
    background-color: var(--hitbox);
    display: inline-flex
;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.text-178 {
  font-size: var(--font-size-xxl);
}

.contact_list {
  align-items: flex-start;
    display: flex
;
    justify-content: space-between;
    gap: 24px;
    flex-direction: column;
}

.contact_list-item {
display: flex
;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
}

.contact_list-item:hover {
  opacity: 0.6;
}

.tel_link {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
}

.free_tel_icon {
  height: 22.96px;
  position: relative;
  width: 35px;
}

.phone {
  color: rgba(255, 255, 255, 1);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-xxl);
  font-weight: 500;
  letter-spacing: 0;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.text-179 {
  color: var(--body-textbody-color);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-l);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 21px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.mail_wrap {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  position: relative;
}

.mail_icon {
  height: 25px;
  position: relative;
  width: 31px;
}

.infogensen-shopjp {
  color: var(--body-textbody-color);
  font-family: var(--font-family-noto_serif_jp);
  font-size: var(--font-size-xxxl);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 38.4px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.contact_link {
  align-items: center;
  background-color: var(--applecomnero);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 11px;
  justify-content: center;
	padding: 20px 60px;
  position: relative;
	border-radius: 3px
}

.angle-1 {
  height: 13px;
  position: relative;
  width: 7px;
}

.copyright {
  background-color: var(--hitbox);
  letter-spacing: 0;
  line-height: 21px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.col-3-12 {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 21px;
  position: relative;
}

.container-3 {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
}
.container_service_wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.date-5 {
  letter-spacing: 0;
  line-height: 24px;
  margin-top: -1px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.ellipse-2 {
  border-radius: 7.5px;
  height: 15px;
  position: relative;
  width: 15px;
}

.footer_link-2 {
  display: flex;
  padding: 8px;
}

.gen-2 {
  align-items: center;
  background-color: var(--u8ynp2);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.h2_parts-2 {
  height: 29.02px;
  position: relative;
  width: 308.85px;
}

.icon {
  background-color: var(--hitbox);
  position: relative;
}

.menu_item-3 {
  align-items: center;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  padding: 8px;
  position: relative;
}

.news_item-3 {
  align-items: center;
  background-color: var(--hitbox);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-color: var(--body-textbody-color);
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  margin-left: -1px;
  margin-right: -1px;
  padding: 32px 16px;
  position: relative;
}

.sen-2 {
  align-items: center;
  background-color: var(--u8ynp2);
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 8px;
  position: relative;
}

.tax-28 {
  align-items: flex-start;
  background-color: var(--hitbox);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2.1px;
  position: relative;
  font-size: 1rem;
}

.text-10-4 {
  letter-spacing: 0;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

/* .research_SP {
  display: none;
}
.tel_sp_btn {
  display: none;
}
.mail_pc_btn {
  display: none;
}

/* メニューアンダーライン */
.menu_item-3 {
  position: relative;
}

.menu_item-3::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s;
	color: var(--u8ynp2);
}

.menu_item-3:hover::before {
  width: 100%;
}

.point_sp {
  display: none;
}
.hover_under_line {
  position: relative;
}

.hover_under_line::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000;
  transition: width 0.3s;
}

.hover_under_line:hover::before {
  width: 100%;
}

.item_btn {
  display: flex;
  background-color: var(--u8ynp2);
  color: #fff;
  padding: 16px;
  justify-content: center;
  gap: 24px;
}

.outfit_font {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
	color: var(--gray500);
	letter-spacing: 0.05rem;
	
}

.sawarabi-mincho-regular {
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.sp_br {
  display: none;
}

	.about_viewmore img{
		display: none;
			
	}	

	.youtube_btn{
width: 90%;
    z-index: 10;
    text-align: right;
    position: absolute;
    margin-top: -40px;
		
	}	
	.youtube_btn img{
		width: 120px;
    text-align: right;
     
		
	}	


	.youtube_bottom_btn{
width: 90%;
    z-index: 10;
    text-align: right;
    position: absolute;
    margin-top: -40px;
		
	}	
	.youtube_btn img{
		width: 120px;
    text-align: right;
     
		
	}

.scroll-y-image {
    position: fixed;
    bottom: 10px;
    right: 100px;
    display: none;
    width: 250px;
    height: auto;
    z-index: 500;
}

/* Animation */
.fuwafuwa {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

/* maincontainer */
.maincontainer{
position: relative;
    padding: 50px 0px;
    width: 100%;
	background-image: url("../img/bg_cartimage.jpg");
	background-size: cover;
	display: flex;
	    justify-content: center;

}


/* 利用規約コンテナ */
.wc-container{
position: relative;
    padding: 50px 0px;
    width: 100%;
	background-image: url("../img/bg_wc-container.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	display: flex;
	    justify-content: center;
flex-direction: column;
	align-items: center;
}

.col-md-6 {
        max-width:100%;
    }

.container-md{
        max-width: 50%;
    }

/* cart.html */
.cart_main{
position: relative;
    max-width: 1080px;
	display: flex;
	gap: 50px;

}

.cart_text1{
line-height: 2.0em;
margin: 50px 0px ;	

}

    .product-description-box {
max-height: 180px;
    overflow-y: auto;
    padding-right: 10px;
    margin: 0px 0px 50px;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    line-height: 1.5em;
    border: 1px solid #e5e5e5;
    }

.letter-spacing02{
	letter-spacing:0.2em;
	line-height: 3em;
}

.letter-spacing02_1{
	letter-spacing:0.2em;
}


.cart2column{
	display: flex;
	width:100%;
	align-items: flex-start;
    justify-content: flex-start;
	margin-bottom: 50px;
}

.cart2column_alert{
	display: flex;
	width:100%;
    margin-bottom: 30px;
    align-items: center;
}

.cart2column_count{
	display: flex;
	width:100%;
    margin-bottom: 30px;
    align-items: center;
}

.cart2column_url {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 50px;
}



.column_left{
	width:25%;
}

.column_left_alert{
	width:25%;
	display: flex;
}

.column_right{
width: 75%;
    line-height: 1.5em;
    margin-top: -6px;
	display: flex;
}

.order-type-toggle{
width: 75%;
    line-height: 1.5em;
    gap:10px;
	display: flex;
	flex-direction: column;
	margin-top: 2px;

}

.order_period{
	  appearance: none;          /* デフォルトUIを消す */
  -webkit-appearance: none;
  -moz-appearance: none;
	width:100%;
	background-color: #fff;
	padding: 10px 20px;
	border: solid 1px #b2b2b2;
	border-radius: 10px;
	  background: url("../img/vector-3.svg") no-repeat right 12px center;
 background-size: 12px auto;    /* 矢印のサイズ */
}


.cart-alert{
	background-color: #574240;
	padding: 10px 30px;
    border-radius: 5px;
	    gap: 10px;
}

.cart-hr{
	 border-top: 1px solid var(--gray600);
	margin: 50px 0px 40px 0px;
}
.cart_check{
	display: flex;
	width:100%;
    margin-bottom: 30px;
	flex-direction: column;
}

.cart_btn{
	display: flex;
	width:100%;
	gap:20px;
    margin-bottom: 30px;
	flex-direction: column;
}

.product_btn{
	display: flex;
	width:100%;
	gap:10px;
	flex-direction: row;
	align-items: center;
    height: 50px;
}

  .btn-primary {
    color: #fff;
    /* background-color: var(--u8ynp2); */
    background-color: black;
    /* border-color: var(--u8ynp2); */
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-primary img{
    position: absolute;
    right:30px;
    width:18px;
  }

  .product_btn-primary {
    color: #fff;
    /* background-color: var(--u8ynp2);
    border-color: var(--u8ynp2); */
    background-color: black;
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }

  .btn-primary:hover {
    /* color: var(--u8ynp2); */
    color: black;
    background-color: #fff;
    /* border-color: var(--u8ynp2); */
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 14px;
  }

  .btn-primary:hover img{
      /* fill: var(--u8ynp2); */
      fill: var(white);
      
  }
  .product_btn-primary:hover {
    /* color: var(--u8ynp2); */
    color: black;
    background-color: #fff;
    /* border-color: var(--u8ynp2); */
    /* background-color: black; */
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 12px;
  }


.btn-secondary:hover {
    color: #fff;
    background-color: var(gray600);
    border-color: var(gray600);
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 14px;
  }

.btn-secondary {
    color: var(--u8ynp2);
    background-color: #fff;
    border-color: var(--u8ynp2);
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 14px;
  }

.product_btn-secondary {
    color: var(gray600);
    background-color: #fff;
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 12px;
    width: 50%;
  }

.product_btn-secondary:hover {
    color: var(gray600);
    background-color: var(gray600);
    padding: 10px;
    letter-spacing: 0.1em;
    font-size: 12px;
  }


.cartbtn_right{
	width:100%;
		
}


.cartbtn_left{
	width:100%;
		
}

.btn-kara {
    background-color: #fff;
    border: 1px solid #9fa0a0;
	padding: 10px;
	letter-spacing: 0.1em;
	font-size: 14px;
	width: 100%;
	text-align: center;
}

.btn-kara:hover {
    color: #fff;
    background-color: #9fa0a0;
     border: 1px solid #9fa0a0;
	padding: 10px;
	letter-spacing: 0.1em;
	font-size: 14px;
	width: 100%;
	transition : all 0.5s ease 0s;
}

.btn-order {
	color: #fff;
    background-color: #9f212d;
    border: 1px solid #9f212d;
	padding: 10px;
	letter-spacing: 0.1em;
	font-size: 14px;
	width: 100%;
	text-align: center;
	color:#fff;
}

.btn-order:hover {
    color: #9f212d;
    background-color: #fff;
    border: 1px solid #9f212d;
	padding: 10px;
	letter-spacing: 0.1em;
	font-size: 14px;
	width: 100%;
	transition : all 0.5s ease 0s;
}




/* WebKit ブラウザで、input type="number" のスピンボタンを非表示にする。 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Firefox で、input type="number" のスピンボタンを非表示にする。また、入力欄の値表示を中央寄せにし、高さをボタンのサイズに合わせる。 */
input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
  height: 44px;
	
}

/*ボタンのサイズを 44 × 44 CSS ピクセルにする。*/
button.btn-number {
  width: 44px;
  height: 44px;
}

/* ステッパーコンポーネントの横幅を指定する。 */
div.input-group {
  width: 250px;
	
}

.input-group-prepend{
	border-radius: 9px;
}

.btn-count-l {
    display: inline-block;
    font-weight: 400;
    color: #b2b2b2;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #b2b2b2; 
    padding: 0;
    font-size: 18px;
    line-height: 0;
    border-radius: 10px 0px 0px 10px !important;
    transition: color .15s 
ease-in-out, background-color .15s 
ease-in-out, border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
}

.btn-count-r {
    display: inline-block;
    font-weight: 400;
    color: #b2b2b2;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #b2b2b2; 
    padding: 0;
    font-size: 24px;
    line-height: 0;
    border-radius: 0px 10px 10px 0px !important;
    transition: color .15s 
ease-in-out, background-color .15s 
ease-in-out, border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
}

.border-gray {
    border-color: #b2b2b2 !important;
}

.btn-outline-dark.disabled, .btn-outline-dark:disabled {
    color: #b2b2b2;
    background-color: transparent;
}








.pgallery { max-width: 880px; margin: 0 auto; transition : all 0.5s ease 0s;}

.pgallery-main img { 
	width: 100% !important;
	height: auto; 
	display: block; object-fit: contain; 
}


.pgallery-main.slick-slide{
  transform: scale( 1 );
}


/* 4列・左詰め・隙間16px。5枚以上なら自動で2段目へ */
.pgallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

/* ボタン素のリセット */
.pthumb { appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; width: 100%; }

/* 正方形トリミング（中央） */
.pthumb-inner { 
	position: relative;
	width: 100%;
	
	overflow: hidden;
}
.pthumb img { position: relative;
  display: block;
  width: 100%;
  height: 100%;           /* ← これが重要（object-fitを効かせる） */
  object-fit: cover;      /* はみ出す分をトリミング */
  object-position: center;/* 中央基準で切り抜き */
	aspect-ratio: 1 / 1;
}

/* 選択中の見た目 */
.pthumb.is-active .pthumb-inner {
	outline: 0 !important ;
	opacity: 0.5;
	transition : all 0.2s ease 0s;
	overflow:none; }


button:focus {
    outline: 0;
    outline: 0;
}

/* スマホ時の列数（必要に応じて調整） */
@media (max-width: 640px) { .pgallery-thumbs { grid-template-columns: repeat(4, 1fr); } }

/* モバイルのクリック/スワイプ競合を減らす */
.pgallery-main .slick-list { touch-action: pan-y; }




/* 利用規約 */
.white-container{
	background-color: #fff;
	max-width:1080px;
	width:100%;
	padding: 100px;
	box-shadow: 0px 0px 20px #ccc;
	
}


	.white-container-inner{
		width:100%;
		
	}	
	.white-container-l{
		width:30%;
		margin-top: 1.7rem;
	}	
	.white-container-r{
		width:70%;
	}	

.wc-tittlecontainer{
	
	max-width:1080px;
	width:100%;
	padding: 50px 0px 50px;
	
}

.login-form{
	

display: flex;}

.wc-section-title{
	font-family: "Sawarabi Mincho", serif;
	background-color: #f2f2f2;
	width:100%;
	padding: 16px;
	margin: 30px 0px;
	font-size: 18px;
	letter-spacing:0.1em;
	color: var(--u8ynp2);
}

.wc-tittle{
	font-family: "Sawarabi Mincho", serif;
	font-size: 24px;
	letter-spacing:0.1em;
	line-height: 2em;
}

.wc-p {
	line-height: 1.6em;
	margin-bottom: 50px;
	font-weight: 300;
	width: 100%;

}

.wc-back {
	text-align: center;
	padding-top: 50px;

}

.wc-p p{
	padding-bottom: 0.5em;

}

.wc-back p{
	letter-spacing:0.1em;

}



.wc-p-description{
	margin: 20px;
	font-size: 14px;
	line-height: 1.2em;
	
}


.underline{
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 16px;
  position: relative;
  border-bottom: 3px solid #f2f2f2;
}
.underline::before{
  content: '';
  position: absolute;
  bottom: -3px;
  width: 5%;
  height: 3px;
  background: #a71e2d;
}


.p-right{
	text-align: right;
}

/* 以下、index.html内より */

					.rectangle-4 {
						
						height: 100%;
						width: 100%; /* 固定幅 */
						object-fit: cover; /* アスペクト比を維持しつつボックスに収まる */
						background-color: #fff; /* 背景色を追加 */
						display: block; /* ブロック要素として扱う */
						margin: 0 auto; /* 左右の余白を自動で設定して中央揃え */
						max-height: 255px;
					}


					.product-card {
						position: relative;
						transition: transform 0.2s;
						overflow: hidden;
					}
					.product-card:hover {
						transform: scale(1.05);
					}
					.product-image-wrapper {
						position: relative;
					}
					.product-image {
						width: 100%;
						display: block;
						transition: opacity 0.3s;
					}
					.overlay {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						height: 100%;
						width: 100%;
						opacity: 0;
						transition: .3s ease;
						background-color: rgba(0,0,0,0.5);
					}
					.product-card:hover .overlay {
						opacity: 1;
					}
					.h-nonfavorite.active {
						color: red;
					}
					.member_ship_item {
						flex: 1; /* 各項目の幅を均等に */
						text-align: center;
					}
					.member_ship_img {
						width: 100%; /* 親要素の幅にフィット */
						height: auto; /* 縦横比を維持 */
						object-fit: cover; /* 画像の切り抜き */
						border-radius: 10px; /* 角を丸くする（オプション） */
					}
			
/* 以上、index.html内より */


/* 以下、cart.html内より */

				.product-title {
					font-size: 24px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				.product-content, .purchase-limit, .product-price {
					font-size: 16px;
					margin-bottom: 15px;
				}
				.product-content, .purchase-limit {
					max-height: 150px; /* 必要に応じて最大高さを調整 */
					overflow-y: auto; /* 縦方向にスクロールを追加 */
					padding-right: 10px; /* スクロールバーとテキストの間にスペースを追加 */
					margin-bottom: 15px; /* 他の要素との間隔 */
					border: none; /* 枠線を追加して見やすくする */
					padding: 10px;
					/* background-color: #f9f9f9; 背景色を設定 */
					border-radius: 5px; /* 角を丸くしてデザインを整える */
				}

				/* 商品画像大 */
				.product-detail-image, .no-image {
					max-width: 100%; /* 横幅は親要素に合わせる */
					object-fit: contain; /* 縦横比を維持して枠内に収める */
					margin: 0 auto; /* 中央揃え */
				}
				/* 商品画像小 */
				.product-thumbnail, .no-image-thumbnail {
					width: 100%; /* 横幅は親要素に合わせる */
					max-width: 100px; /* 最大幅を150pxに制限 */
					max-height: 100px; /* 最大高さを150pxに制限 */
					object-fit: cover; /* 枠内を埋める */
					cursor: pointer; /* クリック可能に */
					/* border: 1px solid #ddd; サムネイルに枠線を追加 */
					margin: 5px; /* サムネイル間のスペースを追加 */
					/*  border-radius: 5px; 少し角を丸める */
				}

				.btn-group .btn {
					margin-right: 10px;
				}
				.btn-check:checked + .btn {
					background-color: #007bff;
					border-color: #007bff;
					color: white;
				}
				.disabled-link {
					pointer-events: none;
					opacity: 0.6;
				}

				.product-info-table {
					width: 90%;
					font-size: 16px;
					background-color: #fff;
				}
				.product-info-table th.product-info-header {
					width: 100px;
					background-color: #f0f0f0;
					font-weight: bold;
					text-align: left;
					vertical-align: top;
					padding: 5px;
				}
				.product-info-table td {
					vertical-align: top;
					padding: 5px;
					border-left: 1px solid #dee2e6;
				}

				.purchase-limit-box {
					min-width: 200px;
					max-width: 300px;
					padding: 15px;
					border: 2px solid #d9534f; /* 赤枠 */
					border-radius: 8px;
					background-color: #fff4f4;
					font-size: 14px;
				}

				.purchase-limit-title {
					font-weight: bold;
					font-size: 16px;
					margin-bottom: 8px;
					color: #d9534f;
				}
				.scrollable-text {
					max-height: 150px;     /* 高さ制限（必要に応じて調整） */
					overflow-y: auto;      /* 縦スクロール */
					padding-right: 10px;   /* スクロールバーと文字の間に余白 */
					white-space: pre-wrap; /* 改行を保持 */
				}
/* 以上、cart.html内より */

/* 以上、terms-of-service.html内より */

						.title {
							background-color: #a71e2d;
							color: white;
							padding: 10px;
							text-align: center;
							font-size: 24px;
							margin-bottom: 20px;
						}


						.line {
							border-bottom: 2px solid red;
							margin-bottom: 10px;
							margin-top: -10px;
						}

/* terms-of-trade */
.table_tot {
            width: 100%;
            margin-bottom: 20px;
            
        }
        .table_tot tr:nth-child(odd) td {
            background-color:  #f8f8f8;

        }

        .table_tot tr:nth-child(odd) th {
            background-color: #f8f8f8;

        }

        .table_tot th {
            text-align: left;
            font-weight: bold;
			border-top: 1px solid #f2f2f2;
			width: 200px;
			padding: 20px;
			font-size: 14px;
        }

        .table_tot td {
            text-align: left;
            padding: 20px;
			font-size: 14px;
			line-height: 1.6em;
        }


/* notifications */
.table_news {
            width: 100%;
            margin-bottom: 20px;
			
            
        }
        .table_news tr {
            text-align: left;
            
			border-top: 1px solid #f2f2f2;
			width: 120px;
			font-size: 14px;
        }
        .table_news th {
            text-align: left;
			border-top: 1px solid #f2f2f2;
			width: 120px;
			padding: 30px 0px;
			font-size: 14px;
        }

        .table_news td {
            text-align: left;
			font-size: 14px;
			line-height: 1.6em;
        }

.tn_td1 {
	width:  120px;
	
	
}


/* cart */

/* リスト全体 */
.newcart-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
margin-bottom: 50px;
}

.newcart-item{
  display: grid;
  grid-template-columns: 120px 1fr 96px 140px; /* 画像 / 情報 / 数量 / 金額 */
  align-items: center;
  gap: var(--gap);
  padding: 24px 8px;
	border-bottom: 1px solid #ccc;
}

.carttittle{
	display: flex;
	border-bottom: 1px solid #ccc;
	padding: 10px;
}

.cart-t1{
	width:60%;
	font-size: 14px;
}

.cart-t2{
	width:20%;
	text-align: right;
	font-size: 14px;
}

.cart-t3{
	width:20%;
	text-align: right;
	font-size: 14px;
}

.newcart-item .nc-thumb{
  display: block;
  width: 120px;
  aspect-ratio: 1/1;      /* サムネ比率を固定 */
  overflow: hidden;
  background: #f6f6f6;
}

.newcart-item .nc-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.newcart-info{
	display: flex;
    vertical-align: top;
    height: 120px;
    flex-direction: column;
    justify-content: space-between;
	padding: 4px 20px;
}

.newproduct-name{
	font-size: 18px;
	line-height: 1.2em;
}

.newcart-qty {
	display: flex;
	text-align: center;
	justify-content: center;
}

.cart-qty {
	width:  45px;
	display: flex;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 3px;
	
}

.newcart-price {
	display: flex;
	text-align: right;
	justify-content: center;
	flex-direction: column;
	gap:5px;
}

.cartprice-main{
	color: var(--DU-gwi-2);
}


.shippingclass{
	font-size: 14px;
	color: darkgrey;
}

.cartprice-sub {
	font-size: 12px;
}

.newcard-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0, 0, 0, .03);
}


.newcart_btn{
	display: flex;
	width: 100%;
	margin-top: 50px;
	flex-direction: row;
	gap:20px;
	align-items: center;
}

.nav_wrap{
	display: flex;
	align-items: center;
}

.karacart{
	padding: 50px 0;
}

.centerflexcolumn{
	display: flex;
    flex-direction: column;
    align-items: center;
	padding: 30px 0;
}


/* entry */

/* =========================
 * FoodSaver風：入力フォーム共通（PC/SP）
 * ========================= */
.fs-form-page{
  width:100%;
  background:#f6f6f6;
  padding: 60px 0 100px;
}

.fs-form-card{
  width:100%;
  max-width: 920px;
  margin: 0 auto;
  background:#fff;
  padding: 56px 64px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  box-sizing:border-box;
}

.fs-form-title{
  text-align:center;
  font-family:"Sawarabi Mincho", serif;
  font-size: 28px;
  letter-spacing: .2em;
  margin: 0 0 40px;
}

.fs-form{
  width:100%;
}

.fs-form-row{
  display:grid;
  grid-template-columns: 220px 1fr; /* 左：項目名 / 右：入力 */
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid #eee;
}
.fs-form-row:first-child{ border-top: 0; }

.fs-form-label{
  align-items: flex-start;   /* ← center をやめる */
  padding-top: 10px;         /* ← 少し上に余白（好みで調整） */
}


.fs-required{
  display:inline-block;
  background:#b10000;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding: 2px 8px;
  border-radius:4px;
}

.fs-field{
  width:100%;
}

.fs-field-grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.fs-field-with-btn{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items:center;
}

.fs-form-control{
  width:100%;
  height:44px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background:#fff;
  font-size:14px;
  box-sizing:border-box;
}

.fs-form-control.is-required{
  background:#fff3f3; /* 参考サイトの薄いピンク */
}

.fs-form-control:focus{
  outline:none;
  border-color:#333;
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* ラジオ */
.fs-radio-group{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 18px;
  align-items:center;
  min-height:44px;
}
.fs-radio{
  display:flex;
  align-items:center;
  gap: 6px;
  font-size:14px;
}

/* 住所自動入力ボタンなど */
.fs-inline-btn{
  height:44px;
  padding: 0 14px;
  border:1px solid #ddd;
  border-radius: 6px;
  background:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.fs-inline-btn:hover{
  background:#f7f7f7;
}

/* パスワード：右側に目アイコン */
.fs-input-with-icon{
  position:relative;
}
.fs-input-with-icon .fs-form-control{
  padding-right: 54px;
}
.fs-eye-btn{
  position:absolute;
  top:50%;
  right: 8px;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.fs-eye-btn:hover{ background:#f7f7f7; }

/* 利用規約 */
.fs-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.fs-check a{
  color:#007bff;
  text-decoration: underline;
}

/* 送信ボタン */
.fs-actions{
  padding-top: 28px;
  display:flex;
  justify-content:center;
}
.fs-submit{
  width: min(520px, 100%);
  height: 52px;
  border: 1px solid #000;
  /* background:#000; */
  background-color: #8dc63f !important; 
  color:#fff;
  border-radius:4px;
  font-size:16px;
  letter-spacing:.12em;
  cursor:pointer;
}
.fs-submit:hover{
  background:#fff;
  color:#000;
}


.fs-product-list{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.5rem;

      width: 100%;
      max-width: 1120px;
      margin-left: auto;
      margin-right: auto;
  }

  /* ★ gridでは子にmax-widthを持たせない（これがSP崩れの原因） */
  .fs-product-item{
      width: 100%;
      min-width: 0; /* gridはこれ大事 */
      border:1px solid #e5e7eb;
      border-radius:.75rem;
      overflow:hidden;
      background:#fff;
      display:flex;
      flex-direction:column;
  }
  .fs-product-item:hover{
      box-shadow:0 10px 25px rgba(15,23,42,.08);
      transform:translateY(-2px);
  }
  @media (max-width:1024px){
      .fs-product-list{
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
  }
  @media (max-width:768px){
      /* ★SPは「PCと同じ見た目」で 1行2列にするだけ */
      .fs-product-list{
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 1.25rem; /* 好みで 1rem〜1.5rem */
      }
      .fs-list-header{
          flex-direction:column;
          align-items:flex-start;
      }
  }
  .fs-product-link{
      display:flex;
      flex-direction:column;
      height:100%;
      color:inherit;
      text-decoration:none;
  }
  /* 一覧カードの画像枠：Mサイズ想定（高さだけ統一） */
  .fs-product-image-wrap{
    width: 100%;
    height: 220px;        /* ←Mサイズ。好みで 180〜240 で調整 */
    overflow: hidden;
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .fs-product-image-wrap img{
    width: 100%;
    height: 100%;
    /* max-width: 600px;  /* でも600px以上には大きくならない */
    /* height: 400px; */ */
    object-fit: contain;  /* 切りたくないなら contain、切って埋めるなら cover */
    display:block;
  }
  .fs-product-body{
      padding:.75rem .875rem 0.5rem;
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
  }
  .fs-product-name{
      font-size:.875rem;
      font-weight:500;
      color:#111827;
      line-height:1.4;
      margin-bottom:.5rem;
      min-height:2.6em;
  }
  .fs-product-price{
      font-size:.9rem;
      font-weight:600;
      color:#111827;
      display:flex;
      align-items:baseline;
      gap:.15rem;
  }
  .fs-product-price small{
      font-size:.75rem;
      color:#6b7280;
  }

  .fs-product-footer{
      padding:.5rem .875rem .75rem;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.5rem;
  }

.form-group .col-form-label {
					display: flex;
					align-items: center; /* 縦の中心に揃える */
					height: 100%;         /* 親要素に対して揃える */
				}
				.terms-link {
					color: #007bff !important;             /* 常に青 */
					text-decoration: underline !important; /* 常に下線 */
					font-weight: normal;        /* オプションで通常太さに */
				}
				.required-label {
					display: inline-block;
					background-color: #cc0000;       /* 濃い赤 */
					color: #fff;                     /* 白文字 */
					font-size: 0.75rem;              /* 小さめ */
					font-weight: bold;
					padding: 2px 6px;
					border-radius: 4px;              /* 角丸 */
					vertical-align: middle;
				}


/* お気に入りのheart */
.heart {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
	transition: transform .15s ease;
}

/* 非お気に入り（グレーの縁） */
.heart.h-nonfavorite {
  background-image: url('../img/favo_off.svg');  /* 透過でOK */
}

/* お気に入り（赤ハート） */
.heart.h-favorite {
  background-image: url('../img/favo_on.svg');
	transform: scale(1.15); /* ちょい大きく */
}

.fav_btn{
display: flex;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: none;
    width: 30%;
    justify-content: center;
    align-items: center;
}

button:hover .cart {
  filter: invert(60%) sepia(94%) saturate(5500%) hue-rotate(330deg) brightness(80%) contrast(120%);
}

.text_center{
	text-align: center;
	line-height: 2rem;
}