@charset "utf-8";

/* --------------------------------
	Common
-------------------------------- */

/****** Typography Setting ********/
body {
	font-family: "Roboto Slab", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "sans-serif";
	line-height: 1.4;
	background-color: #f2f2f2;
	color: #525263;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.4;
    margin: 0 0;
    font-family: "Roboto Slab", serif;
    font-weight: bold;
    color: #3e3e3e;
    margin: 10px 0;
}
h1,
h2,
h3 {
    letter-spacing: 0.2em;
}
h1 {
	font-size: 22px;
}
h2 {
	font-size: 18px;
}
h3,
h4,
h5,
h6 {
	font-size: 16px;
}

.ec-pageHeader h1 {
	font-size: 22px;
	border-top: none;	
}
@media only screen and (min-width: 768px) {
	.ec-pageHeader h1 {
		font-size: 28px;
	}	
}

.ec-borderedDefs {
	border-top: none;
}

.ec-heading-bold {
	border-bottom: 1px solid #E6E6E6;
}

.ec-blockTopBtn {
    position: fixed;
    width: 80px;
    height: 40px;
    bottom: 20px;
    right: 30px;
    z-index: 100;
    border: none;
    outline: none;
	color: #fff;
    background-color: #9da3a9;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 0 0 10px rgb(255 255 255 / 50%);
}

.ec-blockBtn--action,
.ec-inlineBtn--action {
	color: #fff;
	background-color: #9FCC95;
	border-color: #9FCC95;
	border-width: 2px;
}
.ec-inlineBtn--action {
	min-width: 15rem;
	border-width: 2px;
}
.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-blockBtn--action:active,
.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus,
.ec-inlineBtn--action:active {
	background-color: #87cf77;
	border-color: #87cf77;
}
.ec-inlineBtn--cancel {
	min-width: 15rem;
}
.ec-blockBtn--cancel,
.ec-inlineBtn--cancel {
	background: #fff;
	color: #555;
	border-width: 2px;
}
.ec-link:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0c1";
	margin-left: .2rem;
	margin-right: .2rem;
}
.ec-link-ext {
	color: #0688E2;
	text-decoration: none;
}
.ec-link-ext:after {
	font-family:"Font Awesome 5 Free";
    content:"\f35d";
	margin-left: .2rem;
	margin-right: .2rem;

	vertical-align: top;
}

.ec-zipInputHelp {
	margin-bottom: 0;
	vertical-align: middle;
}

.ec-alert-caution {
    color: #fff!important;;
    background-color: #f0674e!important;;
    border-color: transparent;
}
.ec-alert-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: transparent;
}
.ec-alert-info {
    color: #fff;
    background-color: #87cf77;
    border-color: transparent;
}
.ec-alert .d-flex {
	align-items: center;
}
.ec-alert i {
    font-size: 40px;
    margin: 0.1em 0.1em 0.1em 0.5em;
    flex: 0 0 auto;
}
.ec-alert p {
    padding: 1em;
    flex: 1 0 0%;
}

.ec-select select {
	height: 38px;
	appearance: none;
	padding-right: 5em;
	background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
	background-position: calc(100% - 20px) calc(45% + 2px), calc(100% - 15px) calc(45% + 2px), calc(100% - 2.5em) 45%;
/*	background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;*/
	background-size: 5px 5px, 5px 5px, 1px 1.6em;
	background-repeat: no-repeat;
	background-color: #fff;
}

.ec-reportHeading {
	font-size: 110%;
}

.ec-cartNavi .ec-cartNavi__badge {
    background-color: #95bf8c;
}
.ec-cartNaviNull {
	min-width: 400px;
	max-width: 400px;
}

.ec-cartNavi__price b {
	color: #eb6100;
}

/* always show cart total */
.ec-cartNavi {
	display: flex;
	justify-content: space-between;
	border-radius: 99999px;
	box-sizing: border-box;
	padding: 12px 15px 10px;
	width: auto;
	min-width: 140px;
	height: 44px;
	white-space: nowrap;
	cursor: pointer;
	background: #FAFAFA;
}
.ec-cartNavi .ec-cartNavi__badge {
	display: inline-block;
	min-width: 16px;
	position: relative;
	left: 0;
	top: 0;
}
.ec-cartNavi .ec-cartNavi__price {
	display: inline-block;
	font-size: 12px;
	font-weight: normal;
	vertical-align: middle;
}

/* --------------------------------
	Block
-------------------------------- */

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
	font-size: 11pt;
	font-weight: normal;
}

