@charset "Shift_JIS";


/* 基本設定
====================================================================== */

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightbeige: #cbc1ae;
	--main-clr-white: #f4f5f0;
	--main-clr-gray: #7f7c7a;
	--main-clr-red: #d07157;
	--clr-ss-black: #48413b;
	--clr-ss-black-rgb: 72,65,59;

	--cate-yellow: #fcff94;
	--cate-yellow-rgb: 252,255,148;

	--cate-n-gray: #d9d8d0;
	--cate-n-gray-rgb: 217,216,208;

	--cate-n-greige: #cac2b9;
	--cate-n-greige-rgb: 202,194,185;
}
#c_1128 { 
	position: relative;
	width: 100%;
}
#c_1128 * {
	box-sizing: border-box;
}
#c_1128 img {
	width: 100%;
	height: auto;
}
#c_1128 .pc_none {
	display: none!important;
}
article#contents .inner_content { padding-top: 0;}


/* 看板
====================================================================== */

#c_1128 #kanban,
#c_1128 #kanban01 {
	position: relative;
	width: 100%;
}
#c_1128 #kanban h2 {
	position: relative;
	width: 100%;
}
#c_1128 #kanban02 h2 {
	position: relative;
	width: 100%;
	margin-bottom: 32px;
}


/* 共通
====================================================================== */

#c_1128 .section {
	position: relative;
	width: 100%;
	margin-bottom: 64px;
}
#c_1128 .section#cate01 { margin-bottom: 32px; }
#c_1128 .section > .inner {
	position: relative;
	width: 100%;
	padding: 0;
}

#c_1128 .heading_normal {
	position: relative;
	width: 100%;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0.75em;
	text-align: center;
}

#c_1128 .heading_baloon {
	position: relative;
	z-index: 10;
	width: 90%;
	display: block;
	margin: 0 auto 20px;
	background-color: var(--cate-yellow);
	border-radius: 16px;
	text-align: center;
	padding: 16px 0;
	animation: fuwafuwa 4.5s ease-in-out infinite alternate;
}
#c_1128 .heading_baloon::before {
	position: absolute;
	content: "";
	z-index: -1;
	left: 50%;
	bottom: -12px;
	background-color: var(--cate-yellow);
	height: calc(tan(60deg) * 20px / 2);
	width: 20px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
}

#c_1128 .heading_baloon h3,
#c_1128 .heading_baloon p {
	color: var(--clr-ss-black);
}
#c_1128 .heading_baloon h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
#c_1128 .heading_baloon h3 strong {
	color: var(--japandi-yellow)!important;
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
}
#c_1128 .heading_baloon p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	margin: 0.5em auto 0;
}

@keyframes fuwafuwa {
	0% { transform:translate(0, 0); }
	50% { transform:translate(0, -12px); }
	100% { transform:translate(0, 0); }
}


/* 汎用リスト
====================================================================== */

#c_1128 ul[class^="col_"] {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
	margin-bottom: 40px;
}
#c_1128 ul[class^="col_"] > li { position: relative; }
#c_1128 ul[class^="col_"] > li > a { display: block; }
#c_1128 ul[class^="col_"] > li:hover > a > img { opacity: 0.8; }

#c_1128 ul.col_1 > li { width: 100%; }
#c_1128 ul.col_2 > li { width: calc((100% - 20px*1)/2); }
#c_1128 ul.col_3 > li { width: calc((100% - 20px*2)/3); }



/* 動画
====================================================================== */

#c_1128 #movie {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}
#c_1128 #movie .inner_movie {
	position: relative;
	width: 100%;
}
#c_1128 #movie .inner_movie h3 {
	position: relative;
	width: 100%;
}

#c_1128 #movie .inner_movie > .im_right a.btn_modal {
	display: block;
	height: 400px;/**/
	width: auto;
}
#c_1128 #movie .inner_movie > .im_right a.btn_modal img {
	height: 100%;
	width: auto;
}

.modal { display: none; }
.modaal-container {
	overflow: hidden!important;
}
.modaal-content-container video {
    width: 100% !important;
    aspect-ratio: 9 / 16;
}
.modaal-content-container {
	padding: 0!important;
}



/* クーポン
====================================================================== */

#c_1128 #coupon {
	margin: 24px auto;
}
#c_1128 .inner_coupon {
	padding: 24px 40px;
	text-align: center;
	/* background-color: rgba(var(--cate-n-gray-rgb),0.25); */
	background-color: rgba(var(--cate-yellow-rgb),0.25);
	/* margin: 24px auto 0; */
}

#c_1128 .inner_coupon > p {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.75;
}
#c_1128 .inner_coupon > p.limit {
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	margin-top: 1em;
	text-align: center;
}

#c_1128 .inner_coupon > h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.75em;
}
#c_1128 .inner_coupon > h3 strong {
	font-size: 125%;
	font-weight: 700;
	line-height: 1;
}

#c_1128 .inner_coupon > h4 {
	position: relative;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5em;
}
#c_1128 .inner_coupon > h4::before,
#c_1128 .inner_coupon > h4::after {
	position: relative;
	content: "▼";
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
#c_1128 .inner_coupon > h4 span {
	font-size: 100%;
	font-weight: 700;
	line-height: 1;
}

