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

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

   2026新生活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;
	--clr-ss-red-light: #d07157;

	--clr-ss-black: #48413b;

	--nl-iv : #eae6da;
	--nl-iv-rgb : 234,230,218;

	--nl-pink: #fcdae8;
	--nl-pink-rgb: 253,218,232;

	--nl-blue: #cfecf5;
	--nl-blue-rgb: 207,236,245;

	--nl-purple: #fcdae8;
	--nl-purple-rgb: 233,221,239;
}


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

#new-life {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	color: var(--clr-ss-black);
	font-weight: 500;
	background-color: var(--nl-iv);
}



/* 価格プロ 共通設定
================================================== */

#new-life .buy_price,
#new-life .price { position: relative; }
#new-life .spesicalprice,
#new-life .intax { display: none; }

#new-life .buy_price { display: inline-block; width: auto; }
#new-life .buy_price::before,
#new-life .buy_price::after {
	position: absolute;
	display: inline-block;
	content: "";
}
#new-life .price,
#new-life .intax { color: var(--clr-ss-red-light)!important; }
#new-life .price { font-size: 20px; font-weight: 700; }

/* #new-life .wrap_price.price_tilde .price { display: inline!important; }
#new-life .wrap_price.price_tilde .price::after {
	display: inline;
	color: var(--clr-ss-red-light)!important;
	content: "〜";
} */


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

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

#new-life #kanban {
    position: relative;
    width: 100%;
    padding: 0px;
}
#new-life #kanban > h2 {
	position: relative;
	width: 100%;
}



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

#new-life .contentsarea {
	order: 2;
	position: relative;
	width: 560px;
	text-align: center;
	background-color: #fff;
	margin: 0 auto;
	box-shadow: 0px 0px 48px -5px #e0dac9;
}

#new-life .section {
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 2;
}
#new-life .section > .inner {
	position: relative;
	width: 100%;
	padding: 20px 40px 80px;
}

/* カテゴリ背景 */
#new-life .section#cate01::after {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 112%;/*仮*/
	display: inline-block;
	content: "";
	z-index: -1;
	background-color: rgba(var(--nl-iv-rgb),0.25);
	clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%);/*仮*/
}




/* 見出し
================================================== */

#new-life [class="heading_"] {
	width: 100%;
	margin-bottom: 16px;
}


/* カテゴリ大見出し - 画像 */
#new-life .heading_main {
	width: 100%;
	margin: 0 auto;
	padding: 0 40px;
}
#new-life .heading_main > img {
	width: auto;
	height: 100px;
}
#new-life #cate01 .heading_main { text-align: right; }
#new-life #cate02 .heading_main { text-align: left; }


/* カテゴリ小見出し - 画像 */
#new-life .heading_img {
	width: 100%;
	margin-bottom: 16px;
}
#new-life .heading_img > img {
	display: inline-block;
	width: auto;
	height: 40px;
}


/* カテゴリ小見出し - テキスト横 */
#new-life .heading_txt_y {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
#new-life .heading_txt_y > .heading_img {
	width: auto;
	/* text-align: left; */
}
#new-life .heading_txt_y > p {
	width: auto;
	/* text-align: right; */
}


/* カテゴリ小見出し - テキスト下 */
#new-life .heading_txt_v {
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto 20px;
}
#new-life .heading_txt_v > .heading_img {
	text-align: center;
	margin: 0 auto 4px;
}
#new-life .heading_txt_v > p {
	text-align: center;
}

/* その他汎用 */
#new-life .heading_cmn {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0.5em;
}



/* メニュー
================================================== */

#new-life #menu {
	position: relative;
	width: 100%;
	padding: 40px;
}

#new-life #menu > ul {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
#new-life #menu > ul > li {
	position: relative;
	width: calc((100% - 20px)/2);
}
#new-life #menu > ul > li > a {
	position: relative;
	display: block;
}

#new-life #menu > ul > li:hover > a {
	transform: translateY(10px);
	opacity: 0.75;
}


/* 動画エリア
================================================== */

