@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
#contents { width: 100%!important; max-width: 100%!important; padding: 0; }
#pisss { width: 100%!important; max-width: 100%!important; }
#pi { width: 100%!important; max-width: 100%!important; margin: 0 0 40px; background-color: #fff!important; padding: 0; }
#pi > img { display: none!important; }
picture	{ width: 100%; vertical-align: bottom; line-height: 1;  }
@media (min-width: 768px)	{
	.bread	{ margin: 16px auto 49px; max-width: 1000px; }
	.bread ul, .bread ol { margin: 0 auto; }
	.section_common {  margin-left: 0!important; width: 100%; }
}
.fadeintitle	{ animation-name: fadein; animation-duration: 1.5s; animation-iteration-count: 1; }
.fadein	{ opacity : 0; transform : translate(0, 10px); }
.fadein.scrollin	{ opacity : 1; transform: none!important; transition:all 1s; }
@keyframes fadein	{ from	{ opacity: 0; } to	{ opacity: 1; } }

.bannerSwitch	{ width: 100%; margin: 0 auto; }
.bannerSwitch img	{ width: 100%; vertical-align: bottom; line-height: 0; }
.product_list	{ background-color: #fff; }
.pi_description	{ background-color: transparent!important; margin: 0 auto; min-width: 980px; max-width: 1100px; padding: 0 1%; }
.pi_lgzformat	{ display: block; width: 100%; padding: 0; margin: 0 0 100px; position: relative; font-feature-settings: "palt"; -webkit-text-size-adjust:100%; color:#000; -webkit-font-smoothing: antialiased; }
.pi_lgzformat	{ font-family:'Noto Sans JP', "游ゴシック",'YuGothic','Hiragino Sans',Meiryo,sans-serif!important; font-size:14px; font-weight: 400; line-height:1.75; -webkit-text-size-adjust:100%; color:#000000; -webkit-font-smoothing: antialiased; letter-spacing:.08rem; }
.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 a { transition: all .3s; color:#000000; }
.pi_lgzformat .small { font-size:80%; }
.pi_lgzformat .center-text	{ text-align: center; }
@media (orientation: portrait) and (max-width: 829px)	{ 
	.pi_lgzformat	{ margin: 0 0 60px; }
}
@media (max-width: 767px) {
	#pi { padding: 0 ; }
	.pi_description	{ padding: 0; min-width: auto; }
}


/* ------------ INTRODUCTION ------------- */
.introduction	{ padding: 100px 3%; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; }
.introduction .intimg	{ width: calc(60% - 20px); }
.introduction .inttxt	{ width: calc(40% - 20px); padding: 20px 0 0; }
.introduction .inttxt > p	{ width: 100%; padding: 0; margin: 0 0 .4em; color:#000; font-size: clamp(13px, 18px, 1.1vw); line-height: 2; text-align: left; }
@media (max-width: 767px) {
	.introduction	{ padding: 40px 30px; flex-wrap: wrap; }
	.introduction .intimg	{ width: 100%; }
	.introduction .inttxt	{ width: 100%; }
	.introduction .inttxt > p	{ margin: 0 0 .2em; color:#000; }
}
/* ------------ INTRODUCTION2 ------------- */
.introduction2	{ padding: 60px 0 80px; display: -webkit-flex; display: flex; flex-direction: column; width: 100%; max-width: 680px; margin: 0 auto; }
.introduction2 .intimg	{ width: 100%; }
.introduction2 .inttxt	{ width: 100%; padding: 20px 0 0; }
.introduction2 .inttxt > p	{ width: 100%; padding: 0; margin: 0 0 .4em; color:#000; font-size: 16px; line-height: 2; text-align: left; }
@media (max-width: 767px) {
	.introduction2	{ padding: 40px 20px; flex-wrap: wrap; }
	.introduction2 .intimg	{ width: 100%; }
	.introduction2 .inttxt	{ width: 100%; }
	.introduction2 .inttxt > p	{ margin: 0 0 .2em; font-size: 13px; }
}

/* ------------ ITEM WRAPPER ------------- */
.item_wrapper	{ display: -webkit-flex; display: flex; justify-content: center; margin: 0 auto 100px; width: 100%; max-width: 880px; padding: 0; }
.item_wrapper.column2	{ align-items: flex-start; }
.item_wrapper.column2.firstitem	{ align-items: flex-end; }
.item_wrapper.singlecolm	{ max-width: 480px; flex-direction: column; align-items: center; }
.item_wrapper.fullsize	{ flex-direction: column; align-items: flex-start; }
.itemimg	{ order:1; }
.itemtext	{ order:2; padding: 0 0 0 40px; }
.midimg	{ display: -webkit-flex; display: flex; justify-content: center; margin: 0 auto 100px; max-width: 680px; padding: 0; }
@media (min-width: 768px) {
	.firstitem .itemtext, 
	.reflect .itemtext	{ order:1; padding: 0 40px 0 0; }
	.firstitem .itemimg,
	.reflect .itemimg	{ order:2; }
	.singlecolm .itemtext	{ padding: 0; }
	.fullsize .itemtext	{ padding: 0; }
}
@media (max-width: 767px) {
	.item_wrapper	{ margin: 0 0 60px; padding: 0 20px; }
	.item_wrapper.column2	{ flex-wrap: wrap; }
	.item_wrapper.fullsize	{ padding: 0; }
	.midimg	{ margin: 0 auto 60px; }
}

/* ------------ ITEM ------------- */
.itemimg	{ width: calc(100% - 400px); }
.itemtext	{ width: 400px; display: -webkit-flex; display: flex; flex-direction: column; }
.singlecolm .itemimg, 
.fullsize .itemimg	{ width: 100%; }
@media (min-width: 768px) {
	.fullsize .itemtext	{ width: 600px; }
}
.itemtext > strong	{ color:#000; font-size: 15px; font-weight: 700; line-height: 1.4; text-align: left; margin: 30px 0 0; }
.itemtext > h3	{ color:#000; font-size: 26px; font-weight: 700; line-height: 1.4; text-align: left; margin: 0 0 20px; }
.itemtext > p	{ color:#000; font-size: 16px; line-height: 2; text-align: left; }
ul.btns	{ display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; list-style-type: none; padding: 15px 0 0; }
ul.btns > li	{ width: calc(50% - 7px); height: 50px; display: -webkit-flex; display: flex; margin: 14px 0 0; }
@media (min-width: 768px) {
	.fullsize ul.btns > li	{ width: calc(33% - 7px); }
}
ul.btns > li > p,
ul.btns > li > a	{ width: 100%; height: 100%; position: relative; border: 1px solid #000; }
ul.btns > li > p	{ border: 1px solid #999; }
ul.btns > li > p > span,
ul.btns > li > a > span	{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; color:#000; font-size: 16px; line-height: 1.1; font-weight: 400; transition: all .5s; text-decoration: none; }
ul.btns > li > p > span	{ color:#999; }
ul.btns > li > p > span b	{ color:#999; font-size: 11px; font-weight: 400; }
@media (min-width: 768px) {
	ul.btns > li > a::before	{ content:""; width: 0; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 100%; z-index: 1; background-color: #000; transition: all .5s; opacity: 1; }
	ul.btns > li > a:hover::before	{ width: 100%; right: 0; opacity: 1; }
	ul.btns > li > a:hover > span	{ color:#fff; text-decoration: none; }
}
@media (max-width: 767px) {
	.itemimg	{ width: 100%; }
	.itemtext	{ width: 100%; padding: 0; }
	.item_wrapper.fullsize .itemtext	{ padding: 0 20px; }
	.itemtext > strong	{ font-size: 14px; margin: 30px 0 0; }
	.itemtext > h3	{ font-size: 20px; margin: 0 0 20px; }
	.itemtext > p	{ font-size: 13px; }
	ul.btns > li > p > span,
	ul.btns > li > a > span	{ font-size: 13px; }
	ul.btns > li > p > span b	{ font-size: 10px; }
}

.btmbnn	{ margin: 0 auto; width: 100%; max-width: 1000px; padding: 0 20px; }
.bnnsp	{ display: none; }
@media (max-width: 767px) {
	.bnnsp	{ display: -webkit-flex; display: flex; flex-direction: column; width: 100%; padding: 20px; }
}

/* ------------ SLIDER CUSTOM ------------- */
.itemimges .slick-dots	{ position: absolute; display: -webkit-flex; display: flex; justify-content: flex-end; bottom: -24px; }
.itemimges .slick-dots li	{ margin: 0; width: 20px; height: 20px; }
.itemimges .slick-dots li button	{ padding: 0; width: 20px; height: 20px; }
.itemimges .slick-dots li button::before	{ content:"●"; color:#d5d5d5; opacity: 1!important; line-height: 20px!important; font-family: 'Noto Sans JP', sans-serif!important; font-size: 11px; width: 20px; height: 20px; }
.itemimges .slick-dots li.slick-active button:before	{ color:#000; opacity: 1!important; }
.slick-dotted.slick-slider	{ margin-bottom: 0!important; }

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