.ec-headerNavSP svg,
.ec-drawerRoleClose svg {
	stroke-width: 2px;
}

.ec-pageHeader h1 {
	text-align: center;
}

.ec-layoutRole__header .block-header__logo {
	margin-top: -10px;
	margin-left: 20px;
}
.ec-layoutRole__header .block-header__logo img {
    height: 30px;
}
.ec-layoutRole__header .block-header__nav ul {
	list-style: none;
	display: flex;
    flex-direction: row!important;
	align-items: center!important;
}

.ec-cartNavi .ec-cartNavi__badge {
	top: -7px;
}

.ec-layoutRole__contents {
	min-height: 100vh;
	padding-bottom: 8rem;
}

.ec-headerNavSP {
	margin-top: 8px;
}

.ec-headerNav {
	display: none;
}

.ec-mrankNaviWrap {
}
.ec-mrankNavi {
 	color: #fff;
 	background-color: #eb6100;
 	border-radius: 100vh;
 	padding: 0.5em;
 	font-size: 12px;
}

.ec-layoutRole__footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 99;
}

.ec-layoutRole__footer .bgc-main {
	background-color: #2e2d3d;
}

.ec-drawerRole {
	width: 55vw;
}

.ec-drawerRole,
.ec-drawerRole .ec-headerLinkArea {
	background-color: #2e2d3d;
}

.ec-drawerRoleClose {
	left: 60vw;
}

.ec-drawerRole a,
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
	color: #fff;
}

.ec-headerLink__item li {
	list-style-type: none;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: -1.5em;
}

@media only screen and (min-width: 768px) {
	.ec-layoutRole__header .block-header__logo {
		margin-left: 0;
	}
	.ec-cartNavi .ec-cartNavi__badge {
		left: -15px;
	}
	.ec-headerNav {
		display: block;
	}
}

@media only screen and (max-width: 768px) {
.ec-layoutRole__contents {
		padding-bottom: 1rem;
	}
	.ec-layoutRole__footer {
    	position: initial;
	}
}

/* --------------------------------
	Cart Page
-------------------------------- */

.ec-cartRole .ec-cartRole__actions dl {
 	display: flex;
 	flex-wrap: wrap;
}
.ec-cartRole .ec-cartRole__total dt {
 	width: 40%;
}
.ec-cartRole .ec-cartRole__total dd {
	margin-left: 0;
 	width: 60%;
}
.ec-cartRole .ec-cartRole__totalText strong {
	color: #E94451;	
}
.ec-cartRole .ec-cartRole__totalDiscountAmount {
	color: #E94451;
}

/* --------------------------------
	Product List Page
-------------------------------- */

.ec-productRole {
    padding-left: 0;
    padding-right: 0;
}
.ec-productRole .ec-productRole__tag {
    margin-bottom: 3px;
}
.ec-productRole .tag_attr_red {
	border-color: #f00;
}
.ec-productRole .tag_attr_green {
	border-color: #0f0;
}
.ec-productRole .tag_attr_blue {
	border-color: #00f;
}
.ec-productRole .tag_attr_yellow {
	border-color: #ff0;
}
.ec-productRole .tag_attr_cyan {
	border-color: #0ff;
}
.ec-productRole .tag_attr_magenta {
	border-color: #f0f;
}
.ec-productRole .tag_attr_bluegreen {
	border-color: #0f8;
}
.ec-productRole .tag_attr_lightgreen {
	border-color: #8f0;
}
.ec-productRole .tag_attr_purple {
	border-color: #80f;
}
.ec-productRole .tag_attr_lightblue {
	border-color: #08f;
}
.ec-productRole .tag_attr_orange {
	border-color: #f80;
}
.ec-productRole .tag_attr_pink {
	border-color: #f08;
}
.ec-productRole .tag_attr_peach {
	border-color: #f88;
}
.ec-productRole .tag_attr_yellowgreen {
	border-color: #8f8;
}
.ec-productRole .tag_attr_lavender {
	border-color: #88f;
}
.ec-productRole .tag_attr_black {
	border-color: #000;
}
.ec-productRole .tag_attr_gray {
	border-color: #888;
}

/* --------------------------------
	Product List Page
-------------------------------- */

#page_product_list .ec-layoutRole__contents {
	margin-top: 1rem;
}

#page_product_list .ec-shelfGrid__item p {
    font-family: "Hiragino Kaku Gothic ProN";
    font-size: 1.0rem;
    text-align: center;
	color: #555;
}

#page_product_list .ec-shelfGrid__item-name {
	height: 5rem;
}

