@charset "shift_jis";
/* CSS Document */

/* ==================================================

   Vlog LP

================================================== */

/* コンテンツ幅リセット */
main#wrapper {
	position: relative;
	width: 100%!important;
	max-width: initial!important;
	max-width: auto!important;
	margin: 0 auto!important;
	padding: 0!important;
	overflow: visible!important;
}
article#contents { padding-bottom: 0!important; }
article#contents .inner_content { padding-top: 0!important; }

: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-line: #00b900;

	--vlogw-pink: #efdbd5;
	--vlogw-pink-rgb: 239,219,213;

	--vlogw-yellow: #eadaba;
	--vlogw-yellow-rgb: 234,218,186;

	--vlogw-green: #c6d0d1;
	--vlogw-green-rgb: 198,208,209;

	--vlogw-blue: #bec6d2;
	--vlogw-blue-rgb: 190,198,210;
}


.cmn_vlog a,
.cmn_vlog a:hover {
	color: var(--clr-ss-black);
	text-decoration: none;
	transition: all 0.2s;
}
.cmn_vlog * { box-sizing: border-box; }
.cmn_vlog h1,
.cmn_vlog h2,
.cmn_vlog h3,
.cmn_vlog h4,
.cmn_vlog h5 { color: var(--clr-ss-black);}
.cmn_vlog img { width: 100%; height: auto; }
.cmn_vlog .pc_none { display: none; }

.cmn_vlog {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	background-color: var(--main-clr-white);
}

.cmn_vlog a img,
.cmn_vlog a:hover img {
	transition: all 0.2s;
}
.cmn_vlog a:hover img {
	opacity: 0.8;
}
.cmn_vlog a,
.cmn_vlog a:hover {
	transition: all 0.2s;
}



/* ==================================================
   メインコンテンツエリア
================================================== */

/* 看板
================================================== */

.cmn_vlog #kanban {
    position: relative;
    width: 100%;
	margin-bottom: 40px;
}
.cmn_vlog #kanban h1 {
	position: relative;
	width: 100%;
	/* color: #fff;
	background-color: var(--main-clr-lightbeige); */
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	/* padding: 0.5em 0; */
	margin-bottom: 20px;
}

/* メニュー */
.cmn_vlog #kanban #menu {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
.cmn_vlog #kanban #menu ul {
	position: relative;
	width: calc(100% - 20px*2);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 32px;
}
.cmn_vlog #kanban #menu ul li {
	position: relative;
	width: calc((100% - 10px*3)/4);
	display: flex;
}
.cmn_vlog #kanban #menu ul li a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 260px;
	border-radius: 8px;
	overflow: hidden;
	/**/
	background-color: #ccc;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
}
.cmn_vlog #kanban #menu ul li.c_bg01 a { background-image: url(/IMAGE/vlog_winter/mt_7303155s.jpg);}
.cmn_vlog #kanban #menu ul li.c_bg02 a { background-image: url(/IMAGE/vlog_winter/mt_7303164s.jpg);}
.cmn_vlog #kanban #menu ul li.c_bg03 a { background-image: url(/IMAGE/vlog_winter/mt_7303160s.jpg);}
.cmn_vlog #kanban #menu ul li.c_bg04 a { background-image: url(/IMAGE/vlog_winter/mt_7303168s.jpg);}


.cmn_vlog #kanban #menu ul li a,
.cmn_vlog #kanban #menu ul li a span,
.cmn_vlog #kanban #menu ul li a strong {
	color: #fff;
	line-height: 1;
	font-weight: 700;
}
.cmn_vlog #kanban #menu ul li a { font-size: 17px; }
.cmn_vlog #kanban #menu ul li a span { font-size: 100%;  }
.cmn_vlog #kanban #menu ul li a strong { font-size: 120%; font-size: 18px; margin: 0.25em auto; line-height: 1.45; }

.cmn_vlog #kanban #menu ul li a::before,
.cmn_vlog #kanban #menu ul li a::after {
	position: absolute;
	z-index: 2;
	display: inline-block;
}
.cmn_vlog #kanban #menu ul li a::before {
	top: 8px;
	left: -2px;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	font-style: italic;
	letter-spacing: 1px;
	content: attr(data-num);
	opacity: 0.75;
}
.cmn_vlog #kanban #menu ul li a::after {
	right: 8px;
	bottom: 8px;
	content: "";
	width: 32px;
	height: 32px;
	background: url(/IMAGE/vlog_winter/arr.gif) no-repeat center center;
	background-size: 30px 30px;
	transform: rotate(90deg);
}