#new-life .block_movie {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin: 0 auto 40px;
}
#new-life .gif_movie { width: 240px; }
#new-life .btnarea {
	flex: 1;
	padding-bottom: 24px;
}
#new-life #cate01 .btnarea { text-align: right; }
#new-life #cate02 .btnarea { text-align: left; }

#new-life #cate02 .gif_movie { order: 2 }


#new-life .btnarea .heading_img { margin-bottom: 12px; }

#new-life .btnarea p {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}
#new-life .btnarea p strong {
	font-size: 120%;
	font-weight: inherit;
	line-height: inherit;
}

#new-life .btn_movie {
	position: relative;
	margin-top: 24px;
}
#new-life .btn_movie li {
	position: relative;
	width: 100%;
}
#new-life .btn_movie li:nth-child(n+2) { margin-top: 8px; }
#new-life .btn_movie li a {
	position: relative;
	width: 100%;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	border: solid 1px var(--clr-ss-black);
	background: #FFFFFF;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(250, 249, 246, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
	border-radius: 8px;
}
#new-life .btn_movie li a i {
	margin-right: 8px;
}
#new-life .btn_movie li a i img {
	width: 36px!important;
	vertical-align: middle!important;
}
#new-life .btn_movie li a strong {
	font-size: 110%;
	font-weight: inherit;
	line-height: inherit;
}
#new-life .btn_movie li:hover a {
	opacity: 0.75;
}


/* レイアウト
================================================== */

#new-life .block_layout {
	position: relative;
	width: 100%;
	margin: 0 auto 40px;
	display: none;/* ★★★一旦非表示★★★ */
}

/* 余裕あったらモーダル */
#new-life .modal {
	position: relative;
	width: 100%;
}
#new-life .modal a {
	pointer-events: none;
}


/* 商品ブロック
================================================== */

#new-life .item_wide {
	position: relative;
	width: 100%;
}
#new-life .item_wide a {
	display: block;
}
#new-life .item_wide a .pict {
	position: relative;
}
#new-life .item_wide a .pict img {
	margin:  auto;
}
#new-life .item_wide a .spec {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}
#new-life .item_wide a .spec .pname {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

#new-life .item_list {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 80px;
}
#new-life .item_list li {
	position: relative;
	width: calc((100% - 10px)/2);
}
#new-life .item_list li:nth-child(2n) { transform: translate(0,64px);}

#new-life .item_list li a {
	position: relative;
	display: block;
	width: 100%;
	padding: 0 0 8px;
}
#new-life .item_list li a .pict,
#new-life .item_list li a .spec {
	position: relative;
	width: 100%;
}
#new-life .item_list li a .spec .pname {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
}

#new-life #cate01 .item_list li:hover a { background-color: rgba(var(--nl-pink-rgb),0.4) ; }
#new-life #cate02 .item_list li:hover a { background-color: rgba(var(--nl-blue-rgb),0.4) ; }


/* やじるしアイコン */
#new-life .item_wide a .pict::after,
#new-life .item_list li a .pict::after {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-block;
	content: "";
	width: 40px;
	height: 40px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 40px auto;
	transition: all 0.2s;
}
#new-life .item_wide a .pict::after { background-image: url(/IMAGE/new-life/arr01.gif); }
#new-life .item_list li a .pict::after { background-image: url(/IMAGE/new-life/arr_g.gif); }
#new-life .item_wide a:hover .pict::after,
#new-life .item_list li:hover a .pict::after {
	right: -8px;
	transition: all 0.2s;
}




/* 金額合計エリア */
#new-life .price-group {
	margin: 0 auto 40px;
}

#new-life .price_total {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: first baseline;
	gap: 8px;
	border-top: solid 1px var(--clr-ss-black);
	margin: 24px auto 40px;
	padding: 8px 0 0;
}
#new-life .price_total dt {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}
#new-life .price_total dd span {
	color: var(--clr-ss-red-light);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}



/* カテゴリへの誘導ボタン
================================================== */

