@charset "utf-8";

/*PCSP共通設定
section:nth-of-type(odd){background-color:#f0f0f0;}
section:nth-of-type(even){background-color:#fff;}
*/

/*759px以下*/
@media screen and (max-width: 759.9px) {
#wrapper {line-height: 1.4;}
.spnone{display:none;}

/* CSS */
#dirPathBlock,
#anchorLinkBlock {
font-size: 10px;
margin: 1% 1% 0 1%;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
font-size: 12px;
margin: 0 1%;
}
/*h2 {
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 5px dotted #111;
margin: 0 auto 3%;
padding-bottom: 5px;
width: 94%;
clear: both;
}*/
.inner{
width: 96%;
margin: 0 2%;
padding: 24px 0;
box-sizing: border-box;
}

}

/*760px以上*/
@media screen and (min-width: 760px) {
/* CSS */
#wrapper {line-height: 1.231;}
#dirPathBlock,
h1,
.iframe_end-content_gadget,
#anchorLinkBlock{
width: 100%;
max-width:970px;
min-width:760px;
margin: auto;
}

/*panlist&back*/
#dirPathBlock,
#anchorLinkBlock {
width: 100%;
margin: 0 auto;
display: block;
font-size: 12px;
}
#dirPathBlock p,
#anchorLinkBlock a{font-size: 12px;}
h1 {
font-size: 14px;
width: auto;
max-width: 970px;
margin: 0 auto 5px;
}
/*h2 {
font-size: 24px;
font-weight: bold;
text-align: center;
border-bottom: 5px dotted #111;
margin-bottom: 3%;
padding-bottom: 5px;
clear: both;
}*/
.inner{
width: 96%;
max-width:970px;
margin: 0 auto;
padding:50px 0;
display: block;
}
u{text-decoration-color: red;}
/*title*/
img#mainphoto {
width: 100%;
max-width:970px;
margin:0 auto 2%;
display:block;
}

}

/*sort style ---------------------------------*/
.is-hide {
  display: none;
}

/*=======================================
UNIQUE SETTING Add 230112 by MIMOAGENT
=======================================*/

.page_cz__wrap * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.page_cz__wrap {line-height: 1.6;}

.page_cz__wrap .fx {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.page_cz__wrap .fx_row_2 > *,
.page_cz__wrap .fx_row_3 > *,
.page_cz__wrap .fx_row_4 > * {width:100%;}


@media screen and (min-width: 760px) {
.page_cz__wrap {font-size:16px;}

.page_cz__wrap .fx_row_2 > * {width:48.6%;}
.page_cz__wrap .fx_row_3 > * {width:31.33%;}
.page_cz__wrap .fx_row_4 > * {width:23%;}
}

.page_cz__wrap h2,
.page_cz__wrap #JblueCredit h2 {
border-bottom:1px solid #888;
color:#158122;
display: flex;
align-items: center;
font-size:20px;
font-weight: 700;
margin-bottom: 2em;
padding:0 0 .75em 56px;
position: relative;
}
.page_cz__wrap h2::before,
.page_cz__wrap #JblueCredit h2::before {
background: url(../images/ttl_icon.png) no-repeat;
background-size: cover;
content:'';
display: block;
height:48px;
width: 48px;
position:absolute;
left:0;
}
.page_cz__wrap h2::after,
.page_cz__wrap #JblueCredit h2::after {
background-color: #158122;
content:'';
display: block;
height:4px;
width: 64px;
position:absolute;
left:0;
bottom:-4px;
}

.page_cz__wrap #JblueCredit h2 {
color:#007CBA;
}
.page_cz__wrap #JblueCredit h2::before {
background: url(../images/ttl_icon2.png) no-repeat;
background-size: cover;
content:'';
display: block;
height:48px;
width: 48px;
position:absolute;
left:0;
}
.page_cz__wrap #JblueCredit h2::after {
background-color: #007CBA;
}


.page_cz__wrap .headline {
  color:#158122;
  font-size:16px;
  margin:3em auto 1em;
  text-align: center;
  position: relative;
  }
  .page_cz__wrap .headline > span {
  background-color: #fff;
  padding: 0 1em;
  }
  .page_cz__wrap .headline span::before {
  background-color: #158122;
  content:'';
  display: block;
  height:1px;
  width:14em;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  z-index: -1;
  }
  .page_cz__wrap .headline.area span::before {width:20em}

@media screen and (min-width: 760px) {
.page_cz__wrap h2 {font-size:24px;}
.page_cz__wrap .headline {font-size:20px;}
}

.page_cz__wrap img {
border: none;
border-style: none;
height: auto;
max-width: 100%;
width: auto;
}
.page_cz__wrap figure {
margin:0;
padding:0;
}

