@charset "UTF-8";
#pi { width: 100%!important; max-width: 980px; }
/* #pi > img { display: none!important; } */
.product_list	{ background-color: #fff; }
.pi_description	{ padding: 0!important; background-color: #fff; }
.pi_lgzformat	{ display: block; width: 100%; padding: 0; margin: 0 0 80px; }
.pi_lgzformat	{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:14px;font-weight:400;line-height:1.75;-webkit-text-size-adjust:100%;;color:#000000;-webkit-font-smoothing: antialiased; }
.pi_lgzformat a {transition: all .3s; color:#000000;}
.pi_lgzformat a:hover {opacity:0.7; color:#000000; text-decoration:none;}
.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; }
}
/* ------------ FADEIN ------------- */
.fadein	{ opacity : 0; transform : translate(0, 40px); transition: all .8s; }
.fadein.scrollin	{ opacity : 1; transform : translate(0, 0); }
/* ------------ INTRODUCTION ------------- */
.introduction	{ text-align: center; padding: 60px 0 0; background-color: #fff; }
.introduction > h2	{ display: inline-block; padding: 0 0 30px; margin: 0 auto; color:#000000; font-size: 42px; font-weight: 700; line-height: 1.3em; }
.introduction > p	{ display: inline-block; padding: 0; margin: 0 auto; color:#000000; font-size: 16px; font-weight: 400; line-height: 2.2; text-align: center!important; }
@media screen and (max-width: 639px) {
	.introduction	{ padding: 40px 20px 0; }
	.introduction > h2	{ padding: 0; font-size: 32px; }
	.introduction > p	{ font-size: 14px; line-height: 1.8; text-align: left!important; }
	.introduction > p > br	{ display: none; }
}

.uk-sticky {padding-left: 40px !important; padding-top: 40px !important;}
.links {position:fixed; bottom:0; right:0;}
.pi_lgzformat section {padding:80px 20px 0; text-align:center; max-width: 1000px; margin: 0 auto;}
.pi_lgzformat h3 { font-size:20px; font-weight: 600; line-height:1.5; letter-spacing: .05em; margin-bottom: 60px; }
.pi_lgzformat h3 span { font-size:40px; line-height: 1; font-weight: 700; }
.pi_lgzformat p { text-align: left; line-height: 2; }
.pi_lgzformat p a { font-size: 16px; text-decoration: underline; font-weight: 700; text-underline-offset:0.1em; }
.pi_lgzformat p a:hover { text-decoration: none;  }
.pi_lgzformat .sustainability table tr td {font-size:12px; line-height:18px;}
.pi_lgzformat .sustainability table tr td:first-child {width:16%; padding-right:20px;}
.pi_lgzformat .sustainability table tr td:last-child {width:84%; padding-left:20px; border-left: 1px solid #000000;}
.pi_lgzformat .sustainability table tr td img {width: 200px;}
.pi_lgzformat .sustainability table tr td p {margin:0;}
.pi_lgzformat .sustainability table tr td div.v-align-middle { display: inline-block; vertical-align: middle;}
.pi_lgzformat img.sustainability{max-width: 100%; width: 100%;margin-top:24px; margin-bottom: 24px!important;}

.pi_lgzformat .sustainability .steps {padding:0;}
.pi_lgzformat .sustainability .steps p {color:#000000; font-size:24px; text-align:center; margin-bottom: 0;}
.pi_lgzformat .sustainability .steps p span {color:#000000; font-size:18px;}
.pi_lgzformat .sustainability .detail_text p {font-size:14px; color:#000000; padding:0px 8px!important; text-align:left; padding: 0;}
.pi_lgzformat .sustainability .steps img {padding-right: 24px;}
.pi_lgzformat .mid-width {width: 680px; margin-right:auto!important; margin-left:auto!important;}
.pi_lgzformat .mid-width.center {text-align:center}
.pi_lgzformat .uk-light .uk-slidenav {margin-left: 0; margin-right: 0;}
.pi_lgzformat polyline {stroke-width:1.4;}

.pi_lgzformat .sustainability .gray_wrap {margin-top:80px; background: #efefef; border-radius: 16px; padding: 40px 16px;}

.pi_lgzformat .details .uk-grid {margin-bottom:0px!important;}
.pi_lgzformat .details .uk-grid:last-child {margin:0!important;}
.pi_lgzformat .details .uk-grid .uk-grid {margin-bottom:0!important;}
.pi_lgzformat .details .left {padding-right:20px!important;}
.pi_lgzformat .details .right {padding-left:20px!important;}
.pi_lgzformat .details .large_item.left {padding-right:20px!important; position: relative;}
.pi_lgzformat .details .large_item.right {padding-left:20px!important; position: relative;}
.pi_lgzformat .details .large_item.left p.number {font-size: 84px; line-height: 1; font-weight: 200; position: absolute; top: -40px; left: -32px; z-index: 10; color: #000; transition: all 0s; }
.pi_lgzformat .details .large_item.right p.number {font-size: 84px; line-height: 1; font-weight: 200; position: absolute; top: -40px; right: -32px; z-index: 10;  color: #000; transition: all 0s; }
.pi_lgzformat .details .uk-light .uk-slidenav {color:rgba(0, 0, 0, 0.5); }
.pi_lgzformat h4 {font-size:32px; font-weight: 700; line-height:1; text-align:left; margin: 0 0 20px; }
.pi_lgzformat h4 span {font-size:16px;}
.pi_lgzformat h5 {font-size: 24px; text-align:left;font-weight: 500;}

.pi_lgzformat a.online {float: left; color:#ffffff; background: #000000; padding: 8px 16px;}
.pi_lgzformat a.online:hover {color:#ffffff; text-decoration:none;}

.pi_lgzformat .scene .text_links {text-align: left; margin-top: 4px; text-transform: uppercase;}
.pi_lgzformat .scene .text_links a {background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50%); background-position: 0 0; background-size: 200% auto; text-decoration: underline; transition: .3s;}
.pi_lgzformat .scene .text_links a:hover { background-position: -100% 0; color: #fff;}

.pi_lgzformat .price {font-size:110%;}

.pi_lgzformat .uk-modal-body {padding:0;}
.pi_lgzformat .uk-close {color:#000000;}
.pi_lgzformat .uk-close svg { height: 30px; width: 30px;}
/**.uk-slideshow { text-align: left;}**/
.pi_lgzformat .uk-slidenav svg {width:30px;}

.pi_lgzformat .sp { display:none!important;}
.pi_lgzformat .pc { display:initial!important;}


@media screen and (max-width: 639px) {
	.pi_lgzformat .details .uk-grid {margin-bottom:60px!important;}
	.pi_lgzformat .sp { display:initial!important;}
	.pi_lgzformat .pc { display:none!important;}
	.pi_lgzformat h3 { font-size:16px; text-align: left; margin-bottom: 30px; padding: 20px 0 0; }
	.pi_lgzformat h3 span { font-size:32px; }
	.pi_lgzformat h4 { font-size:28px; margin-top: 24px;}
	.pi_lgzformat p { margin-top: 16px; }
	.pi_lgzformat .mid-width {width:100%;}
	.pi_lgzformat .mid-width.center {text-align:left;}
	.pi_lgzformat .flow-navi {top: 20px; left: 20px;}
	.pi_lgzformat .uk-sticky {padding-left: 20px !important; padding-top: 20px !important;}
	.pi_lgzformat .head_word {width:100%; padding:0 20px 0; -moz-box-sizing: border-box; box-sizing: border-box;}
	.pi_lgzformat .head_word p {font-size: 16px; margin:0;}
	.pi_lgzformat section {padding-top:40px;}
	.pi_lgzformat .sustainability table tr td {width:100%; display:block;}
	.pi_lgzformat .sustainability table tr td:first-child {width: 84px; margin: 16px 0 0; padding: 0;}
	.pi_lgzformat .sustainability table tr td:last-child {width: 100%; padding:4px 0 0; border:none;}
	.pi_lgzformat .sustainability .steps p span {font-size: 18px; color:#000000; margin-left:16px;}
	.pi_lgzformat .sustainability .steps .uk-flex-middle {margin-bottom:40px!important;}
	.pi_lgzformat .sustainability .steps:last-child .uk-flex-middle {margin-bottom:0px!important;}
	.pi_lgzformat .sustainability .gray_wrap {padding-bottom: 0;}
	.pi_lgzformat .details .large_item.left, 
	.pi_lgzformat .details .large_item.right, 
	.pi_lgzformat .details .right, 
	.pi_lgzformat .details .left { padding:0!important; position: relative; }
	.spNegative { margin: 0 -20px; ; }
	.pi_lgzformat .details .large_item.left p.number {left:-16px;}
	.pi_lgzformat .details .large_item.right p.number {right: -16px;}
	.pi_lgzformat .product:first-child {margin-bottom: 80px!important;}
	.pi_lgzformat .sustainability .steps p.detail_text {font-size:14px; color:#000000; text-align:left; padding: 0; float: left;}
	.pi_lgzformat .sustainability .steps p {font-size: 20px; text-align: left; margin-bottom: 8px;}
	.pi_lgzformat .details .order-d:nth-child(1) { -webkit-box-ordinal-group: 2; -webkit-order: 2; -ms-flex-order: 2; order: 2;}
	.pi_lgzformat .details .order-d:nth-child(2) { -webkit-box-ordinal-group: 1; -webkit-order: 1; -ms-flex-order: 1; order: 1;}
	.pi_lgzformat .square_items {height: calc(100vw - 40px)!important; min-height:calc(100vw - 40px)!important;}
	.pi_lgzformat .fix-menu {width:100%; bottom:0; right:0; background:#ffffff;}
	.pi_lgzformat .fix-menu table tbody tr td {padding:0; margin:0;vertical-align:middle;　-moz-box-sizing: border-box; box-sizing: border-box;}
	.pi_lgzformat .fix-menu table tbody tr td:nth-child(odd) {width:16%;}
	.pi_lgzformat .fix-menu table tbody tr td:nth-child(even) {width:34%;}
	.pi_lgzformat .fix-menu table tbody tr td:nth-child(3) {border-left:1px solid #ababab;}
	.pi_lgzformat .fix-menu table tbody tr td a {width: 100%; height: 100%; display: block;}
	.pi_lgzformat .fix-menu table tbody tr td p {margin:0;}
}

@media screen and (min-width: 640px) {
	.pi_lgzformat .fix-menu table { width:100%; }
	.pi_lgzformat .fix-menu table tbody tr td { display: block; width: 100%;text-decoration:none; color:#000000; }
	.pi_lgzformat .fix-menu table tbody tr td a { }
	.pi_lgzformat .fix-menu table tbody tr td p { font-size:10px; text-align:center; }
	.pi_lgzformat .top_0 {top: 0!important;}
	.pi_lgzformat .scene .text_links {text-align:center;}
	.pi_lgzformat .scene .uk-slideshow ul li img { width:100%!important; left: 50%; transform: none; top: initial; bottom: 0; left: 0; }
}


.sceneelement__inner	{ display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; }
.sceneelement__inner .sceneelement__content	{ width: calc(25% - 20px); padding: 0; margin: 0 10px; }
.sceneelement__inner .sceneelement__content > p	{ display: block; text-align: left; font-size: 13px; line-height: 16px; padding: 10px 0; margin: 0; }
dl.detail_item_info	{ display: -webkit-flex; display: flex; margin: 0; padding: 0; align-items: center; }
dl.detail_item_info > dt	{ width: 50px; margin: 0; padding: 0; }
dl.detail_item_info > dd	{ width: calc(100% - 50px); font-size: 13px; line-height: 16px; margin: 0; padding: 0; text-align: left; }
@media screen and (max-width: 639px) {
	.sceneelement__inner	{ justify-content: space-between; }
	.sceneelement__inner .sceneelement__content	{ width: calc(50% - 10px); margin: 0 0 20px; }
	.sceneelement__inner .sceneelement__content > p	{ font-size: 12px; line-height: 14px; padding: 5px 0; }
	dl.detail_item_info	{ padding: 0 0 30px; }
	dl.detail_item_info > dt	{ width: 30px; }
	dl.detail_item_info > dd	{ width: calc(100% - 30px); font-size: 12px; line-height: 14px; }
}

.pganc	{ display: block; text-align: center; padding: 60px 0 20px; }
.pganc a	{ font-size: 15px; font-weight: 700; line-height: 1.4; display: inline-block; padding: 10px 100px; margin: 0 auto; border: 2px solid #000; transition: all .8s; color:#fff; background-color: #000; letter-spacing:.1rem; }
@media (min-width: 830px)	{ 
	.pganc a:hover	{ text-decoration: none; color:#000; background-color: #fff; }
}
@media (orientation: portrait) and (max-width: 829px)	{ 
	.pganc	{ padding: 20px; }
	.pganc a	{ display: block;  padding: 10px; font-size: 14px; }
}

.pgabt2	{ display: -webkit-flex; display: flex; justify-content: space-between; text-align: center; padding: 40px 0 20px; }
.pgabt2 a	{ width: calc(50% - 30px); font-size: 15px; font-weight: 400; line-height: 1.4; display: inline-block; padding: 10px; margin: 0 auto; border: 1px solid #000; transition: all .8s; color:#000; background-color: #fff; letter-spacing:.1rem; }
@media (min-width: 830px)	{ 
	.pgabt2 a:hover	{ text-decoration: none; color:#000; background-color: #ccc; }
}
@media (orientation: portrait) and (max-width: 829px)	{ 
	.pgabt2	{ padding: 0 20px; flex-wrap: wrap; }
	.pgabt2 a	{ width: 100%; display: block;  padding: 10px; margin: 0 0 10px; font-size: 14px; }
}


.tablewp	{ width: 100%; padding: 0 20px 30px; }
.tablewp > table	{ width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.tablewp > table td a	{ font-weight: 700; text-decoration: underline; text-underline-offset:0.1em; }
.tablewp > table td a:hover	{ text-decoration: none;  }
.tablewp > table td,
.tablewp > table th	{ text-align: center; padding: 5px; margin: 0; }
.tablewp > table th img	{ width: 100px; min-width: 100px; max-width: 100px; }
.tablewp > table td img	{ width: 20px; min-width: 20px; max-width: 20px; }
.g-name	{ width: 7em;  }
.tablewp > table tbody th	{ background-color: #eee; }
@media screen and (max-width: 829px) {
	.tablewp	{ width: auto; overflow-x: auto; padding: 0; margin: 0 0 0 20px; border-left: 1px solid #b6b6b6; }
	.tablewp > table	{ width: auto; }
	.tablewp > table th	{ white-space: nowrap; }
	.tablewp > table td,
	.tablewp > table th	{ border: 1px solid #b6b6b6; vertical-align: middle;  }
	.tablewp::-webkit-scrollbar	{ height: 4px; width: 100%; }
	.tablewp::-webkit-scrollbar-track	{ background: #ccc; }
	.tablewp::-webkit-scrollbar-thumb	{ background: #004ea2; border-radius: 0; }
}
@media screen and (min-width: 830px) {
.tablewp > table {
  border: 1px solid #aaa;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
}
.tablewp > table thead th,
.tablewp > table tbody th,
.tablewp > table tbody td {
  border-bottom: 1px solid #b6b6b6;
}
.tablewp > table thead th {
  background-color: #fff;
}
.tablewp > table thead th + th,
.tablewp > table tbody td {
  border-left: 1px solid #b6b6b6;
}
.tablewp > table tbody tr:last-child th,
.tablewp > table tbody tr:last-child td {
  border-bottom: none;
}
.tablewp > table thead tr:first-child th:first-child {
  border-radius: 5px 0 0 0;
}
.tablewp > table thead tr:first-child th:last-child {
  border-radius: 0 5px 0 0;
}
.tablewp > table tbody tr:last-child th:first-child {
  border-radius: 0 0 0 5px;
}
.tablewp > table tbody tr:last-child th:last-child {
  border-radius: 0 0 5px 0;
}
}


.thumbnail .slick-track	{ display: -webkit-flex; display: flex; width: 100%!important; justify-content: flex-start; }
.thumbnail .slick-track::before	{ display: none!important; }
.thumbnail .slick-track::after	{ display: none!important; }
.thumbnail .slick-track > *	{ width: calc(25% - 5px)!important; margin: 5px 5px 0 0; cursor: pointer; }


.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 15px;
    width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left:10px;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:10px;
    transform: rotate(45deg);
}
.thumbnail .slick-slide	{ opacity: .5; transition: all .2s; }
.thumbnail .slick-slide.slick-current	{ opacity: 1; }



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