/* カスタマイズ用CSS */

body {
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 14px;
}
p {
	line-height: 1.6;
}
a {
	color: #006e3d;
}
a:hover {
	color: #006e3d;
	text-decoration: underline;
}
a img {
	backface-visibility: hidden;
}
a:hover img {
	transition: opacity 0.3s ease;
}
.box-pagetop a img,
.header_logo_area a img {
	backface-visibility: visible;
}
/***********************************************************************
 slime_header ver.1.1
 ***********************************************************************/
.slim_header {
	max-width: none;
}
.slim_header .ec-headerTitle a,
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon,
.slim_header .ec-cartNavi,
.slim_header .ec-categoryNaviRole__title,
.slim_header .ec-categoryNaviRole {
	color: #000;
}
.slim_header .ec-headerNav .ec-headerNav__itemLink {
 color: #fff;
}
.ec-headerTitle a {
 display: flex;
 align-items: center;
}
.ec-headerTitle img {
 width: auto;
 margin-right: 40px;
}
.ec-headerTitle span {
 color: #fff;
 font-size: 14px;
 display: block;
 line-height: 1.4;
 font-weight: normal;
}


@media (min-width:768px) {
	.slim_header .ec-categoryNaviRole li a {
		width: 180px;
		height: auto;
		color: #000;
		background: rgba(255, 255, 255, 0.8);
	}
	.slim_header .ec-categoryNaviRole ul ul {
		left: 180px;
	}
	.slim_header .ec-categoryNaviRole li a:hover {
		background: rgba(250, 250, 250, 0.8);
	}
	.slim_header .ec-categoryNaviRole li ul:before {
		color: #000;
	}
}
.ec-layoutRole .ec-layoutRole__contents {
	max-width: none;
}
.ec-sliderRole {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.slim_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: 15px 30px;
	z-index: 999;
}
.slim_header .ec-headerTitle {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 0 30px;
}
.slim_header .ec-headerNav {
	margin-right: 0;
}
.slim_header .ec-headerNaviRole {
	width: auto;
	max-width: none;
	padding: 0;
	margin: 0 0 0 auto;
}
.slim_header .ec-headerNav .ec-headerNav__item {
	font-size: 14px;
}
.slim_header .ec-headerNav .ec-headerNav__itemIcon {
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
	font-size: 18px;
}
.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
	display: inline-block;
}
.slim_header .ec-cartNavi {
	padding: 3px 0 0 10px;
}
.slim_header .ec-headerNavSP {
	top: 8px;
}
.slim_header .ec-headerNav {
	display: none;
}
.slim_header .ec-categoryNaviRole {
	display: none;
}
@media (min-width:768px) {
	.front_page .slim_header {
		width: 100%;
		color: #fff;
	}
	.slim_header .ec-headerTitle {
		margin: 0;
	}
	.slim_header .ec-headerNav {
		margin-right: 20px;
	}
	.slim_header .ec-headerNav .ec-headerNav__item {
		margin: 0 10px;
	}
	.slim_header .ec-headerNav .ec-headerNav__item .ec-headerNav__itemIcon {
		display: none;
	}
	.slim_header .ec-headerNav .ec-headerNav__item a {
		font-size: 14px;
		font-weight: bold;
	}
	.slim_header .ec-cartNavi {
		padding: 12px 17px 10px;
	}
	.slim_header .ec-headerNav {
		display: block;
	}
	.slim_header .ec-categoryNaviRole {
		position: relative;
		padding: 0;
		font-size: 14px;
		font-weight: bold;
		color: #000;
		margin-right: 18px;
		transform: translateY(1px);
		max-width: none;
		width: auto;
		display: block;
	}
	.slim_header .ec-categoryNaviRole__title {
		cursor: pointer;
	}
	.slim_header .ec-categoryNaviRole__item {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		padding-top: 45px;
	}
	.slim_header .ec-categoryNaviRole:hover .ec-categoryNaviRole__item {
		display: block;
	}
	.slim_header .ec-categoryNaviRole ul {
		margin: 0;
		padding: 0;
	}
	.slim_header .ec-categoryNaviRole ul ul {
		position: absolute;
		top: 0;
	}
	.slim_header .ec-categoryNaviRole ul ul li {
		display: none;
	}
	.slim_header .ec-categoryNaviRole li:hover>ul>li {
		display: block;
	}
	.slim_header .ec-categoryNaviRole li {
		list-style: none;
		position: relative;
		box-sizing: border-box;
	}
	.slim_header .ec-categoryNaviRole li a {
		display: block;
		padding: 15px;
	}
	.slim_header .ec-categoryNaviRole li ul:before {
		content: "\f054";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 10px;
		position: absolute;
		top: 18px;
		right: auto;
		left: -20px;
	}
}
.slim_header {
	background: #046D38;
	color: #fff;
}