.page_cz__wrap .kv {
background: url(../images/bg_kv.jpg) no-repeat 50%;
background-size: cover;
}
.page_cz__wrap .kv img {
display: block;
margin:auto;
max-width: 970px;
width: 100%;
}

.page_cz__wrap .page_Anchor {
background: rgb(17,153,84);
background: linear-gradient(90deg, rgba(17,153,84,1) 0%, rgba(93,194,49,1) 50%, rgba(17,153,84,1) 100%);
}
.page_cz__wrap .page_Anchor a {
color:#fff;
display: block;
font-weight: 700;
}
.page_cz__wrap .page_Anchor__inner {
margin:auto;
max-width: 950px;
width: 100%;
}
.page_cz__wrap .page_Anchor__inner ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.page_cz__wrap .page_Anchor__inner li {
border:1px solid #fff;
border-top: none;
font-size:13px;
text-align: center;
width:calc(100% / 2);
}
.page_cz__wrap .page_Anchor__inner li:nth-child(even) {border-left:none;}
.page_cz__wrap .page_Anchor__inner li:last-child {border-bottom: none;}
.page_cz__wrap .page_Anchor__inner li a {padding: 1em;}


@media screen and (min-width: 760px) {
.page_cz__wrap .page_Anchor__inner ul {justify-content: center;}
.page_cz__wrap .page_Anchor__inner {padding: 1em 0;}
.page_cz__wrap .page_Anchor__inner li {
border: none;
font-size:16px;
margin:0 .75em;
width:auto;
position: relative;
}
.page_cz__wrap .page_Anchor__inner li a {padding: 0;}
.page_cz__wrap .page_Anchor__inner li:not(:last-child)::after {
background-color: #fff;
content:'';
display: block;
height:1.5em;
width:1px;
position: absolute;
right:-.75em;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
}

.page_cz__wrap .page_intro {margin-top:2em;}
.page_cz__wrap .page_intro .txt_lead {
font-size:15px;
line-height: 2;
}

.page_cz__wrap .note,
.page_cz__wrap #JblueCredit .note {
background-color: #dbebdd;
margin:2em 0;
padding: 1em 2em;
}
.page_cz__wrap .note p > em {
color:#158122;
display: block;
font-size:15px;
font-weight: 700;
margin-bottom: .5em;
text-align: center;
}
.page_cz__wrap #JblueCredit .note {
background-color: #dbe2eb;
}


@media screen and (min-width: 760px) {
.page_cz__wrap .page_intro .txt_lead {font-size:18px;}
.page_cz__wrap .note p > em {font-size:18px;}
}


.page_cz__wrap #cz02 .target dl {margin-bottom: 2em;}
.page_cz__wrap #cz02 .target dt {
background-color: #158122;
border:1px solid #158122;
color:#fff;
font-size:16px;
line-height: 40px;
text-align: center;
}
.page_cz__wrap #cz02 .target dd {
border:1px solid #158122;
color:#158122;
font-size:20px;
line-height: 40px;
text-align: center;
}

.page_cz__wrap #cz02 .progress {margin-top:2em;}

/*目標値なしの場合*/
/*.page_cz__wrap #cz02 .progress_inner {
background: url(../images/bg_target.png) 50% no-repeat;
background-size: contain;
height: 214px;
text-align: center;
position: relative;
}
.page_cz__wrap #cz02 .progress p {
display: inline-block;
font-size:25px;
font-weight: 700;
white-space: nowrap;
position: absolute;
top:55%; /* 50 */
/*
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
line-height: 1;
}
.page_cz__wrap #cz02 .progress p em {
color:#158122;
font-size:138.1%;
}
.page_cz__wrap #cz02 .progress p span {
display: block;
font-size:12px;
font-weight: 300;
text-align: right;
padding-right: 30px;
}
*/
/*目標値ありの場合*/
.page_cz__wrap #cz02 .progress dl {
background: url(../images/bg_target.png) 50% no-repeat;
background-size: contain;
height: 214px;
text-align: center;
}
.page_cz__wrap #cz02 .progress dt {
font-size:18px;
font-weight: 700;
margin-bottom: -5px;
padding-top: 85px;
}
.page_cz__wrap #cz02 .progress dd,
.page_cz__wrap #cz02 .progress p{
display: inline-block;
font-size:20px;
font-weight: 700;
line-height: 1.4;
}
.page_cz__wrap #cz02 .progress p{
display: block;
font-size:17px;
margin-top: 15px;
text-align: center;
}
.page_cz__wrap #cz02 .progress dd em,
.page_cz__wrap #cz02 .progress p em{
color:#158122;
font-size:138.1%;
}
.page_cz__wrap #cz02 .progress dd span,
.page_cz__wrap #cz02 .progress p span {
display: block;
font-size:12px;
font-weight: 300;
text-align: center;
}
.page_cz__wrap #cz02 .progress p span {
display: inline;
}

