@charset "utf-8";

/* Overwrite Setting */


/* Setting */
.u-show__mobile {
	display: none !important;
}

.u-hide__mobile {
	display: block !important;
}

.u-link {
	text-decoration: underline;
}

.u-link:hover {
	text-decoration: none;
}

.u-font-normal {
	font-weight: 400;
}

.u-font-bold {
	font-weight: 700;
}

.u-font-color__black {
	color: #000 !important;
}

.u-font-color__red {
	color: #BF4840 !important;
}

.u-font-color__lightblue {
	color: #3366BB !important;
}

.u-align__center {
	text-align: center;
}

.u-vertical-align__top {
	vertical-align: top !important;
}

.u-vertical-align__middle {
	vertical-align: middle !important;
}

.u-vertical-align__bottom {
	vertical-align: bottom !important;
}

.u-flex {
	display: flex;
	flex-wrap: wrap;
}

.u-flex__center {
	justify-content: center;
}

.u-flex__right {
	justify-content: flex-end;
}

.u-flex__middle {
	align-items: center;
}

.u-flex__bottom {
	align-items: flex-end;
}

.u-flex__reverse {
	flex-direction: row-reverse;
}

.u-flex__between {
	justify-content: space-between;
}

.u-flex__column--2 > * { width: calc(100% / 2); }
.u-flex__column--3 > * { width: calc(100% / 3); }
.u-flex__column--4 > * { width: calc(100% / 4); }
.u-flex__column--5 > * { width: calc(100% / 5); }
.u-flex__column--6 > * { width: calc(100% / 6); }
.u-flex__column--7 > * { width: calc(100% / 7); }

.u-flex-child-wrap {
	margin-right: -10px;
	margin-left: -10px;
}

.u-flex-child {
	padding-right: 10px;
	padding-left: 10px;
}


.u-contents {
	margin: 100px 0 0;
}

.u-inner {
	max-width: 976px;
	margin-right: auto;
	margin-left: auto;
}

.u-title__hi {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .05em;
	padding: .2em 0 .45em 20px;
	border-left: 6px solid #475c85;
}

.u-title__hi + * {
	margin-top: 45px !important;
}

.u-title__mid {
	font-size: 22px;
	font-weight: 500;
}

.u-title__mid + * {
	margin-top: 25px !important;
}

.u-title__low {
	color: #596c91;
	font-size: 18px;
	font-weight: 700;
}

.u-title__low + * {
	margin-top: 15px !important;
}

.u-text {
	font-size: 16px;
	margin: 30px 0 0;
}

.u-photo img {
	max-width: 646px;
}

.u-table table {
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
}

.u-table th {
	font-size: 13px;
	font-weight: 700;
	vertical-align: top;
	padding: 15px;
	background: #f2f2f2;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
}

.u-table th sup {
	font-weight: 400;
}

.u-table td {
	font-size: 13px;
	vertical-align: middle;
	padding: 15px;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
}

.u-table img {
	max-width: 100%;
}

.u-note__items {
	margin: 30px 0 0;
}

.u-note__item {
	color: #666;
	font-size: 14px;
	margin: 5px 0 0;
	padding: 0 0 0 2em;
	position: relative;
}

.u-note__item:before {
	content: attr(data)'';
	position: absolute;
	top: 0;
	left: 0;
}

.u-note__item--2line {
	padding-left: 2.5em;
}

.u-width__50 { width: 50%; }
.u-width__70 { width: 70%; }

.u-mgt__0 { margin-top: 0 !important; }
.u-mgt__10 { margin-top: 10px !important; }
.u-mgt__20 { margin-top: 20px !important; }
.u-mgt__30 { margin-top: 30px !important; }
.u-mgt__40 { margin-top: 40px !important; }
.u-mgt__50 { margin-top: 50px !important; }
.u-mgt__60 { margin-top: 60px !important; }
.u-mgt__70 { margin-top: 70px !important; }
.u-mgt__80 { margin-top: 80px !important; }
.u-mgt__90 { margin-top: 90px !important; }
.u-mgt__100 { margin-top: 100px !important; }

.u-mgb__20 { margin-bottom: 20px !important; }
.u-mgb__-30 { margin-bottom: -30px !important; }