@media (max-width:768px) {
    .slim_header {
        padding: 10px 30px;
    }
    .slim_header .ec-headerTitle a img {
        height: 40px;
        margin: 0 auto;
    }
}
/***********************************************************************
 slime_header ここまで
***********************************************************************/

/***********************************************************************
 navi
 ***********************************************************************/
.ec-header_wa {
 background-image: url('/html/user_data/assets/img/common/bg_wa.jpg');
 background-size: cover;
 background-position: center;
}
.ec-category_navi {
 background-image: url(/html/user_data/assets/img/common/bg_wa.jpg);
}
.ec-categoryNaviRole {
 width: 100%;
}
.ec-itemNav {
 width: 100%;
 background: #fff;
}
.ec-itemNav__nav,
.ec-itemNav__nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

.ec-itemNav__nav {
 display: flex;
 flex-wrap: wrap;
 align-items: stretch;
 width: 100%;
 gap: 0;
 border-bottom: 1px solid #e5e5e5;
}

.ec-itemNav__nav > li {
 flex: 1 1 0;
 min-width: 0;
 position: relative;
 border-left: 1px solid #efefef;
}
.ec-itemNav__nav > li:first-child { border-left: none; }

.ec-itemNav__nav > li > a {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 padding: 12px 10px;
 min-height: 48px;
 height: 100%;
 color: #046d38;
 text-decoration: none;
 line-height: 1.4;
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}

.ec-itemNav__nav > li > a:hover,
.ec-itemNav__nav > li > a:focus {
 background: #f5f5f5;
}

.ec-itemNav__nav > li > ul {
 position: absolute;
 left: 0;
 right: 0;
 top: 100%;
 display: none;
 background: #fff;
 border: 1px solid #e5e5e5;
 border-top: none;
 z-index: 1000;
 box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.ec-itemNav__nav > li:hover > ul { display: block; }

.ec-itemNav__nav > li > ul > li > a {
 display: block;
 padding: 10px 14px;
 color: white;
 text-decoration: none;
 white-space: normal;
 overflow-wrap: anywhere;
 word-break: break-word;
}
.ec-itemNav__nav > li > ul > li > a:hover {
    color: #046D38;
}

.ec-itemNav__nav > li > ul > li > a:hover,
.ec-itemNav__nav > li > ul > li > a:focus {
 background: #f7f7f7;
}

.ec-itemNav__nav > li > ul > li { position: relative; }
.ec-itemNav__nav > li > ul > li > ul {
 position: absolute;
 top: 0;
 left: 100%;
 display: none;
 min-width: 200px;
 background: #fff;
 border: 1px solid #e5e5e5;
 z-index: 1001;
}
.ec-itemNav__nav > li > ul > li:hover > ul { display: block; }

@media (max-width: 1200px) {
 .ec-itemNav__nav > li { flex: 1 0 25%; }
}
@media (max-width: 900px) {
 .ec-itemNav__nav > li { flex: 1 0 33.333%; }
}
@media (max-width: 640px) {
 .ec-itemNav__nav > li { flex: 1 0 50%; }
}
@media (max-width: 400px) {
 .ec-itemNav__nav > li { flex: 1 0 100%; }
}


/********************************************
メインビジュアル
*********************************************/
.ec_main {
    max-width:none;
    padding-left: 0;
	padding-right: 0;
}

.ec_main .main_visual .main_container .main1 {
    width: 100%;
}


.main-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 600; /* メイン画像の縦横比に合わせて変更 */
    background-image: url("/html/template/default/assets/img/common/top_fv.png");
    background-size: cover;      /* 画像を自動フィット */
    background-position: center; /* 常に中央 */
}