#page_product_list .ec-price {
    font-family: "Hiragino Kaku Gothic ProN";
    font-size: 1.1rem;
    text-align: center;
	color: #555;
}

#page_product_list .ec-price__price_type {
	font-size: .8rem;
}

#page_product_list .ec-price-special {
	color: #ff3700;
}

#page_product_list .ec-productRole__tags {
	text-align: center;
	border-bottom: none;
}

/* --------------------------------
	Product Detail Page
-------------------------------- */

#page_product_detail .ec-headingTitle {
	color: #555;
	font-weight: bold;
	text-align: left;
	line-height: 1.7rem;
	border-top: 2px solid #f6f6f6;
	border-bottom: 2px solid #f6f6f6;
	padding: 20px 0 20px;
}
#page_product_detail .ec-headingTitle .trade_name {
	font-size: 1.4rem;
	letter-spacing: 0.1rem;
}
#page_product_detail .ec-headingTitle .kana_name {
	font-size: 1rem;
	letter-spacing: 0rem;	
}

#page_product_detail .ec-price {
	color: #555;
}
#page_product_detail .ec-price-special {
	color: #ff3700;
}
#page_product_detail .ec-price .ec-price__price {
	padding: 0px;
}
#page_product_detail .ec-price .ec-price__price_type {
	font-size: 1rem;
}

#page_product_detail .ec-productRole__actions {
	margin: 0;
	padding: 0;
	flex: 1;
}
#page_product_detail .ec-productRole__actions input {
	height: 100%;
}
#page_product_detail .ec-productRole__actions select {
	width: 100%;
	height: 100%;
	padding-right: 0;
}
#page_product_detail .ec-productRole__btn {
	margin-bottom: 0;
	flex: 4;
}
#page_product_detail .ec-productRole__btn_disabled {
	width: 100%;
}

#page_product_detail .ec-productRole__description {
	margin-top: 2rem;
	margin-bottom: 1rem;
}
#page_product_detail .ec-productRole__description h3 {
	color: #555;
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 0.15rem;
}
#page_product_detail .ec-productRole__description,
#page_product_detail .ec-productRole__saleNote {
	font-size: 1rem;
	color: #555;
}
#page_product_detail .ec-productRole__saleNote {
	font-size: 1rem;
}
#page_product_detail .ec-productRole__description strong,
#page_product_detail .ec-productRole__saleNote strong {
	color: #ff3700;
	font-weight: bold;
}
#page_product_detail .ec-productRole__description ul,
#page_product_detail .ec-productRole__saleNote ul {
	padding-left: 1.3rem;
}
#page_product_detail .ec-productRole__description a:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0c1";
	margin-left: .2rem;
	margin-right: .2rem;
}
#page_product_detail .ec-productRole__description a.ingredients-toggle:after {
	font-family:"Font Awesome 5 Free";
    content:"\f05a";
	margin-left: .2rem;
	margin-right: .2rem;
}

#page_product_detail .ec-productRole__saleNote {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0 0;
    border: solid 3px #45b32d; /*線*/
    border-radius: 6px; /*角の丸み*/
}
#page_product_detail .ec-productRole__saleNote .saleNote_title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
    font-size: 1.2em; /*タイトル文字サイズ*/
    background: #ffffff; /*タイトル文字背景色*/
    color: #45b32d; /*タイトル文字色*/
    font-weight: bold;
}
#page_product_detail .ingredients-toggle {
	display: block;
	margin: 1rem 0 .5rem;
}

/* --------------------------------
	Press (Content Page)
-------------------------------- */

#page_content_press .content_press_header {
	color: #555;
    font-size: 14px;
    border-bottom: 1px solid #eee;
/*    padding-bottom: 0.5em;*/
    margin-top: 1.5em;
/*    margin-bottom: 0.5em;*/
}

#page_content_press .media-name {
	color: #111;
	margin-top: 1em;
}

#page_content_press .media-issue {
	margin-top: .3em;
	margin-bottom: 1em;
}

#page_content_press .content_press_body {
	color: #555;
    font-size: 14px;
}

#page_content_press .description a {
	color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

/* --------------------------------
	Column (Content Page)
-------------------------------- */

.content_page .center_large {
	font-size: 120%;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
}

.content_page .center_small {
	color: #555;
	font-size: 90%;
	letter-spacing: 0.2em;
	text-align: center;
}

.content_page .person {
	font-weight: bold;
}
.content_page .person_1 {
	color: #0397c3;
}
.content_page .person_2 {
	color: #d04a63;
}
.content_page .person_3 {
	color: #eb8516;
}

