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

/**
 * レスポンシブテンプレート
 *
 */
/* desktop */
/*
@media only screen and (min-width: 1025px) {
}
*/
/* smartphone tablet */
/*
@media only screen and (min-width: 1024px) {
}
*/
/* smartphone */
/*
@media only screen and (max-width: 769px) {
}
*/


/* =========================================================
■ 基本
========================================================= */
/*---------------------------------
_背景
-----------------------------------*/
.ec-layoutRole .ec-layoutRole__contents {
	width: 100%;
	max-width: 100%;
	background-image: url("/html/user_data/assets/img/base/background1.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.ec-layoutRole .ec-layoutRole__main {
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	padding-top: 30px;
}
#page_homepage .ec-layoutRole .ec-layoutRole__main {
	background-color: inherit;
}
/* smartphone tablet */
@media only screen and (min-width: 1024px) {
	.ec-layoutRole .ec-layoutRole__contents {
		margin-top: -52px;
		padding-top: 52px;
	}
}



/* =========================================================
■ ヘッダー
========================================================= */
/*---------------------------------
_ヘッダー域
-----------------------------------*/
.ec-layoutRole__header {
	position: relative;
}

/*---------------------------------
_ロゴ
-----------------------------------*/
.ec-headerRole {
	position: absolute;
	top: 0;
	height: 50px;
	background-color: #FFF;
	width: 100%;
	padding-top: 0px;
}
.ec-headerTitle .ec-headerTitle__title a {
	margin-bottom: 0px;
}
/* desktop */
@media only screen and (min-width: 1025px) {
	.ec-headerRole {
		float: left;
		width: 20%;
	}
}

/*---------------------------------
_検索 ヘッダーナビ
-----------------------------------*/
.ec-headerNaviRole {
	float: right;
	padding-top: 50px;
	background-color: #FFF;
	padding-bottom: 0px;
}
.ec-headerNaviRole .ec-headerNaviRole__left {
	width: auto;
	float: right;
}
.ec-headerNaviRole .ec-headerNaviRole__right {
	float: right;
}
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
	background-color: #0D532E;
}
.ec-headerNav .ec-headerNav__itemLink {
	display: none;
}
/* desktop */
@media only screen and (min-width: 1025px) {
	.ec-headerNaviRole {
		padding-top: 0px;
	}
	.ec-headerNaviRole {
		width: 80%;
	}
	.ec-headerNav .ec-headerNav__itemLink {
		display: inline-block;
	}
}

/*---------------------------------
_カテゴリメニュー
-----------------------------------*/
.ec-categoryNaviRole {
	max-width: 100%;
	background-color:rgba(13,83,46,0.8);
	float: none;
	clear: both;
}
.ec-itemNav {
	max-width: 1130px;
	margin-left: auto;
	margin-right: auto;
}
.ec-itemNav__nav li a {
	background-color: inherit;
	color: #FFF;
	font-weight: normal;
}
.ec-itemNav__nav li a:hover {
	background-color: inherit;
	text-decoration: underline;
}



/* =========================================================
■ トップページコンテンツ
========================================================= */
/*---------------------------------
_アイキャッチ
-----------------------------------*/
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
	color: #0D532E;
	padding-bottom: 5px;
	margin-top: 0px;
	border-bottom: 1px solid #0D532E;
	display: inline-block;
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
	color: #0d532e;
}
.ec-blockBtn--top {
	background-color: #0D532E;
	border: none;
	border-radius: 50px 50px;
}
.ec-blockBtn--top:hover {
	background-color: #0D532E;
}

/*---------------------------------
_TOPICS BOX
-----------------------------------*/
.ec-topicRole {
	width: 99vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-image: url("/html/user_data/assets/img/index/background2.png");
	background-size: cover;
}

/*---------------------------------
_新着商品
-----------------------------------*/
.ec-inlineBtn--top {
	background-color: #0D532E;
	border: none;
	border-radius: 50px 50px;
	width: 10em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.ec-inlineBtn--top:hover {
	background-color: #0D532E;
}
/* desktop */
@media only screen and (min-width: 1025px) {
	.ec-newItemRole {
		width: 99vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		background-image: url("/html/user_data/assets/img/index/background3.png");
		background-size: cover;
		padding-top: 150px;
		padding-bottom: 150px;
	}
	.ec-newItemRole .ec-newItemRole__list {
		width: 1130px;
		margin-left: auto;
		margin-right: auto;
	}
	.ec-newItemRole .ec-newItemRole__list .ec-newItemRole__listItem a img {
		border: 1px solid #333;
	}
}


/*---------------------------------
_カテゴリBOX
-----------------------------------*/
.ec-categoryRole {
	width: 99vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-image: url("/html/user_data/assets/img/category/background4.png");
	background-size: cover;
}
.ec-categoryRole .ec-role {
	margin: 0 auto;
}
.ec-categoryRole .ec-secHeading {
	color: #FFF;
}
.ec-categoryRole .ec-secHeading .ec-secHeading__line {
	background: #FFF;
}
@media only screen and (min-width: 768px) {
	.ec-categoryRole .ec-categoryRole__listItem {
		width: calc(100% / 2);
	}
}



/* =========================================================
■ フッター
========================================================= */
.ec-footerRole {
	padding-top: 0px;
	background-color: #0D532E;
}

/*---------------------------------
_フッターナビ
-----------------------------------*/
.ec-footerNavi {
	width: 99vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: #0D532E;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 0px;
}

/*---------------------------------
_フッタータイトル
-----------------------------------*/
.ec-footerTitle {
	padding-top: 0px;
	padding-bottom: 0px;
}
.ec-footerTitle .ec-footerTitle__logo {
	width: 99vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: #0D532E;
	padding-top: 50px;
	padding-bottom: 50px;
}

/*---------------------------------
_フッター コピーライト
-----------------------------------*/
.ec-footerTitle .ec-footerTitle__copyright {
	padding-top: 30px;
	padding-bottom: 30px;
}




/* =========================================================
■ 追加項目
========================================================= */

/*---------------------------------
_Youtube動画レスポンシブ対応
-----------------------------------*/
.youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.youtube iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}