@charset "utf-8";

/* ------------------------------
 メインイメージ（PC）
------------------------------ */
.mainimg {
	margin-bottom: 100px;
}
@media print, screen and (min-width: 768px) {
	.mainimg img.pc {
		border-radius: 5px;
	}
}
/* ------------------------------
 メインイメージ（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.mainimg {
		margin-bottom: 40px;
	}
}

/* ------------------------------
 製品（PC）
------------------------------ */
.bbox {
	position: relative;
	margin-bottom: 48px;
	padding-bottom: 35px;
	border-radius: 10px;
	background-color: #fff;
	line-height: 1.3;
}
.bbox::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 18px;
	left: -10px;
	width: 80px;
	height: 57px;
	background: url(../img/ribbon.svg) no-repeat 0 0 / cover;
}
.bbox .photo-main {
	margin-bottom: 35px;
}
.bbox .photo-main img {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.bbox .text-block {
	padding: 0 23px;
	text-align: left;
}
.bbox a {
	display: block;
	color: #000;
	text-decoration: none;
}
.bbox .text-block > a {
	margin-bottom: 25px;
}
.bbox .cateText {
	color: #4d4d4d;
	margin-bottom: 4px;
	font-size: 1.6rem;
}
.bbox .icon-arrow {
	font-size: 2.4rem;
	font-weight: bold;
}
.bbox a p br {
	display: none;
}
.gray-border {
	margin-bottom: 30px;
	padding-bottom: 25px;
	border-bottom: 1px dotted #bdccd4;
}
.icon-block ul {
	display: flex;
	align-items: center;
	column-gap: 9px;
}
.icon-block ul li {
	width: 53px;
}
.price-block {
	line-height: 1.2;
	font-size: 1.4rem;
    padding-top: 5px;
    margin-right: 10px;
    float: left;
}
.lth {
	text-decoration:line-through;
}
p.lth  span{
	text-decoration:none;
}

@media print, screen and (min-width: 768px) {
	.icon-block {
		width: 70%;
	}
}
/* ------------------------------
 製品（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.contentsHome {
		padding-top: 81px;
	}
	.bbox {
		float: none;
		width: 100%;
		max-width: 468px;
		margin: 0 auto 20px;
		padding-bottom: 20px;
		border-radius: 6px;
	}
	.bbox::before {
		top: 11px;
		left: -6px;
		width: 67px;
		height: 48px;
	}
	.bbox .photo-main {
		margin-bottom: 20px;
	}
	.bbox .photo-main img {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.bbox .text-block > a {
		margin-bottom: 20px;
	}
	.bbox .icon-arrow {
		font-size: 2.4rem;
	}
	.icon-block {
		margin-bottom: 20px;
	}
	.icon-block ul {
		column-gap: 6px;
	}
	.icon-block ul li {
		width: calc(calc(100% - 24px) / 5);
	}
	.price-block p {
		display: inline-block;
		font-size: 1.4rem;
	}
	.price-block .f20 {
		font-size: 2rem !important;
	}
	.price-block .f28 {
		font-size: 2.8rem !important;
	}
	.price-block {
    	float: none;
	}
}

/* ------------------------------
 名入れ対応製品（PC）
------------------------------ */
.whitebg {
	padding: 50px 0;
	background-color: #fff;
}
.recommend {
	position: relative;
	margin-bottom: 40px;
}
.recommend .character {
	position: absolute;
	top: 9px;
	right: 4px;
	width: 242px;
}
.bannerList {
	display: none;
	margin-left: -18px;
	margin-right: -18px;
}
.bannerList.slick-initialized {
	display: block; /* slick-initializedが付与されたら表示 */
}
.bannerList .listBox {
	position: relative;
	width: 242px;
	text-align: left;
}
.bannerList .listBox a {
	display: block;
	overflow: hidden;
	border-radius: 7px;
	background-color: #fff;
	text-decoration: none;
	transition: .1s ease-in-out;
}
.bannerList .imgBox {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	height: 145px;
}
.bannerList .imgBox img {
	border-radius: 7px 7px 0 0;
}
.bannerList .redBox {
	display: flex;
	align-items: center;
	position: relative;
	bottom: 0;
	width: 100%;
	height: 55px;
	padding-left: 15px;
	background-color: #f74d41;
	color: #fff;
	font-weight: bold;
}
.bannerList .redBox::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 17px;
	right: 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff url(../img/icon_arrow_r_r.svg) no-repeat 8px 6px / 5px 7px;
}
@media print, screen and (min-width: 768px) {
	.bannerList .listBox {
		margin: 0 18px;
	}
}
/* slick Arrows */
.bannerList .slick-prev,
.bannerList .slick-next {
	position: absolute;
	top: 50%;
	width: 23px;
	height: 42px;
	margin-top: -21px;
	z-index: 10;
	background-size: cover;
}
.bannerList .slick-prev {
    left: -2%;
}
[dir='rtl'] .bannerList .slick-prev {
    right: -2%;
}
.bannerList .slick-next {
    right: -2%;
}
[dir='rtl'] .bannerList .slick-next {
    left: -2%;
}
/* ------------------------------
 名入れ対応製品（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.recommend .character {
		width: 180px;
		position: static;
		margin-left: auto;
		margin-right: auto;
	}
	.bannerList {
		margin-left: 0;
		margin-right: 0;
		padding: 0 8%;
	}
	.bannerList .listBox {
		width: 100%;
	}
	/* Arrows */
	.bannerList .slick-prev,
	.bannerList .slick-next {
		width: 17px;
		height: 32px;
		margin-top: -16px;
		background-size: cover;
	}
	.bannerList .slick-prev {
		left: 0%;
	}
	[dir='rtl'] .bannerList .slick-prev {
		right: 0%;
	}
	.bannerList .slick-next {
		right: 0%;
	}
	[dir='rtl'] .bannerList .slick-next {
		left: 0%;
	}
}