.page_cz__wrap #cz02 .tb_overwrap {margin:1em auto;}

.page_cz__wrap .tb_overwrap {
overflow:auto;
width: 100%;
height:calc(100vh/3);
}
.page_cz__wrap .cell_fix1 {
position: sticky;
top:0;
left:0;
z-index: 2;
}
.page_cz__wrap .cell_fix2 {
position: sticky;
top:0;
left:0;
z-index: 1;
}
.page_cz__wrap .cell_fix1::before,
.page_cz__wrap .cell_fix2::before {
border-top:1px solid #999;
content:'';
height:100%;
width: 100%;
position:absolute;
top:-1px;
left:-1px;
}

.page_cz__wrap .tb_progress {width:100%;}
.page_cz__wrap .tb_progress th,
.page_cz__wrap .tb_progress td {
border:1px solid #999;
padding: .5em;
text-align: center;
white-space:nowrap;
}
.page_cz__wrap .tb_progress th {
background-color: #333;
color:#fff;
}

.page_cz__wrap .tb_progress .unit {
display: block;
font-size:10px;
}
.page_cz__wrap .tb_progress td:not(:first-child) {text-align: right;}

.page_cz__wrap .tb_progress td.cell_fix2::before {
background-color: #fff;
border:1px solid #999;
z-index: -1;
}
.page_cz__wrap .tb_progress .ic_new {
background-color: #158122;
color:#fff;
display: inline-block;
font-size:10px;
line-height: 12px;
margin-left: 4px;
padding:2px 4px;
position: relative;
top:-2px
}



@media screen and (min-width: 760px) {
.page_cz__wrap #cz02 .target dt {font-size:20px;}
.page_cz__wrap #cz02 .target dd {font-size:24px;}

.page_cz__wrap #cz02 .progress {
margin-top:0;
/*width:45.68%;*/
}
.page_cz__wrap #cz02 .progress dt {
	font-size:21px;
	padding-top: 75px;
}
.page_cz__wrap #cz02 .progress p {
	text-align: left;
}
.page_cz__wrap #cz02 .progress dd {font-size:24px;}

.page_cz__wrap .tb_progress .unit {font-size:12px;}
}

@media screen and (max-width: 759.9px) {
.page_cz__wrap #cz02 .target dl {
display: inline-flex;
align-items: center;
width: 100%;
}
.page_cz__wrap #cz02 .target dt {width:50%;}
.page_cz__wrap #cz02 .target dd {width:50%;}
}



.page_cz__wrap #cz03 dt {
border-left:4px solid #158122;
color:#158122;
font-weight: 700;
margin-bottom: .75em;
padding-left: .5em;
}
.page_cz__wrap #cz03 dd > em {
display: block;
}
.page_cz__wrap #cz03 dd + dd {margin-top:.5em;}
.page_cz__wrap #cz03 dd + dt {margin-top:2em}

.page_cz__wrap .tb_retailer {width:100%;}
.page_cz__wrap .tb_retailer th,
.page_cz__wrap .tb_retailer td {
background-color: #fff;
border:1px solid #999;
padding: .5em;
text-align: center;
white-space:nowrap;
}
.page_cz__wrap .tb_retailer th {
background-color: #333;
color:#fff;
}
.page_cz__wrap .tb_retailer td:not(:first-child) {text-align: left;}
.page_cz__wrap .tb_retailer td:not(:last-child) {white-space:nowrap;}
.page_cz__wrap .tb_retailer td:last-child {
white-space:normal;
word-break: keep-all;
}

@media screen and (min-width: 760px) {
.page_cz__wrap .tb_retailer td:last-child {
word-break:break-all;
}
}

.page_cz__wrap .tb_retailer td.cell_fix2::before {
background-color: #fff;
border:1px solid #999;
z-index: -1;
}

.page_cz__wrap .bnr_carbonzero {
margin:0 auto;
max-width: 640px;
width: 90%;
}

.page_cz__wrap .titleSearch {
border-left:4px solid #158122;
color:#158122;
font-weight: 700;
margin-bottom: .75em;
padding-left: .5em;
}


.page_cz__wrap #cz05 ul {
background: rgb(237,251,222);
background: linear-gradient(90deg, rgba(237,251,222,1) 0%, rgba(252,255,246,1) 50%, rgba(237,251,222,1) 100%);
margin-top:2em;
padding: 1em 1em 0;
}
.page_cz__wrap #cz05 .fx_row_2 > li {
margin:0 0 1em;
width:48.6%;
line-height: 1.3;
}