.main_parts {
    width: 50%;
    position: absolute;
    top: 8%;
    left: 30%;
}

.main3 {
    width: 80%;
}

.label_parts {
    width: 25%;
    position: absolute;
    top: 75%;
    left: 70%;
}

.main2 {
    width: 100%;
}

.main_container {
    position: relative;
}

.ec-role {
    padding-left: 0;
}

/*タイトル*/
.ec-secHeading .ec-secHeading__en {
    font-weight: bold;
    color: green;
    font-size: 15px;
    letter-spacing: 0.2em;
}

.ec-secHeading .ec-secHeading__ja {
    font-weight: bold;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.15em;
    vertical-align: 2px;
}

.ec-recommendationsItemRole__listItemHeading .ec-secHeading__en {
    font-weight: bold;
    color: green;
    font-size: 15px;
    letter-spacing: 0.2em;
}

.ec-recommendationsItemRole__listItemHeading .ec-secHeading__ja {
    font-weight: bold;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.15em;
    vertical-align: 2px;
}

@media (max-width: 400px) {
    .ec-secHeading, .ec-recommendationsItemRole__listItemHeadin {
        padding: 0 20px;
    }
    .ec-secHeading .ec-secHeading__ja, .ec-recommendationsItemRole__listItemHeading .ec-secHeading__ja {
        font-size: 26px;
    }
}

/*新着情報*/
.ec-newsRole .ec-newsRole__newsHeading {
    border-bottom: solid 1px #ccc;
}

.ec-newsRole .ec-newsRole__newsItem {
        padding-bottom: 10px;
    }

@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__news {
        background-color: #fff;
        border: 16px solid #F8F8F8;
        padding: 20px 30px;
    }
}

.ec-newsRole .ec-newsRole__newsCloseBtn {
    display: inline-block;
    margin-left: auto;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: white;
    text-align: center;
    background: #dcdcdc;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

.more-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #2e8b57; /* 緑系（調整OK） */
  font-family: Arial, sans-serif;
}

.more-link .text {
  font-size: 18px;
  letter-spacing: 0.05em;
}

.more-link .arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.news_more {
    width: 100%;
    text-align: center;
}

.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
    border-bottom: none;
}

/*バナーリンク*/
.banner-wrap {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.banner-first {
    margin-right: 25px;
}

.banner-voice {
    margin-left: 50px;
}


.banner-wrap .banner-first a {
  transition: 0.3s ease;
}


.banner-wrap .banner-first:hover {
  filter: brightness(0.9);
}

.banner-wrap .banner-voice a {
  transition: 0.3s ease;
}


.banner-wrap .banner-voice:hover {
  filter: brightness(0.9);
}

.ec-pageHeader h1, .ec-pageHeader .h1 {
    margin: 40px 16px 0;
}

@media screen and (max-width: 768px) {
.ec-headerTitle span {
    display: none;
}    
    
.banner-wrap {
    display: block;
    }
    
.banner-wrap img {
    width: 100%;
    margin-top:50px;
}    
    
.banner-voice {
    margin-left: 0;
    }
}

@media screen and (min-width: 768px) {
.banner img {
    width: 100%;
    }
.banner-wrap {
    margin-top: 50px;
}
}

/*おすすめ商品*/
.ec-recommendationsItemRole {
    padding: 60px 20px 0 20px;
}

.ec-recommendationsItemRole__listItemTitle {
    font-weight: bold;
    padding-top: 15px;
}

.ec-recommendationsItemRole__listItemPrice {
    padding-top: 15px;
    color: #de5d50;
}

.ec-recommendationsItem_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 30px 20px;
}

.ec-recommendationsBanner_container {
  padding: 30px 20px;
　display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; 
}

.ec-recommendationsBanner a {
  transition: 0.3s ease;
}


.ec-recommendationsBanner:hover {
  filter: brightness(0.9);
}