/* コンテンツ幅・セクション
================================================== */

.cmn_vlog .contentsarea {
	/* order: 2; */
	position: relative;
	width: 100%;
	max-width: 900px;
	text-align: center;
	color: var(--clr-ss-black);
	background-color: var(--main-clr-white);
	box-shadow: 0px 0px 32px 0px rgba(48, 58, 72, 0.25);
	margin: 0 auto;
}

.cmn_vlog .block {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 32px 0;
	overflow: hidden;
}
.cmn_vlog .block::before {
	position: absolute;
	z-index: -1;
	display: inline-block;
	top: -16px;
	left: -8px;
	color: #fff;
	font-size: 100px;
	line-height: 1;
	font-style: italic;
	letter-spacing: 1px;
	content: attr(data-num);
	opacity: 0.5;
}
.cmn_vlog .block#cate01 { background-color: rgba(var(--vlogw-pink-rgb),0.75); }
.cmn_vlog .block#cate02 { background-color: rgba(var(--vlogw-yellow-rgb),0.75); }
.cmn_vlog .block#cate03 { background-color: rgba(var(--vlogw-green-rgb),0.75); }
.cmn_vlog .block#cate04 { background-color: rgba(var(--vlogw-blue-rgb),0.75); }

.cmn_vlog .block > .inner {
	position: relative;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
}

.cmn_vlog .heading_cmn {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 0.5em;
}




/* ブロックごとの設定
================================================== */

.cmn_vlog .heading_cate {
	position: relative;
	width: 100%;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0.5em;
}
.cmn_vlog .heading_cate > strong {
	font-size: 110%;
	font-weight: 700;
}

.cmn_vlog .heading_sub {
	position: relative;
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0.5em;
}

.cmn_vlog .block_set {
	position: relative;
	width: 100%;
	max-width: 680px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	margin: 0 auto 32px;
}
.cmn_vlog .block_set .movie { width: 200px; }
.cmn_vlog .block_set .item {
	position: relative;
	z-index: 2;
	width: 440px;
	padding: 20px;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 16px;
}
.cmn_vlog .block_set .item::after {
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	display: inline-block;
	content: "";
	width: 20px;
	height: 20px;
	background-color: #fff;
	transform: rotate(45deg) translateX(-50%);
}

/* セット品 */
.cmn_vlog .block_item {
	position: relative;
	width: 100%;
}
.cmn_vlog .block_item > a {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}
.cmn_vlog .block_item .thumb { width: 160px;}
.cmn_vlog .block_item .spec { width: calc(100% - 170px); }
.cmn_vlog .block_item .spec .setname {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
.cmn_vlog .block_item > a > .spec > .buy_price ul {
	margin: 4px auto 0;
}
.cmn_vlog .block_item > a > .spec > .buy_price .price {
	color: var(--clr-ss-black)!important;
	font-weight: normal!important;
}

/**/
.cmn_vlog .block_item .txt_set {
	position: relative;
	width: auto;
	font-size: 12px;
	font-weight: 700;
}
.cmn_vlog .block_item .txt_set::before,
.cmn_vlog .block_item .txt_set::after {
	position: relative;
	content: "";
	display: inline-block;
	vertical-align: -2px;
	width: 1px;
	height: 13px;
	background-color: var(--clr-ss-black);
	margin: 0 0.5em;
}
.cmn_vlog .block_item .txt_set::before { transform: rotate(-15deg); }
.cmn_vlog .block_item .txt_set::after { transform: rotate(15deg); }

#cate01 .block_item .txt_set { color: #d09786; }
#cate01 .block_item .txt_set::before,
#cate01 .block_item .txt_set::after { background-color: #d09786; }

#cate02 .block_item .txt_set { color: #be8f32; }
#cate02 .block_item .txt_set::before,
#cate02 .block_item .txt_set::after { background-color: #be8f32; }

#cate03 .block_item .txt_set { color: #496c77; }
#cate03 .block_item .txt_set::before,
#cate03 .block_item .txt_set::after { background-color: #496c77; }

#cate04 .block_item .txt_set { color: #404b5b; }
#cate04 .block_item .txt_set::before,
#cate04 .block_item .txt_set::after { background-color: #404b5b; }



/* クーポン適用価格（手打ち）*/
.cmn_vlog .price_cpn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
}
.cmn_vlog .price_cpn > p {
	display: inline-block;
	width: auto;
	color: var(--main-clr-red);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	border: solid 2px var(--main-clr-red);
	padding: 4px;
}
.cmn_vlog .price_cpn .buy_price,
.cmn_vlog .price_cpn .buy_price > ul {
	margin: 0!important;
	text-align: center;
}
.cmn_vlog .price_cpn .buy_price .price {
	color: var(--main-clr-red);
	font-size: 34px;
	line-height: 1;
}