#new-life .btn_cmn {
	position: relative;
	width: 100%;
	margin: 40px auto 0;
}
#new-life .btn_cmn a {
	position: relative;
	width: 100%;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--clr-ss-black);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	border-radius: 100px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--clr-ss-black);
	background: #fff;
	background: linear-gradient(0deg, rgba(207, 236, 245, 0.8) 0%, rgba(233, 221, 239, 0.8) 50%, rgba(253, 218, 232, 0.8) 100%);
}
#new-life .btn_cmn a::after {
	position: absolute;
	top: 50%;
	right: 24px;
	width: 24px;
	height: 24px;
	display: inline-block;
	content: "";
	background: transparent url(/IMAGE/new-life/arr01.gif) no-repeat center center / 22px auto;
	transform: translate(0,-50%);
}
#new-life .btn_cmn a strong {
	color: inherit;
	font-size: 120%;
	font-weight: inherit;
	line-height: inherit;
	margin-right: 0.25em;
}


#new-life .btn_cmn a:hover {
	/* border-color: transparent; */
	/* background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(250, 249, 246, 0) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255,0) 100%); */

	background: #FFFFFF;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(250, 249, 246, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
/* #new-life #cate01 .btn_cmn a:hover { background-color: var(--nl-pink); }
#new-life #cate02 .btn_cmn a:hover { background-color: var(--nl-blue); } */
/* #new-life .btn_cmn a:hover::after { transform: translate(10px,-50%) } */


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

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



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

#new-life .pc_left {
	order: 1;
}
#new-life .pc_left h2 {
	position: relative;
	text-align: center;
}
#new-life .pc_left h2 img {
	width: 210px;
	height: 80px;
	margin-bottom: 20px;
}

#new-life .pc_left nav > ul {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
}
#new-life .pc_left nav > ul > li {
	position: relative;
	display: flex;
	transition: all 0.2s;
}
#new-life .pc_left nav > ul > li:nth-child(1) { transform: rotate(2deg); }
#new-life .pc_left nav > ul > li:nth-child(2) { transform: translateY(16px) rotate(-2deg); }

#new-life .pc_left nav > ul > li > a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}
#new-life .pc_left nav > ul > li > a::after {
	position: absolute;
	right: 14px;
	bottom: 74px;
	display: inline-block;
	content: "";
	width: 32px;
	height: 32px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 32px auto;
	transition: all 0.2s;
}
#new-life .pc_left nav > ul > li > a::after {
	background-image: url(/IMAGE/new-life/arr_g.gif);
}
#new-life .pc_left nav > ul > li:hover {
	transform: rotate(0) scale(1.1,1.1);
	transition: all 0.2s;
}
#new-life .pc_left nav > ul > li:hover > a::after {
	right: 4px;
	transition: all 0.2s;
}




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

#new-life .pc_right {
	order: 3;
	background: url(/IMAGE/new-life/bg.jpg) no-repeat center center;
	background-size: cover;
}

#new-life .pc_right h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0.5em;
}


/* おすすめ特集 */
#new-life .list_bn {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

/* バナーが1つの場合 */
#new-life .list_bn > li { width: 100%; }

/* バナーが2つの場合 */
#new-life .list_bn:has(> :nth-child(2)) > li { width: calc((100% - 8px*1)/2); }

/* バナーが3つの場合 */
#new-life .list_bn:has(> :nth-child(3)) > li { width: calc((100% - 8px*2)/3); }

/* バナーが4つ以上の場合 */
#new-life .list_bn:has(> :nth-child(n+4)) > li { width: calc((100% - 8px*1)/2); }


@media screen and (max-width:1024px) {
	#new-life .pc_left,
	#new-life .pc_right {
		display: none;
	}
}


/* ==================================================
   スマホ側メニュー ※PC非表示
================================================== */

#fixed_menu { display: none!important; }



/* ==================================================
   クーポンエリア　※未使用
================================================== */

#new-life .coupon {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 40px;
}
#new-life .coupon li:hover a {
	opacity: 0.8;
}


/* ==================================================
   汎用アニメーション
================================================== */
#new-life .fadein {
	opacity: 0;
}
#new-life .fadein.is-animated {
	animation: fadeIn 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s 1 normal forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}