@charset "utf-8";

body{
	margin:0;
	padding:0;
}

.red{
	color: #AA0000;
}

.bold{
	font-weight: bold;
}
.underline{
	text-decoration: underline;
}

.indnt{
  padding-left: 1em;
  text-indent: -1em;
}

.spanindent{
	display: block;
	padding-left: 1em;
  text-indent: -1em;	
}

.spanindent2{
	display: block;
	padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.3em;
}

.nobottom{
	margin-bottom: 0 !important;
}

.headline{
	margin-top:20px;
  margin-bottom:10px;
	padding:5px;
	color:#333;
	font-weight:bold;
	font-size:98%;
	border-bottom:1px solid #4f5f71;
  border-left:4px solid #4f5f71;
  line-height: 125%;  
}

.headline2{
	margin-top:20px;
	margin-bottom:10px;
	color:#390;
	font-weight:bold;
	font-size:90%;
}

.headline3{
	margin-top:20px;
	margin-bottom:10px;
	color:#390;
	font-weight:bold;
	font-size:90%;
}

.popup02{
	margin-bottom:5px;
	font-size:95%;
	color:#595757;
  font-weight:bold;
  line-height: 140%;
}
	
.btnRight{
  margin-bottom:10px;
  margin-right: 10px;
	text-align:right;
	font-size:65%;
}

.sindex{
	margin-bottom:3px;
	line-height:140%;
	font-weight:bold;
	font-size:75%;
}

.dText{
  margin-left: 10px;
  margin-right: 10px;
	font-size:75%;
  line-height:140%;
  padding-left: 10px;
}

.lTtxt{
  margin-left: 10px;
  margin-right: 10px;
}

.mypegeFlows{
  margin-left: 10px;
  margin-right: 10px;
}

#guidecontainer td p{
	padding-left:10px;
}

#guidecontainer td p,
#guidecontainer .guideTable td dl dt,
#guidecontainer .guideTable td dl dd,
dl{
	font-size:100%;
}

#guidecontainer .guideTable dt{
	padding-top:10px;
}

div.mrbt {
	margin:0 0 10px 0;
}

/*--------------------

	guide
	
--------------------*/
#guidecontainer{
	width:700px;
	margin-left:auto;
  margin-right:auto;
  text-align: left;
  font-size: 1.8rem;
}
.guideInner{
	width:600px;
	margin-left:auto;
	margin-right:auto;
	color:#595757;
}

.guideInner2{
  line-height: 150%;
  margin: 0 10px;
}

h1{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #4f5f71;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  padding-left: 10px;
  text-align: left;

}

.close_button{
  margin-top: 30px;
}

.guideInner .step{
	padding:0 50px;
	text-align:left;
}

#guidecontainer .sindex{
  margin-left: 10px;
  margin-right: 10px;
	margin-bottom:0.5em;
}
.guideInner th{
	padding:5px;
}

#guidecontainer .tables{
	width:590px;
	margin-bottom:5px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCC;
}

#guidecontainer .tables .bottrigh{
	text-align:center;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}
#guidecontainer .tables .bott{
	text-align:center;
	border-bottom:1px solid #CCC;
}
#guidecontainer .tables .righ{
	text-align:center;
	border-right:1px solid #CCC;
}

.centerAlign{
	text-align:center;
}

.guideInner .mypage_howto_menu{
  text-align: left;
}

.guideInner .line04{
	padding-left:10px;
	padding-right:10px;
	color:#595757;
}
.unitGuide{
	width:620px;
	margin-left:auto;
	margin-right:auto;
}

.guideTable{
	margin-bottom:30px;
	width:100%;
}
#guidecontainer .guideTable dl dt{
	margin:0 0 1em 0;
	font-weight:bold;
}
#guidecontainer .guideTable dl dd{
  margin:0.5em 0.5em 0.3em 1em;
  line-height: 120%;
}
#guidecontainer .guideTable dl dt.tpMrg{
	margin-top:1em;
}

#guidecontainer .guideTable dl dt a{
	background-position:2px 3px;
	background-image: url(../../guide/images/arrow_01.gif);
	background-repeat: no-repeat;
	padding-left: 18px;
}
#guidecontainer .guideTable .leftTd{
	padding-left:10px;
	width:50%;
}


#guidecontainer .guideTable .rightTd{
	padding-left:20px;
}

#guidecontainer p{
	margin-bottom:1em;
	font-size:75%;
	line-height:140%;
}

#guidecontainer .lft{
	text-align:left;
	padding:0 30px;
}


#guidecontainer .kankyoudl dt{
	margin-bottom:0.3em;
}
#guidecontainer .kankyoudl dd{
	margin-bottom:0.5em;
	margin-left:2em;
}

#guidecontainer .line04 .btnRight{
	margin-top:2em;
}
#guidecontainer ul li{
	margin-bottom:0.5em;
}