/* 詳細はこちらボタン */
.cmn_vlog .btn {
	position: relative;
	width: 90%;
	margin: 8px auto 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--main-clr-lightbeige);
	padding: 0.5em 0;
	border-radius: 100px;
	transition: all 0.2s;
}
.cmn_vlog a:hover .btn {
	background-color: var(--main-clr-red);
	transition: all 0.2s;
}
.cmn_vlog .btn::after {
	position: absolute;
	top: 50%;
	right: 10%;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	transform: rotate(45deg) translateY(-50%);
}


/* 単品購入 */
.cmn_vlog .list_item {
	position: relative;
	width: 100%;
	max-width: 640px;
	display: flex;
	justify-content: flex-start;
	gap: 10px;
	margin: 0 auto;
}
.cmn_vlog .list_item > li {
	position: relative;
	width: calc((100% - 10px*2)/3);
}
.cmn_vlog .list_item > li a {
	display: block;
}
.cmn_vlog .list_item > li a:hover {
	opacity: 0.8;
}

.cmn_vlog .list_item > li a .thumb {
	position: relative;
	width: 100%;
	margin-bottom: 8px;
}
.cmn_vlog .list_item > li a .spec {
	position: relative;
	width: 100%;
}
.cmn_vlog .list_item > li a .spec .pname {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}
.cmn_vlog .list_item > li a .spec .buy_price ul {
	margin: 4px auto 0!important;
}
.cmn_vlog .list_item > li a .spec .buy_price ul .price {
	color: var(--main-clr-red);
	font-size: 18px;
}

/* 価格共通 */
.cmn_vlog .spesicalprice,
.cmn_vlog .intax { display: none!important; }


/* LINEクーポン */
.cmn_vlog .cpn_line {
	position: relative;
	width: 100%;
	border-top: dashed 1px #ccc;
	margin-top: 12px;
	padding-top: 12px;
}
.cmn_vlog .cpn_line .title_line {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}


/* スマホ固定ナビ
================================================== */

.cmn_vlog .smp_fixed_nav { display: none!important; }





/* 汎用リスト
================================================== */

.cmn_vlog ul[class^="col_"] {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	padding: 0 20px;
	box-sizing: border-box;
}
.cmn_vlog ul[class^="col_"] li {
	position: relative;
}
.cmn_vlog ul[class^="col_"] li a {
	position: relative;
	display: block;
	width: 100%;
}
.cmn_vlog ul[class^="col_"] li a img {
	width: 100%;
	height: auto;
}
.cmn_vlog ul[class^="col_"] li:hover a img {
	opacity: 0.8;
}

.cmn_vlog ul.col_1 li { width: 100%; }
.cmn_vlog ul.col_2 li { width: calc((100% - 8px*1)/2); }
.cmn_vlog ul.col_3 li { width: calc((100% - 8px*2)/3); }

.cmn_vlog ul[class^="col_"] li p {
	font-size: 16px;
	font-weight: 700;
}

/* ==================================================
   PC左側 / PC右側
================================================== */

.cmn_vlog .pc_left,
.cmn_vlog .pc_right {
	position: sticky;
	width: calc((100% - 900px)/2);
	/*top: 0;
	height: 100vh;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.cmn_vlog .pc_left > .inner,
.cmn_vlog .pc_right > .inner {
	text-align: center;
	padding: 0 4%;
}


/*  PC用 左側
================================================== */

.cmn_vlog .pc_left {
	order: 1;
}



/*  PC用 右側
================================================== */

.cmn_vlog .pc_right {
    order: 3;
}



.cmn_vlog .gototop {
	position: fixed;
	z-index: 100;
	right: 20px;
	bottom: 20px;
}
.cmn_vlog .gototop a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 120px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--main-clr-gray);
	border-radius: 50%;
}
.cmn_vlog .gototop a:hover {
	background-color: var(--main-clr-red);
}