/* ------------------------------
 グレー背景（PC）
------------------------------ */
.graybg {
	background-color: #eaefef;
	padding: 50px 0;
}
/* ------------------------------
 グレー背景（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.graybg {
		padding: 30px 0;
	}
}

/* ------------------------------
 ご要望に応える！名入れサービス（PC）
------------------------------ */
.wbox {
	margin-bottom: 20px;
	padding: 30px 34px;
	border-radius: 7px;
	box-sizing: border-box;
	background-color: #fff;
	text-align: left;
}
.box-title {
	margin-bottom: 10px;
	font-size: 2.7rem;
	font-weight: bold;
}
.wbox a {
	color: #000;
	text-decoration: none;
}
.sbox {
	float: left;
	width: 148px;
	margin-right: 17px;
}
.sbox:nth-child(3n) {
	margin-right: 0;
}
.sbox img {
	margin-bottom: 5px;
	border-radius: 5px;
}
.sbox p {
	font-weight: bold;
	text-align: center;
}
/* ------------------------------
 ご要望に応える！名入れサービス（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.wbox {
		float: none;
		width: 100%;
		height: auto !important;
		max-width: 468px;
		margin: 0 auto 20px;
		padding: 15px 20px 20px;
	}
	.box-title {
		font-size: 1.8rem;
	}
	.sbox {
		width: calc((100% - 10px) /3);
		margin-right: 5px;
		float: left;
	}
	.sbox:nth-child(3n) {
		margin-right: 0;
	}
	.sbox img {
		width: 100%;
	}
}

/* ------------------------------
 お知らせ（PC）
------------------------------ */
/* スクロールバー */
.newsBlock .scroll_area {
	height: 135px;
	overflow: hidden;
}
.scroll_area .mCSB_scrollTools .mCSB_draggerRail {
	width: 10px;
	border-radius: 0;
	background: #eaefef;
}
.scroll_area .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.scroll_area .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.scroll_area .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.scroll_area .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
	width: 10px;
	border-radius: 0;
	background: #59818e;
}
/* お知らせ一覧 */
.scroll_area li {
	display: flex;
	align-items: flex-start;
	padding: 9px 0;
	border-bottom: 1px dotted #bdccd4;
	font-size: 1.6rem;
}
.scroll_area li span {
	width: 110px;
	color: #59818e;
}
.scroll_area li p {
	width: calc(100% - 110px);
	font-size: 1.6rem;
}
.scroll_area li a {
	text-decoration: none;
}
/* ------------------------------
 お知らせ（SP）
------------------------------ */
@media only screen and (max-width: 767px) {
}
@media screen and (max-width: 479px) {
	/* お知らせ一覧 */
	.scroll_area li {
		display: block;
	}
	.scroll_area li span {
		width: 100%;
	}
	.scroll_area li p {
		width: 100%;
	}
}