#guidecontainer li.Listdefault{
	list-style:disc;
}

#guidecontainer .clubdl dt{
	margin-bottom:0.3em;
}
#guidecontainer .clubdl dd{
	margin-bottom:0.8em;
	margin-left:1em;
}

#guidecontainer .clubdl dd.indd{
	margin-left:3em;
	margin-bottom:0.5em;
}
#guidecontainer .clubdl dd.inddBtm{
	margin-left:3em;
	margin-bottom:1em;
}

#guidecontainer ol{
	margin:0;
	padding:0;
	list-style-position:inside;
}

#guidecontainer .btmArrows{
	background:url(../../guide/images/flowarrow.gif) 50% 100% no-repeat;
	margin-bottom:30px;
	padding-bottom:40px;
}

.teiki-soryo-table{
	margin-left: 5px;
}
.teiki-soryo-table th,
.teiki-soryo-table td
{
	font-size: 75%;
	border: 1px solid #333;
	text-align: center;
	padding: 10px;
	line-height: 1.2;
}
.teiki-soryo-table th{
	background-color: #8088a4;
	color: #fff;
}

/*--------------------

	ecopoint
	
--------------------*/
.ecoListbox {
	padding:13px 5px 15px 11px;
	background-color:#8CC540;
}

.eco_pointList {
	width:290px;
	float:left;
	padding:3px 0 0 2px;
}

.eco_pointList h3 {
	padding:4px 0 2px 0;
	margin:0 0 3px 0;
	color:#FFF;
}

p.ttl_center {
	text-align:center;
	padding:0;
	margin:0;
}

p.ttl_left {
	text-align:left;
	padding:0;
	margin:0;
}


table.tbl_eco {
	width:280px;
    border-collapse:collapse;
    border-spacing:0;
	border:1px solid #111;
}

table.tbl_eco th {
	padding:2px 20px 2px 8px;
	text-align:left;
	background-color:#F58B71;
	border-bottom:1px dotted #999999;
}

table.tbl_eco td {
	padding:2px 20px 2px 8px;
	text-align:left;
	background-color:#F8CFBB;
	border-bottom:1px dotted #999999;
	
}

table.tbl_eco2 {
	width:280px;
    border-collapse:collapse;
    border-spacing:0;
	border:1px solid #111;
}

table.tbl_eco2 th {
	padding:2px 5px 2px 8px;
	text-align:left;
	background-color:#F58B71;
	border-bottom:1px dotted #999999;

}

table.tbl_eco2 td {
	padding:2px 5px 2px 8px;
	text-align:left;
	background-color:#FFFFCC;
	border-bottom:1px dotted #999999;
	
}

.eco_ex1 {
	margin-bottom:15px;
	width:609px;
	margin:0 auto;
}

.eco_ex2 {
	margin-bottom:15px;
	width:609px;
	margin:0 auto;
}

.pdf {
	margin-bottom:15px;
	text-align:center;
}

.pdf img {
	border:none;
}

.eco_ex1 p {
	padding:0 50px 0 0;
}

.eco_ex1 ul {
	width:555px;
	border:1px solid #F58B71;
	padding:8px 0 1px 25px;
	margin:0 0 10px 0;
}

.eco_ex1 li {
	padding:0px 0 0 0;
	margin:0 0 0 0;
	color:#F15941;
	font-weight:bold;
}

.eco_ex2 p {
	padding:0 50px 0 0;
}

.eco_ex2 ul {
	width:555px;
	padding:8px 0 1px 10px;
	margin:0 0 0 0;
	list-style:none;
}

.eco_ex2 li {
	padding:0px 0 0 13px;
	margin:0 0 0 0;
	color:#39B64B;
	font-weight:bold;
	background:url(../../guide/images/ecopoint/arrow.gif) 0 50% no-repeat;
}


.eco_ex2 a:link {
	color:#39B64B;
}

.eco_ex2 a:visited {
	color:#39B64B;
}

.eco_ex2 a:hover {
	color:#39B64B;
}



/*--------------------

	clearFix
	
--------------------*/

.clearFix,
.mrbt {
    overflow:hidden;
}

.clearFix:after,
.mrbt:after {
    content: "";
    display: block;
    clear: both;
    height: 0px;
    overflow: hidden;
}

* html .clearFix,
* html .mrbt {
    height: 1em;
    overflow: visible;
}


/***********************
 Renewal corresponding
***********************/

#guidecontainer .spdata{
  display: none;
}

h1.guide_title{
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: none;
  color: #000;
  font-size: 0;
  line-height: 0;
  padding-left: 0;
  text-align: center;
}

.guidebox{
  width: 100%;
  margin-bottom: 30px;
}

.guidebox .guideleft,
.guidebox .guideright{
  background-color: #f5f5f5;
  width: 282px;
  float: left;
  padding: 20px 0 20px 20px;
  color: #595757;
  box-sizing: border-box;
}