@media screen and (max-width: 768px) {
    .ec-recommendationsItem_container{
        display: block;
    }
    
    .ec-recommendationsItem_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        padding: 30px 20px;
    }
}

/*カテゴリ*/
.ec-categoryRole .ec-secHeading__en {
    font-weight: bold;
    color: green;
    font-size: 15px;
    letter-spacing: 0.2em;
}

.ec-categoryRole .ec-secHeading__ja {
    font-weight: bold;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.15em;
    vertical-align: 2px;
}

.ec-categoryRole .ec-categoryRole__list {
  padding: 30px 20px;
　display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px; 
}

.ec-categoryRole__listItem a {
  transition: 0.3s ease;
}


.ec-categoryRole__listItem:hover {
  filter: brightness(0.9);
}

@media (max-width:768px) {
  .ec-categoryRole .ec-categoryRole__list {
  padding: 30px 20px;
　display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; 
}
}

/*お客様の声*/
.voice .panel-body {
    display: flex;
    padding: 40px 0 0;
    margin: 40px 0 0;
    border-top: 1px solid #525263;
}

.voice .panel-heading {
    text-align: center;
    margin-right: 20px;
}

.voice .panel-heading img {
    padding: 0 0 20px;
    display: block;
}

@media (max-width:768px) {
    .voice .panel-body {
        display: block;
    }
    
    .voice .panel-heading {
        margin: 0 auto;
        display: block;
    }
    .voice .panel-heading img {
        margin: 0 auto;
    }
}

/*初めての方へ*/
.container-fluid .inner {
    padding: 60px 20px 0 20px;
}

.container-fluid h2 , 
.container-fluid h2  {
    padding-top: 30px;
}

.page-heading {
    text-align: center;
    padding-top: 60px;
}

.container-fluid p {
    font-size: 18px;
}

.container-fluid ul li {
    font-size: 18px;
}


@media (max-width:768px) {
    .page-heading {
        padding-top: 0;
    }
    .container-fluid p {
        font-size: 14px;
    }
    
    .container-fluid ul li {
        font-size: 14px;
    }
}

.container-fluid .ec-recommendationsItem_container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← minmax(0,1fr) が重要 */
  gap: 16px;
  box-sizing: border-box;
  max-width: 100%;  /* 親枠からはみ出さない */
  overflow: hidden; /* 念のためのガード（検証時に一時オンでもOK） */

}


.ec-recommendationsBanner img {
    width: 100%;
}

.product_button a {
    font-size: 20px;
    width: 20%;
    text-align: center;
    color: white;
    background-color: orange;
    padding: 10px;
    border: solid 3px #a1a1a1;
    border-radius: 10px;
}

.product_button {
    padding: 30px 20px;
    margin-bottom: 40px;
}

.box-recommend img {
    width: 100%;
}

/* アイコンサイズ調整（必要ならSVGに差し替え） */
.floating-cart__icon { font-size: 18px; }

/* 縦書き風ラベル（画像のニュアンスに近づける場合） */
.floating-cart__label {
  writing-mode: vertical-rl;      /* 縦書き */
  text-orientation: mixed;
  letter-spacing: .05em;
}

/* ホバー/フォーカス */
.floating-cart:hover,
.floating-cart:focus-visible {
  filter: brightness(1.05);
}


/*カートを見るボタン*/

/* 右側固定のフローティング・カート */
.floating-cart {
  position: fixed;
  right: 0;             /* 画面右からの距離 */
  top: 50%;                /* 画面中央に配置 */
  transform: translateY(-50%);
  z-index: 2000;           /* ヘッダーやモーダルより前面に */
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 12px 14px;
  border-radius: 8px 0 0 8px; /* 右端に張り付くバッジ感 */
  background: #E85C4A;        /* お好みのアクセント色 */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);

  /* 視認性とクリック領域 */
  line-height: 1;
}

.floating-cart:hover {
    color: #E85C4A;
    background-color: white;
    border: solid 1px #E85C4A;
    text-decoration: none;
}

@media (max-width:768px) {
    .floating-cart {
        display: none;
    }
    .footer-logo .shop_img {
        width: 100%;
    }
}