#c_1128 .list_coupon {
	position: relative;
	width: 100%;
	max-width: 480px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin: 0 auto;
}
#c_1128 .list_coupon li { position: relative; }
#c_1128 .list_coupon li:nth-child(1) { width: 100%; }
#c_1128 .list_coupon li:nth-child(2),
#c_1128 .list_coupon li:nth-child(3) { width: calc((100% - 16px)/2); }
#c_1128 .list_coupon li a {
	position: relative;
	display: block;
}
#c_1128 .list_coupon li:hover a img { opacity: 0.8; }


#c_1128 .btn_entry {
	position: relative;
	width: 100%;
	margin: 12px auto 24px;
}
#c_1128 .btn_entry a {
	position: relative;
	display: block;
	max-width: 480px;
	margin: 0 auto;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--main-clr-red);
	border-radius: 100px;
	padding: 1em 0;
}
#c_1128 .btn_entry a::after {
	position: absolute;
	top: 50%;
	right: 10%;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg) translateY(-50%);
}

#c_1128 .btn_entry a:hover {
	background-color: var(--main-clr-lightbeige);
}

/* 商品
====================================================================== */

#c_1128 ul[class^="item_"] {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 28px 20px;
	z-index: 3;
}
#c_1128 ul[class^="item_"] > li { position: relative; }
#c_1128 ul[class^="item_"] > li > a { display: flex; }
#c_1128 ul[class^="item_"] > li:hover > a { opacity: 0.8; }

#c_1128 ul[class^="item_"] > li > a .buy_price,
#c_1128 ul[class^="item_"] > li > a .buy_price { line-height: 1; }
#c_1128 ul[class^="item_"] > li > a .buy_price > ol,
#c_1128 ul[class^="item_"] > li > a .buy_price > ul { margin: 0 auto; }
#c_1128 ul[class^="item_"] > li > a .buy_price > ol li,
#c_1128 ul[class^="item_"] > li > a .buy_price > ul li,
#c_1128 ul[class^="item_"] > li > a .buy_price > ol .price,
#c_1128 ul[class^="item_"] > li > a .buy_price > ul .price { color: var(--main-clr-red); }

#c_1128 .buy_price > ol .spesicalprice,
#c_1128 .buy_price > ul .spesicalprice,
#c_1128 .buy_price > ol .price+.intax,
#c_1128 .buy_price > ul .price+.intax { display: none; }


/* 個別設定 - 商品（メイン）*/
#c_1128 .item_main > li {
	width: calc((100% - 20px*1)/2);
	display: flex;
}
#c_1128 .item_main > li > a {
	position: relative;
	background-color: rgba(var(--cate-n-gray-rgb),0.25);
	flex-direction: column;
}
#c_1128 .item_main > li > a > div { width: 100%; }
#c_1128 .item_main > li > a .spec {
	padding: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
#c_1128 .item_main > li > a .pname {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

#c_1128 .item_main > li > a .buy_price > ol .price,
#c_1128 .item_main > li > a .buy_price > ul .price {
	font-size: 18px;
	font-weight: 700;
}

/**/
#c_1128 .item_main > li.w100,
#c_1128 .item_main > li.clm1 { width: 100%; }
#c_1128 .item_main > li.clm3 { width: 100%; }

/**/
#c_1128 .icon_min {
	position: absolute;
    z-index: 5;
    top: -8px;
    left: -8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
	color: var(--clr-ss-black);
    background-color: var(--cate-yellow);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.25;
    letter-spacing: 1px;
    text-indent: -1px;
}
#c_1128 .icon_min span,
#c_1128 .icon_min strong {
	color: var(--main-clr-red);
	font-weight: 700;
	font-style: normal;
	line-height: 1;
}
#c_1128 .icon_min span {
	font-size: 24px;
}
#c_1128 .icon_min strong {
	font-size: 200%;
	vertical-align: -2px;
}



/* シーン画像 - スライダー
====================================================================== */

#c_1128 .swiper-scene {
	position: relative;
	max-width: 1000px;
	margin: 40px auto 0;
}
#c_1128 .swiper-scene .swiper { padding-bottom: 40px; }
#c_1128 .swiper-scene .swiper-slide { width: 60%; opacity: 0.25;}
#c_1128 .swiper-scene .swiper-slide.swiper-slide-active { opacity: 1; }

#c_1128 .swiper-scene .swiper-slide a { display: block; }
#c_1128 .swiper-scene .swiper-slide a img {
	max-width: auto!important;
	max-width: initial!important;
}

#c_1128 .swiper-scene .swiper-button-next,
#c_1128 .swiper-scene .swiper-container-rtl .swiper-button-prev,
#c_1128 .swiper-scene .swiper-button-prev,
#c_1128 .swiper-scene .swiper-container-rtl .swiper-button-next {
	margin-top: auto;
}
#c_1128 .swiper-scene .swiper-pagination {
	width: 100%;
	text-align: center;
	height: 40px;
}
#c_1128 .swiper-scene .swiper-pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}
/* #c_1128 .swiper-scene .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--japandi-yellow);
} */


/* バナーエリア - スライダー
====================================================================== 

#c_1128 #banner {
	position: relative;
	border-top: solid 1px var(--main-clr-gray);
	padding-top: 40px;
	text-align: center;
}

#c_1128 #banner h3 {
	margin-bottom: 1em;
}
*/