.guidebox .guideright{
  float: right;
}

.guidebox .guideleft dt,
.guidebox .guideright dt{
  font-size: 20px;
  line-height: 1.3em;
  padding-bottom: 30px;
  text-indent: -1.3em;
  padding-left: 1.3em;
  padding-right: 0.7em;
}


.guidebox .guideleft dt::before,
.guidebox .guideright dt::before{
  content: url(/shopping/guide/images/list_mark.png);
  top: 5px;
  position: relative;
}

.guidebox .guideleft dd,
.guidebox .guideright dd{
  font-size: 18px;
  line-height: 1.2em;
  padding-bottom: 10px;
  padding-left: 42px;
  text-indent: -1.6em;
  padding-right: 0.7em;
}

.guidebox .guideright dd span{
  font-size: 14px;
  line-height: 2.25em;
  text-align: right;
}

.guideInner a:link,
.guideInner a:visited{
  text-decoration: underline;
  color: #595757;
}

.guideInner a:hover,
.guideInner a:active{
  color: #9F9F9F;
}

a:hover img {
	-moz-opacity:0.7;
	opacity:0.7;
	filter: alpha(opacity=70);
}

h2.title{
  background-color: #f5f5f5;
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
  padding-left: 15px;
  padding-top: 5px;
  margin-bottom: 15px;
}

#guidecontainer .pankuzu{
	font-size:15px;
	line-height:140%;
  margin-left: 15px;
  margin-right: 10px;
  margin-bottom: 45px;
}

#guidecontainer .gotoppage{
  font-size: 15px;
  line-height:140%;
  margin-bottom: 44px;
  padding-left: 15px;
}


@media only screen and (min-width: 641px) {
  
  #guidecontainer .spdata{
    display: none;
  }
  
  #guidecontainer .pcdata{
    display: block;
  }
  
}
  

/* ------------------------------
   MEDIAQUERIES[SP]  SP LAYOUT
------------------------------ */
@media only screen and (max-width: 640px) {
  
  #container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }
  
  #guidecontainer .pcdata{
    display: none;
  }
  
  #guidecontainer .spdata{
    display: block;
  }
  
  #guidecontainer .guidebox .guideleft .pcdata,
  #guidecontainer .guidebox .guideright .pcdata{
    display: none;
  }
  
  #rwdMenuWrap{
    display: none;
  }
  #site-id{
    width: 200px;
  }

  #guidecontainer{
    width: 100%;
  }
  .guideInner {
    width: 100%;
  }
  .close_button img{
    width: 40%;
    text-align: center;
  }
  .dlstep img{
    width: 16px;
  }

  .np_button img{
    width: 126px;
  }

  #guidecontainer .guideTable .leftTd{
    display: block;
    width: 100%;
  }
  #guidecontainer .guideTable .rightTd{
    display: block;
    width: 100%;
  }

  #guidecontainer td p,
  #guidecontainer .guideTable td dl dt,
  #guidecontainer .guideTable td dl dd,
  dl{
    font-size:90%;
  }
  .guideInner .step {
    padding: 0 0 0 10px;
  }

  .headline{
    margin-left: 10px;
    margin-right: 10px;
  }

  .guideInner2{
    margin-left: 10px;
    margin-right: 10px;
  }
	
	.npwizlogo {
		width: auto;
	}

	.aplogo {
		width: auto;
	}

  
/***********************
 Renewal corresponding
***********************/
  img{
    width: 100%;
  }
  
  h1.guide_title{
    box-sizing: border-box;
    margin: 3vw 4% 3vw 4%;
    padding: 0;
    overflow: hidden;
  }
  
  h1.guide_title img{
    width: auto;
  }

  .guidebox{
    box-sizing: border-box;
    width: 92%;
    padding: 0;
    margin: 0 auto;
  }

  .guidebox .guideleft,
  .guidebox .guideright{
    box-sizing: border-box;
    width: 100%;
    background-color: #f5f5f5;
    float: none;
    padding: 2.6% 0 2.6% 2.6%;
    color: #595757;
    margin-bottom: 4vw;
  }

  .guidebox .guideright{
    float: none;
  }


  a:hover img {
    -moz-opacity:0.7;
    opacity:0.7;
    filter: alpha(opacity=70);
  }

  h2.title{
    background-color: #f5f5f5;
    font-size: 20px;
    font-weight: bold;
    line-height: 35px;
    padding-left: 15px;
    padding-top: 5px;
    margin-bottom: 15px;
  }

  #guidecontainer .pankuzu{
    font-size:15px;
    line-height:140%;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 45px;
  }

  #guidecontainer .gotoppage{
    font-size: 15px;
    line-height:140%;
    margin-bottom: 44px;
    padding-left:  20px; 
  }
  
  .guideInner2{
    line-height: 150%;
    margin: 0 3%;
  }

  .gotoppage{
    padding-left: 2.5vw;
  }


}