.u-maxw__10 { max-width: 10% !important; }
.u-maxw__20 { max-width: 20% !important; }
.u-maxw__30 { max-width: 30% !important; }
.u-maxw__40 { max-width: 40% !important; }
.u-maxw__50 { max-width: 50% !important; }
.u-maxw__60 { max-width: 60% !important; }
.u-maxw__70 { max-width: 70% !important; }
.u-maxw__80 { max-width: 80% !important; }
.u-maxw__90 { max-width: 90% !important; }
.u-maxw__100 { max-width: 100% !important; }



.eccom-contents {
	padding-bottom: 60px;
}

.eccom-contents img {
	image-rendering: -webkit-optimize-contrast;
}

.l-table-contents__inner {
	padding: 0 40px 40px;
	background: #F2F2F2;
}

.l-table-contents__title {
	font-size: 22px;
	padding: 40px 0 0;
}

.l-table-contents__item {
	font-size: 16px;
	margin: 15px 0 0;
}

.l-table-contents__item a {
	text-decoration: underline;
	padding: 0 1.25em 0 0;
	display: inline-block;
	position: relative;
}

.l-table-contents__item a:hover {
	text-decoration: none;
}

.l-table-contents__item a:after {
	content: '';
	width: .5em;
	height: .5em;
	display: block;
	border-right: 2px solid #475C85;
	border-bottom: 2px solid #475C85;
	position: absolute;
	top: .25em;
	right: 0;
	transform: rotate(45deg);
}

.u-list_item {
	padding: 0 0 0 .75em;
	position: relative;
}

.u-list_item:after {
	content: '';
	width: .35em;
	height: .35em;
	display: block;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: .65em;
	left: 0;
}


.l-main-visual {
	margin-top: 0;
}

.l-main-visual__image {
	line-height: 1;
}

.l-main-visual-title {
	width: calc(100% - 80px);
	margin: -60px auto 0;
	padding: 0 20px;
	background: #fff;
	position: relative;
	z-index: 10;
}

.l-main-visual-title h1 {
	font-size: 44px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	padding: 40px 0 0;
}

.l-entry-data {
	margin: 20px 0 0;
	display: flex;
	justify-content: flex-end;
}

.l-entry-data time {
	font-size: 18px;
	line-height: 1;
}

.l-entry-data ul {
	margin: 0 0 0 6px;
	display: flex;
	transform: translate(0,-.275em);
}

.l-entry-data ul li {
	margin: 0 0 0 4px;
}

.l-entry-data ul li a {
	color: #fff;
	font-size: 13px;
	line-height: 1;
	padding: .5em 1.25em .75em;
	background: #475C85;
	border-radius: 10em;
}

.l-entry-data ul li a:hover {
	opacity: .9;
}

.l-pickup {
	margin-top: 160px;
}

.l-pickup__title {
	letter-spacing: .1em;
	text-align: center;
	padding: 40px 0 20px;
	background: #f2f2f2;
	border-radius: 8px;
	position: relative;
}

.l-pickup__title {
	letter-spacing: .1em;
	text-align: center;
	padding: 40px 0 20px;
	background: #f2f2f2;
	border-radius: 8px;
	position: relative;
}

.l-pickup__title:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 18px 15px 0 15px;
	border-color: #f2f2f2 transparent transparent transparent;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,100%);
}

.l-pickup__title span {
	font-size: 18px;
	line-height: 1;
	position: absolute;
	top: -3em;
	left: 50%;
	transform: translate(-50%,0);
}

.l-pickup__title span:after {
	content: attr(data-number)'';
	font-size: 64px;
	font-weight: 300;
	display: block;
}

.l-pickup__title em {
	font-size: 22px;
	font-weight: 500;
	margin: 0;
	display: block;
}

.l-pickup__title + * {
	margin-top: 50px !important;
}

.l-comparison__items {
	margin: 30px -10px 0;
}

.l-comparison__item {
	width: calc(50% - 20px);
	margin: 0 10px;
	padding: 18px;
	border: 1px solid #ccc;
	border-radius: 8px;
}

.l-comparison__item-title {
	height: 64px;
	background: #F1F1F1;
	border-radius: 8px;
	position: relative;
}

.l-comparison__item-title em {
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	width: 100%;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}

.l-comparison__inner {
	font-size: 18px;
	padding: 30px;
	border-bottom: 1px solid #e3e3e3;
}

.l-comparison__inner:last-child {
	border-bottom: 0;
}

.l-comparison__inner--1 {
	min-height: 8.35em;
}

.l-comparison__inner--2 {
	min-height: 13.35em;
}

.l-comparison__inner--3 {}

.l-comparison__inner--4 {
	min-height: 9em;
}

.l-comparison__inner--5 {}

