@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');
@media (max-width: 1000px) {
 .result_suggest_title .result_suggest_list { margin: 0 -1.5rem!important; }
}
.search_feature.active, 
.search_styling.active, 
.result_suggest	{ background-color: #fff; position: relative; z-index: 2; }
search_box	{ z-index: 3; }
.header_caution { height: 48px; }
#contents { width: 100%!important; max-width: 100%!important; padding: 0; margin: 0; }
#pisss { width: 100%!important; max-width: 100%!important; }
#pi { width: 100%!important; max-width: 100%!important; margin: 0; background-color: transparent!important; padding: 0; }
#pi > img { display: none!important; }
@media (min-width: 768px)	{
	.result_suggest_title .result_suggest_list { margin: 0 -1.5rem 0; }
}
.section_main, 
.seach_sort_wrapper,
.search_contents,
.bread	{ background-color: #fff; }
.seach_sort_wrapper,
.search_contents,
.bread,
.store_footer	{ position: relative; z-index: 2; }
.result_suggest	{ margin: 0; }
.pi_description	{ padding: 0!important; background-color: #fff; }
.pi_lgzformat	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 0; margin: 0; letter-spacing:0; position: relative; }
.pi_lgzformat div	{ letter-spacing:0; }
.pi_lgzformat *	{ letter-spacing:0; font-family: "Roboto", "Noto Sans JP", sans-serif; font-weight: 400; font-style: normal; font-size:14px; line-height:1.75; -webkit-text-size-adjust:100%; color:#000000; -webkit-font-smoothing: antialiased; }
.pi_lgzformat img, 
.pi_lgzformat picture	{ width: 100%; vertical-align: bottom; line-height: 1;  }
.pi_lgzformat ul:before,
.pi_lgzformat ol:before,
.pi_lgzformat dl:before, 
.pi_lgzformat ul:after, 
.pi_lgzformat ol:after, 
.pi_lgzformat dl:after	{ display: none!important; }
.pi_lgzformat img	{ width: 100%; vertical-align: bottom; line-height: 0; }
.pi_lgzformat .small {font-size:80%;}
.pi_lgzformat .center-text	{ text-align: center; }
.pi_lgzformat_inner	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #ffffff; z-index: 2; }

.contanc	{ width: 100%; height: 0px; transform: translateY(-48px); }

/* ------------ ANIMATION ------------- */
.scrollIn	{ opacity: 0; transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1); }
.scrollIn.active	{ opacity: 1; transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transition-delay: .3s; transition-delay: .3s; }

/* ------------ MAIN AREA ------------- */
.mainimg_wrapper	{ width: 100%; line-height: 1; position: relative; display: -webkit-flex; display: flex; align-items: center; justify-content: center; margin: 0 0 160px; }

/* 
.mainimg_wrapper > h1	{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 10%; z-index: 2; list-style: none; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mainimg_wrapper > h1 > b,
.mainimg_wrapper > h1 > strong	{ color:#fff; transition:2s cubic-bezier(.12,.51,.55,.94); opacity: 0; transform: translateY(10px);  white-space: nowrap; }
.mainimg_wrapper > h1 > b	{ font-size: 3vw; line-height: 1.2; font-weight: 500; letter-spacing:.01em; text-align: left; }
.mainimg_wrapper > h1 > strong	{ font-size: 6vw; line-height: 1.2; font-weight: 700; letter-spacing:0; text-align: left; }
 */

.mainimg_wrapper > h1	{ display: -webkit-flex; display: flex; flex-direction: column; gap: 20px; width: 22%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 10%; z-index: 2; list-style: none; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mainimg_wrapper > h1 > b,
.mainimg_wrapper > h1 > strong	{ width: 100%; line-height: 1; transition:2s cubic-bezier(.12,.51,.55,.94); opacity: 0; transform: translateY(10px);  white-space: nowrap; }

.mainimg_wrapper > h1.active > b,
.mainimg_wrapper > h1.active > strong	{ opacity: 1; -webkit-transition-delay: .6s; transition-delay: .6s; transform: translateY(0); }
.mainimg_wrapper > h1.active > b	{ transition-delay: .1s; }
.mainimg_wrapper > h1.active > strong	{ transition-delay: .5s; }
.mainimg_wrapper > h1.active > strong	{ transition-delay: .9s; }
@media screen and (max-width: 1200px) {
	.mainimg_wrapper	{ margin: 0 0 60px; }
}
@media (max-width: 767px) {
/* 
	.mainimg_wrapper > h1	{ position: absolute; top: 23%; left: 50%; transform: translate(-50%,-50%); }
	.mainimg_wrapper > h1 > b	{ font-size: 7vw; }
	.mainimg_wrapper > h1 > strong	{ font-size: 14vw; }
 */
	.mainimg_wrapper > h1	{ gap: 10px; width: 40%; position: absolute; top: 23%; left: 50%; transform: translate(-50%,-50%); }
}

/* ------------ INTRODUCTION ------------- */
.introduction	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10%; margin: 0 0 160px; background-color: #fff; }
.introinner	{ width: 100%; max-width: 1200px; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: space-between; }
.introinner > h2	{ width: 40%; font-size: clamp(21px, 34px, 2.2vw); font-weight: 500; line-height: 1.8em; letter-spacing:.1em; }
.introinner > p	{ width: 58%; font-size: 17px; line-height: 2; font-weight: 400; letter-spacing:.1em; padding: .4em 0 0; }
@media screen and (max-width: 1200px) {
	.introduction	{ padding: 0 10%; margin: 0 0 60px; }
	.introinner	{ flex-wrap: wrap; }
	.introinner > h2	{ width: 100%; margin: 0 0 10px; }
	.introinner > p	{ width: 100%; font-size: 14px; }
}

/* ------------ ITEM NAME ------------- */
.itemallwrapper	{ display: -webkit-flex; display: flex; flex-direction: column; width: 100%; align-items: center; justify-content: center; padding: 140px 0 0; }
.itemallwrappertop	{ display: -webkit-flex; display: flex; width: 100%; align-items: center; justify-content: center; padding: 0 8%; gap: 6%; margin: 0 0 120px; }
.itemallwrapperbtm	{ display: -webkit-flex; display: flex; width: 100%; align-items: flex-end;  justify-content: center; padding: 0 8%; gap: 6%; margin: 0 0 160px; }
.subimg_wrapper	{ display: -webkit-flex; display: flex; width: 100%; }
.subimg	{ width: 100%; padding: 0 2.5rem; }
.itemhh	{ width: 47%; display: -webkit-flex; display: flex; flex-direction: column; }
.itemhh > a	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; gap: 20px; }
.itemhh > a > p	{ display: -webkit-flex; display: flex; flex-direction: column; width: 100%; padding: 0; transition: all .4s; opacity: 1; }
.itemhh > a > p strong	{ color:#333; width: 100%; white-space: nowrap; font-size: 16px; line-height: 1; font-weight: 600; letter-spacing:.02em; text-decoration: underline; margin: 0 0 12px; }
.itemhh > a > p span.prc, 
.itemhh > a > p span.prc	{ color:#333; width: 100%; white-space: nowrap; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing:0; margin: 0 0 4px; }
@media (min-width: 1000.1px) {
	.itemhh > a:hover	{ opacity: .6; }
}
.itemww	{ width: 48%; display: -webkit-flex; display: flex; flex-direction: column; gap: 40px; }
.itemww > p	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; gap: 20px; }
.itemww > p strong	{ font-size: 22px; line-height: 1; font-weight: 500; letter-spacing:.2em; }
.itemww > p span	{ width: 100%; max-width: 610px; font-size: 16px; line-height: 1.9; font-weight: 400; letter-spacing:.08em; }
.itemss	{ width: 34%; display: -webkit-flex; display: flex; flex-direction: column; }
.itemfmlis	{ display: -webkit-flex; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0 10%; }
.itemfmlis > li	{ width: calc(50% - 5px); }
.itemfmlis > li.active:nth-child(1)	{ -webkit-transition-delay: .3s; transition-delay: .3s; }
.itemfmlis > li.active:nth-child(2)	{ -webkit-transition-delay: .5s; transition-delay: .5s; }
.itemfmlis > li.active:nth-child(3)	{ -webkit-transition-delay: .3s; transition-delay: .3s; }
.itemfmlis > li.active:nth-child(4)	{ -webkit-transition-delay: .5s; transition-delay: .5s; }
@media (max-width: 1000px) {
	.itemallwrappertop	{ padding: 0; gap: 60px; flex-wrap: wrap; margin: 0 0 40px; }
	.itemallwrapperbtm	{ padding: 0; gap: 0; flex-wrap: wrap; margin: 0 0 60px; justify-content: flex-end;  }
	.subimg	{ padding: 0; }
	.itemhh	{ width: 100%; order: 1; padding: 0 10% 0 10%; }
	.itemallwrapperbtm .itemhh	{ padding: 0 18% 0 0; }
	.itemhh > a	{ gap: 20px; }
	.itemhh > a > p	{ padding: 0; }
	.itemallwrapperbtm .itemhh > a > p	{ padding: 0 0 0 14%; }
	.itemww	{ width: 100%; order: 2; gap: 60px; }
	.itemww img	{ order: 2; }
	.itemww > p	{ order: 1; gap: 10px; padding: 0 10%; }
	.itemww > p strong	{ font-size: 16px; }
	.itemww > p span	{font-size: 13px; line-height: 2; }
	.itemss	{ width: 60%; margin-bottom: -60px; margin-right: -6px; z-index: 2; position: relative; box-sizing:content-box;border: 6px solid #fff; }
	.itemfmlis	{ padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
	.itemfmlis > li	{ width: 80%; }
	.itemfmlis > li:nth-child(1)	{ order: 1; }
	.itemfmlis > li:nth-child(2)	{ order: 2; }
	.itemfmlis > li:nth-child(3)	{ order: 4; }
	.itemfmlis > li:nth-child(4)	{ order: 3; }
}
.itemallwrappertxxt	{ width: 100%; max-width: 1480px; display: -webkit-flex; display: flex; padding: 0 8%; margin: 0 0 140px; gap: 40px; }
.itemallwrappertxxt > h3	{ width: 200px; font-size: 24px; line-height: 1.6; font-weight: 500; letter-spacing:.2em; }
.pertxxtinner	{ width: calc(50% - 160px); display: -webkit-flex; display: flex; flex-direction: column; gap: 10px; }
.pertxxtinner > strong	{ display: -webkit-flex; display: flex; }
.pertxxtinner > strong a	{ text-decoration: underline; font-size: 18px; line-height: 1.6; font-weight: 500; letter-spacing:.04em; }
.pertxxtinner > p	{ font-size: 15px; line-height: 1.9; font-weight: 400; letter-spacing:.08em; }
@media (max-width: 1200px) {
	.itemallwrappertxxt	{ padding: 0 10%; }
}
@media (max-width: 890px) {
	.itemallwrappertxxt	{ margin: 0 0 60px; gap: 20px; flex-wrap: wrap; }
	.itemallwrappertxxt > h3	{ width: 100%; font-size: 18px; }
	.itemallwrappertxxt > h3 br	{ display: none; }
	.pertxxtinner	{ width: 100%; gap: 10px; }
	.pertxxtinner > strong a	{ font-size: 16px; }
	.pertxxtinner > p	{ font-size: 13px; }
}

/* ------------ BLOCK ------------- */
@media (min-width: 768px)	{ .pconly { display: block; } }
@media (max-width: 767px)	{ .sponly { display: block; } }
@media (min-width: 768px)	{ .sponly { display: none!important; } }
@media (max-width: 767px)	{ .pconly { display: none!important; } }