#column_content_auther .name {
	font-size: 90%;
    font-weight: 500;
}

#column_content_auther .title,
#column_content_auther .description {
	color: #555;
	font-size: 85%;
    font-weight: normal;
}

#column_content_body {
	color: #555;
}

#column_content_body a {
	font-weight: 400;
	color: #4089c4;
}

.content_page h2 {
	text-align: center;
}

.content_page .release-column-wrapper {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.content_page .content-image-wrapper {
	text-align: center;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.content_page .content-multi-image-wrapper {
	text-align: center;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.content_page .content-image {
	width: initial;
}

.content_page .content_paginator
{
	text-align: right;
}

.content_page .content_paginator a {
	color: #4089c4;
}

@media only screen and (max-width: 768px) {
	.content_page .profile-image-wrapper {
		text-align: center;
	}
	.content_page .profile-image {
		width: 70%;
	}
}

/* --------------------------------
	List (Content Page)
-------------------------------- */

#list_content_body {
	color: #555;
}

.content_page .list-item {
	border-bottom: dashed 1px #ddd;
	width: 100%;
}

.content_page .list-item-title {
	color: #111;
	font-weight: 500;
}

.content_page .list-item-question p,
.content_page .list-item-answer p {
	padding-left: 1em;
    text-indent: -2.1em;
    margin-right: 1em;
}
.content_page .list-item-question p:before {
	content: "Q.";
    font-size: 150%;
    color: #f00;
    margin-right: 0.5em;
	font-weight: 600;
}
.content_page .list-item-answer p:before {
    content: "A.";
    font-size: 150%;
    color: #00f;
    margin-right: 0.5em;
	font-weight: 600;
}

.content_page .list-item-title:before {
 	content: "✏︎";
 	font-size: 120%;
 	color: #09f;
 	margin-right: .5em;
}

.content_page .list-item-tag {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.content_page .list-item-tag-default {
	background-color: #5bc0de;
}

.content_page .download-link {
	color: #0092C4;
}
.content_page .download-link:after {
	font-family:"Font Awesome 5 Free";
    content:"\f56d";
	margin-left: .2rem;
	margin-right: .2rem;
}

.content_page .release-headding {
	text-align: center;
}
.content_page .release-headding h2 {
	font-size: 20px;
	font-weight: bold;
}
.content_page .release-subtitle {
	letter-spacing: 0.2em;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	font-family: "Roboto Slab", serif;
	color: #3e3e3e;
}

/* --------------------------------
	Blocks
-------------------------------- */

.block_topic .content_article_header {
	color: #555;
    border-bottom: 1px solid #eee;
/*    padding-bottom: 0.5em;*/
    margin-top: 1.5em;
/*    margin-bottom: 0.5em;*/
}

.block_topic .content_article_header img {
  height: 300px;
  object-fit: contain;
}

.block_topic .media-name {
	color: #111;
	margin-top: 1em;
}

.block_topic .media-issue {
	margin-top: .3em;
	margin-bottom: 1em;
}

.block_topic .content_article_header {
	color: #555;
}

.block_topic .description a {
	color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

.block_topic .detail-url a:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0a4";
	margin-left: .2rem;
	margin-right: .2rem;
}

.block_banner .description a:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0a4";
	margin-left: .2rem;
	margin-right: .2rem;
}

.block_banner ul {
	padding-left: 0;
	list-style-type: none;
}

.block_banner li {
	margin-bottom: .3em;
}

.block_alsoread .content_article_header {
	color: #555;
    border-bottom: 1px solid #eee;
	padding-bottom: 1.5em;
    margin-top: 1.5em;
/*    margin-bottom: 0.5em;*/
}

.block_alsoread .content_article_header img {
  height: 300px;
  object-fit: contain;
}

.block_alsoread .content_article_body a:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0a4";
	margin-left: .2rem;
	margin-right: .2rem;
}

/*
.block_alsoread .content_article_links ul {
	list-style: none;
	padding-left: 0;
}
*/
.block_alsoread .content_article_links li {
	padding-bottom: .5em;
}

/* --------------------------------
	Registration Page
-------------------------------- */

@media only screen and (min-width: 768px) {
	.ec-registerRole dt {
		text-align: right;
		padding-right: 3rem;
	}
}
.ec-registerRole .ec-registerRole__resend,
.ec-registerRole .ec-registerRole__actions {
	text-align: center;
}
.ec-registerRole .ec-registerRole__resend p {
	margin-bottm: 3rem;
}

/* --------------------------------
	Login Page
-------------------------------- */

.ec-loginRole .ec-pageHeader h1 {
	display: none;
}
.ec-loginRole .ec-pageHeader {
	margin-bottom: 2rem;
}
.ec-loginRole h2 {
	color: #555;
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 0.15rem;
	border-bottom: 2px solid #f6f6f6;
	padding: 20px 0 20px;
}
.ec-loginRole .ec-loginRole_auth,
.ec-loginRole .ec-loginRole_register {
	padding: 2.5rem;
}
.ec-loginRole .ec-loginRole_auth p,
.ec-loginRole .ec-loginRole_register p {
	line-height: 1.6rem;
	margin-bottom: 1.6rem;
}
.ec-loginRole .ec-login {
	margin: 0;
	padding: 0 10px 20px;
	background: transparent;
}
.ec-loginRole .ec-login__actions,
.ec-loginRole .ec-loginRole_register a {
	margin: 15px 0;
}
.ec-loginRole .ec-loginRole_register .ec-login__actions {
	margin-top: 3rem;
	padding: 0 10px;
}
.ec-loginRole .ec-login__input {
	margin: 0;
}
.ec-loginRole .ec-loginRole_banner img {
	width: 100%;
}

/* --------------------------------
	Forget Page
-------------------------------- */

.ec-forgotRole__intro {
	text-align: center;
}

/* --------------------------------
	Trade Low Page
-------------------------------- */

@media only screen and (min-width: 768px) {
	.ec-tradeLawRole dt {
		text-align: right;
		padding-right: 3rem;
	}
}

/* --------------------------------
	Privacy Page
-------------------------------- */

.ec-privacyRole .ec-off1Grid {
	margin-bottom: 1.5rem;
}
.ec-privacyRole h2 {
	border-bottom: 1px solid #E6E6E6;
}
.ec-privacyRole .dl-horizontal {
 	display: flex;
 	flex-wrap: wrap;
 	margin-top: 2rem;
}
.ec-privacyRole .dl-horizontal dt {
 	width: 30%;
 	text-align: right;
 	padding-right: 2rem;
}
.ec-privacyRole .dl-horizontal dd {
	margin-left: 0;
 	width: 70%;
}

/* --------------------------------
	Contact Page
-------------------------------- */

@media only screen and (min-width: 768px) {
	.ec-contactRole dt,
	.ec-contactConfirmRole dt {
		text-align: right;
		padding-right: 3rem;
	}
}
.ec-contactRole .ec-para-normal,
.ec-contactConfirmRole .ec-para-normal {
	text-align: center;
}

/* --------------------------------
	Guide Page
-------------------------------- */

.ec-guideRole .ec-off1Grid {
	margin-bottom: 1.5rem;
}
.ec-guideRole h2 {
	border-bottom: 1px solid #E6E6E6;
}
.ec-guideRole strong {
	color: #E94451
}
#mrank-table,
#shipping-fee,
#postpay-fee {
	margin-top: 2em;
	margin-bottom: 2em;
	max-width: 36rem;
}
#mrank-table .table th,
#postpay-fee .table th,
#shipping-fee .table th {
	border-top: none;
}
#shipping-fee .table th:nth-of-type(3),
#shipping-fee .table td:nth-of-type(3) {
	text-align: right;
}
#delivery-time-table {
	text-align: center;
}
#card-list {
	margin: 1.5rem 0;
}
#card-list ul {
	display: flex;
	list-style: none;
	padding-left: 0;
}
#mrank-note {
	margin-left: -2em;
}

/* --------------------------------
	My Page
-------------------------------- */

.ec-mrankNaviWrap {
	display:flex;
	justify-content:center;
	align-items: center;	
}

.ec-mrankNavi__icon {
	flex: 0 0 150px;
	margin: 0 20px;
}
.ec-mrankNavi__icon img {
	width:150px;
}

.ec-welcomeMsg b {
 	font-size:120%;
 	color:#eb6100;
}

.ec-welcomeMsg a {
	color: #0092C4;
    text-decoration: none;
    cursor: pointer;
}

.ec-welcomeMsg a:after {
	font-family:"Font Awesome 5 Free";
    content:"\f0a4";
	margin-left: .2rem;
	margin-right: .2rem;
}


.ec-historyListHeader .ec-historyListHeader__date {
	font-size: 1.1em;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
	font-size: 1.0em;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
	font-size: 1.0em;
}

.ec-historyListHeader .ec-historyListHeader__action a {
	width: 50%;
}