.l-comparison__image {
	text-align: center;
	margin: 10px 0 0;
}

.l-comparison__image img {
	max-width: 310px;
}

.l-comparison__image figcaption {
	margin: 5px 0 0;
	display: block;
}

.l-comparison__sign img {
	max-width: 32px;
}

.l-ranking {
	margin: 130px 0 0;
	padding: 40px;
	border: 1px solid #ccc;
	border-radius: 8px;
	position: relative;
}

.l-ranking__number {
	color: #364563;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	padding: 0 .3em;
	background: #fff;
	position: absolute;
	top: 0;
	left: 30px;
	z-index: 10;
	transform: translate(0,-75%);
}

.l-ranking__number:before {
	content: 'No.';
}

.l-ranking__number:after {
	content: attr(data-number)'';
	font-size: 64px;
	font-weight: 500;
}

.l-ranking__image {
	width: 62%;
}

.l-product {
	margin: 130px 0 0;
	padding: 40px;
	border: 1px solid #ccc;
	border-radius: 8px;
	position: relative;
}

.l-product-data {
	padding: 0 0 30px;
}

.l-product-data-spec {
	width: calc(100% - 62%);
	padding: 0 0 0 30px;
}

.l-product-data-spec__name {
	font-size: 32px;
	line-height: 1.35;
	margin: 10px 0 0;
}

.l-product-data-spec__name--mini {
	font-size: 24px;
	line-height: 1.5;
}

.l-product-data-spec__price {
	margin: 35px 0 0;
}

.l-product-data-spec__price:after {
	content: '（税込）';
	margin: 0 0 0 -.25em;
	display: inline-block;
}

.l-product-data-spec__price em {
	font-size: 36px;
	line-height: 1;
	padding: 0 3px 0 0;
	display: inline-block;
}

.l-product-data-spec__price em small {
	font-size: 26px;
	margin: 0 .25em 0 0;
	display: inline-block;
}

.l-product-data-spec__button {
	margin: 15px 0 0;
}

.l-product-data-spec__button a {
	color: #fff;
	font-size: 15px;
	height: 53px;
	border-radius: 8px;
	display: block;
	background: #364563;
	position: relative;
	box-shadow: 0 5px 5px 0 rgba(0,0,0,.15);
}

.l-product-data-spec__button a:hover {
	opacity: .9;
}

.l-product-data-spec__button a em {
	padding: 0 0 0 15px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.l-product-data-spec__button a em:before {
	content: '';
	width: 20px;
	height: 20px;
	display: block;
	background: url("../../img/icon-cart-01.svg") no-repeat center / 100% auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-100%,-50%);
}

.l-product-data-spec__tag {
	letter-spacing: -.5em;
	width: calc(100% + 10px);
	margin: 20px 0 0 -10px;
}

.l-product-data-spec__tag li {
	font-size: 13px;
	letter-spacing: 0;
	margin: 8px 0 0 10px;
	padding: .25em 1em;
	border-radius: 4px;
	background: #E6E6E6;
	display: inline-block;
}

.l-ranking .u-table th {
	font-size: 12px;
	font-weight: 400;
}


.l-mark-design {
	margin: 60px 0 0;
}

.l-mark-design__items {
	margin: -32px -16px 0;
	display: flex;
	flex-wrap: wrap;
}

.l-mark-design__item {
	line-height: 1;
	width: calc(100% / 4 - 32px);
	margin: 32px 16px 0;
	padding: 10px;
	display: flex;
	align-items: center;
	border: 1px solid #E3E3E3;
	border-radius: 10em;
}

.l-mark-design__item figure {
	width: 40px;
	border-radius: 50%;
	overflow: hidden;
}

.l-mark-design__item em {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	width: calc(100% - 40px);
	padding: 0 .5em 0 0;
}

.l-mark-design__item small {
	font-size: 12px;
	margin: .5em 0 0;
	display: block;
}


.l-ranking .l-mark-design {
	margin-top: 30px;
}

.l-ranking .l-mark-design .u-title__mid {
	font-size: 19px;
}

.l-ranking .l-mark-design__item {
	width: calc(100% / 2 - 16px);
	margin: 12px 8px 0;
	padding: 6px;
}

.l-ranking .l-mark-design__item figure {
	width: 30px;
}

.l-ranking .l-mark-design__item em {
	font-size: 12px;
	width: calc(100% - 30px);
}

.l-ranking .l-mark-design__item small {
	font-size: 10px;
}