@media screen and (min-width: 760px) {
.page_cz__wrap #cz05 .fx {
justify-content: center;
text-align: center;
}
.page_cz__wrap #cz05 .fx_row_2 > li {
margin:0 .7% 1em;
text-align: center;
}
}


/* SORT ITEM SETTING */
.page_cz__wrap #cz06 .note {
background-color: transparent;
padding: 0;
}
.page_cz__wrap .switch {margin-bottom:2em}

.page_cz__wrap .switch select {
background: transparent;
background: #eee
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%3E%3Cpath%20d%3D%22M4.33%208.5L0%201L8.66%201z%22%20fill%3D%22%23666%22%2F%3E%3C%2Fsvg%3E")
right 10px center no-repeat;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: none;
color: #000;
cursor: pointer;
outline: none;
padding: 12px 35px 12px 11px;
width: 100%;
-webkit-appearance: none;
/* Firefox hide arrow */
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: "";
}
/* IE10 hide arrow */
.page_cz__wrap .switch select::-ms-expand {display: none;}

.page_cz__wrap .switch .refine-msg {margin: 1em 0;}

.page_cz__wrap .item_wrap .tb_overwrap {
overflow:auto;
width: 100%;
height:calc(100vh/2);
}
.page_cz__wrap .item_wrap .disnone {display: none;}

.page_cz__wrap .tb_pricelist {width:100%;}
.page_cz__wrap .tb_pricelist th,
.page_cz__wrap .tb_pricelist td {
border:1px solid #999;
padding: .5em;
text-align: center;
white-space:nowrap;
}
.page_cz__wrap .tb_pricelist th {
background-color: #333;
color:#fff;
}

.page_cz__wrap .tb_pricelist .unit {
display: block;
font-size:10px;
}

.page_cz__wrap .tb_pricelist td:nth-child(n+3) {text-align: left;}
.page_cz__wrap .tb_pricelist td:nth-last-child(-n+3) {text-align: right;}

.page_cz__wrap .tb_pricelist td.cell_fix2::before {
background-color: #fff;
border:1px solid #999;
z-index: -1;
}

@media screen and (min-width: 760px) {
.page_cz__wrap .tb_pricelist th,
.page_cz__wrap .tb_pricelist td {
white-space:normal;
word-break:keep-all;
}
}

/* j blue credit */
.page_cz__wrap #JblueCredit .progress_inner {
background: url(../images/bg_target.png) 50% no-repeat;
background-size: contain;
height: 214px;
text-align: center;
position: relative;
}
.page_cz__wrap #JblueCredit .progress p {
display: inline-block;
font-size:25px;
font-weight: 700;
white-space: nowrap;
position: absolute;
top:55%; /* 50 */
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
line-height: 1;
}
.page_cz__wrap #JblueCredit .progress p span {
display: block;
font-size:12px;
font-weight: 300;
text-align: right;
padding-right: 30px;
}
.page_cz__wrap #JblueCredit h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 30px;
    line-height: 1.6;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.page_cz__wrap #JblueCredit h3::before,
.page_cz__wrap #JblueCredit h3::after {
    content: "";
    width: 30px;
    height: 2px;
    background-color: #000;
    margin: 0px 4px 4px;
}
.page_cz__wrap #JblueCredit h3::before {
    transform: rotate(45deg);
}
.page_cz__wrap #JblueCredit h3::after {
    transform: rotate(-45deg);
}

.page_cz__wrap .JBC_btn {
    width: 90%;
    margin: 30px auto 0;
}
.page_cz__wrap #JblueCredit .JBC_btn {
    margin: 0 auto;
}
.page_cz__wrap .JBC_btn a {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 15px;
    background: #007CBA;
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}
.page_cz__wrap .JBC_btn a::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(135deg);
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 8%;
}
.page_cz__wrap #JblueCredit .JBC_btn a::after {
    transform: rotate(45deg);
}
.page_cz__wrap #JblueCredit .target figure {
    text-align: center;
}
.page_cz__wrap #JblueCredit .target img {
    width: 70%;
    text-align: center;
}
@media screen and (min-width: 760px) {
.page_cz__wrap .JBC_btn {
    width: 400px;
    margin: 50px auto 0;
}
.page_cz__wrap #JblueCredit .JBC_btn {
    width: 100%;
    margin: 20px auto 0;
}
.page_cz__wrap #JblueCredit h3 {
    font-size: 25px;
}
.page_cz__wrap #JblueCredit .fx {
    width: 80%;
    margin: 30px auto 0;
}
.page_cz__wrap #JblueCredit .target img {
    width: 100%;
}
}