/* -----------------------------------
Elements Default
----------------------------------- */

html{
  font-family: Verdana, Meiryo, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 80%;	
  -webkit-text-size-adjust: 100%;
}

body, h1, h2, h3, h4, h5, ul, ol, p {
  margin: 0;
  padding: 0;
  line-height: 1.4em;
}

div, p, pre, address, blockquote, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li {
  border: medium none;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 200%;
  font-size: 2rem;
  margin: 20px 0;
}

h2 {
  border-bottom: 1px solid #ccc;
  font-size: 150%;
  font-size: 1.5rem;
  margin: 40px 0 20px 0;
}

h3 {
  font-size: 120%;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 20px 0 10px 0;
}

@media screen and (max-width: 640px) {
  h1 {
    font-size: 150%;
    font-size: 1.4rem;
  }
  h2 {
    font-size: 120%;
    font-size: 1.2rem;
  }
}

div {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none outside none;
}
li a {
    text-decoration: none;
}
a {
  color: #960;
  font-size: 100%;
}
a:active {
  color: #f00;
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a img {
  border: none;
  margin: 0;
}

strong {
  font-size: 100%;
  font-style: normal;
  font-weight: bold;
}

cite, em, small, code, dfn, var {
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
}

table {
  border: 0 none;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  table-layout: auto;
}
caption {
  caption-side: top;
  margin: 0;
  padding: 0;
  text-align: left;
}
th, td {
  empty-cells: show;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
}
form, fieldset, legend, label {
  border: 0 none;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

input, textarea, select {
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
}

hr {
  background-color: #999;
  border: 0 none;
  color: #666;
  height: 1px;
  margin: 30px 0;
}


/* -----------------------------------
Global Class
----------------------------------- */

.subHead
  {margin:10px 0; color:#4C3025; font-size:120%; font-size:1.2rem; font-weight:bold;}

ul.disc
  {list-style-type:disc; padding-left:2em;}
ul.square
  {list-style-type:square; padding-left:2em;}
ol.procedure
  {list-style-type:decimal; padding-left:2em;}
ul.disc li,
ul.square li,
ol.procedure li
  {margin-top:0.5em;}
ul.disc li:first-child,
ul.square li:first-child,
ol.procedure li:first-child
  {margin-top:0;}

ul.columnList li
  {margin:0;}

.buttonArea
  {margin:10px;}

.button {
  background: #ddd;
  background: linear-gradient(top, #ddd, #ccc);
  background: -ms-linear-gradient(top, #ddd, #ccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ccc));
  background: -moz-linear-gradient(top, #ddd, #ccc);
  border: 1px solid #aaa;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #ddd;
  color: #333 !important;
  display: inline-block;
  padding: 5px 10px;
}
.button:hover {
  background: #ccc;
  background: -ms-linear-gradient(top, #ccc, #bbb);
  background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#bbb));
  background: -moz-linear-gradient(top, #ccc, #bbb);
  background: linear-gradient(top, #ccc, #bbb);
  color: #333 !important;
  text-decoration: none;
}

.buttonAction {
  background: #e57e26;
  background: -ms-linear-gradient(top, #e57e26, #e36602);
  background: -webkit-gradient(linear, left top, left bottom, from(#e57e26), to(#e36602));
  background: -moz-linear-gradient(top, #e57e26, #e36602);
  background: linear-gradient(top, #e57e26, #e36602);
  border: 1px solid #c96d22;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #ddd;
  color: #fff !important;
  display: inline-block;
  padding: 5px 10px;
}
.buttonAction:hover {
  background: #c96d22;
  background: linear-gradient(top, #c96d22, #c95802);
  background: -ms-linear-gradient(top, #c96d22, #c95802);
  background: -webkit-gradient(linear, left top, left bottom, from(#c95802), to(#c95802));
  background: -moz-linear-gradient(top, #c96d22, #c95802);
  color: #fff !important;
  text-decoration: none;
}

.more {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

em, .red
  {color:red;}

.section
  {margin:20px 10px;}

.center
  {text-align:center;}

.indent
  {padding:0 10px}

.clear
  {clear:both;}

.nowrap
  {white-space:nowrap;}

.freePart {
  margin: 20px 0;
}

.buttonArea
  {margin:10px;}

.visualBoard
  {position:relative; line-height:0;}
.visual
  {text-align:center; line-height:0;}
.visual img
  {width:100%;}


/* -----------------------------------
Base Layout
----------------------------------- */

body {
  background: url("back.gif") repeat-x scroll 0 0;
}

#container {
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 10px;
  width: 950px;
}

@media screen and (max-width: 959px) {
  #container {
    width: auto;
  }
}
@media screen and (max-width: 640px) {
  #container {
    padding: 0;
    width: auto;
  }
}

#header {
  background: url("header.gif") repeat-x scroll left bottom;
  overflow: hidden;
  padding: 10px 0 20px 0;
  position: relative;
}

#header #search_box {
  bottom: 25px;
  position: absolute;
  right: 0;
  text-align: right;
}

#header #search_box dl dt,
#header #search_box dl dd {
  display: inline;
}

#header #search_box dl dt .searchKeyword {
  width: 200px;
}

@media screen and (max-width: 959px) {
  #header #ci img {
    width: 200px;
  }
}
@media screen and (max-width: 640px) {
  #header {
    padding: 10px 0 12px;
  }
  #header #ci img {
    margin: 0 4px;
    width: 150px;
  }
  #header #search_box {
    background-color: #ddd;
    margin: 6px 0 0 0;
    padding: 6px;
    position: static;
  }
  #header #search_box dl {
    display: table;
    width: 100%;
  }
  #header #search_box dl dt {
    display: table-cell;
  }
  #header #search_box dl dd {
    display: table-cell;
    text-align: center;
    width: 7rem;
  }
  #header #search_box dl dt .searchKeyword {
    box-sizing: border-box;
    width: 100%;
  }
}

#sns {
  float: right;
  padding: 5px 0;
}
#snsSp {
  display: none;
}

@media screen and (max-width: 640px) {
	#sns {
	  display: none;
	}
	#snsSp {
    display: block;
    margin: 20px 0;
    text-align: center;
	}
}

#path {
  color: #666;
  padding: 5px 0;
}

@media screen and (max-width: 959px) {
	#path {
    clear: both;
    margin: 0 4px;
	}
}

@media screen and (max-width: 640px) {
	#path {
    border-bottom: 1px solid #ccc;
    font-size: 0.9rem;
    margin: 0 4px;
	}
}

#main {
  clear: both;
  margin: 20px auto 0 auto;
  position: relative;
}

#main #region {
  margin: 0 0 20px 0;
}


@media screen and (max-width: 640px) {
	#main {
    background: transparent none; 
    margin: 20px 4px 0 4px;
  }
}

#pageNav {
  margin: 30px 0 0;
  overflow: hidden;
  padding: 10px;
}
#pageNav .goback {
  float: left;
}
#pageNav .totop {
  float: right;
}
#pageNav .goback a, #pageNav .totop a {
  border: 1px solid #ccc;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}
#pageNav .goback a:hover, #pageNav .totop a:hover {
  text-decoration: none;
}
#pageNav .goback a {
  padding: 4px 10px 4px 24px;
}
#pageNav .totop a {
  padding: 4px 24px 4px 10px;
}
#pageNav .goback a::after,
#pageNav .totop a::after {
  border-right: 2px solid #666;
  border-top: 2px solid #666;
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  top: 50%;
  width: 5px;
}
#pageNav .goback a::after {
  left: 10px;
  margin-top: -3px;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}
#pageNav .totop a::after {
  margin-top: -2px;
  right: 10px;
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}

@media screen and (max-width: 640px) {
	#pageNav {
    padding: 0;
    text-align: center;
	}
	#pageNav .goback,
	#pageNav .totop {
    display: inline;
    float: none;
	}
	#pageNav .goback {
    border-right: 1px solid #000;
    padding: 0 1em 0 0;
	}
	#pageNav .totop {
	  padding: 0 0 0 1em;
	}
	#pageNav .goback a, #pageNav .totop a {
    border: 0 none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline;
    font-weight: normal;
    padding: 0;
	}
	#pageNav .goback a:after,
	#pageNav .totop a:after {
	  border: 0 none;
	}
}


#switchVP{
  margin:20px auto 0 auto;
  text-align:center;  
  color:#f60;
  cursor:pointer;
}

#switchVP.off
  {display:none;}



#footer {
  background:url("footer.jpg") repeat-x 0 0;
  margin: 30px 0 0 0;
  overflow: hidden;
  padding: 15px 0 10px 0;
}
#footer .company {
  color: #666;
  float: left;
}
#footer .copyright {
  color: #666;
  float: right;
  font-size: 85%;
  font-size: 0.9rem;
}

@media screen and (max-width: 640px) {
  #footer {
    font-size: 85%;
    font-size: 0.9rem;
    text-align: center;
  }
  #footer .company,
  #footer .copyright {
    float: none;
  }
}


/* -----------------------------------
Common Parts
----------------------------------- */

/* --- Switch Control --- */

.switchCtrl {
  background-color: #eee;
  margin: 20px 0;
  overflow: hidden;
}
.switchCtrl input[type="checkbox"] {
  display: none;
}
.switchCtrl label.switchPanelOn {
  display:none;
}
.switchCtrl ul {
  overflow: hidden;
}
.switchCtrl ul li {
  border-left: 1px solid #999;
  display: inline-block;
  *display: inline;
  float: left;
  margin: 4px 0;
  padding: 0 10px;
  *zoom: 1;
}
.switchCtrl ul li:first-child {
  border-left: medium none;
}

@media screen and (max-width: 640px) {
	.switchCtrl {
	background: none;
    margin: 20px 0 0 0;
	}
	.switchCtrl label.switchPanelOn {
    background: linear-gradient(#888, #555);
    background-color: #555;
    color: #fff;
    display: inline-block;
    margin: 0;
    padding: 0.5rem 10px;

    border: 0 none;
    box-sizing: border-box;
    cursor: pointer;
    float: none;
    position: relative;
    width: 100%;
	}
	.switchCtrl label.switchPanelOn:after {
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    content: "";
    display: block;
    height: 5px;
    margin-top: -5px;
    position: absolute;
    right: 5px;
    top: 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 5px;
	}
	.switchCtrl label.active::after {
    margin-top: -2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}
	.switchCtrl ul {
    display: none;
	}
	.switchCtrl input:checked ~ ul,
	.switchCtrl input:checked + ul {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    display:block;
	}
	.switchCtrl ul li {
    background: none;
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0 1%;
    padding: 0;
    width: 31%;
	}
	.switchCtrl ul li a {
    background: #ddd;
    background: linear-gradient(top, #ddd, #ccc);
    background: -ms-linear-gradient(top, #ddd, #ccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ccc));
    background: -moz-linear-gradient(top, #ddd, #ccc);
    border: 1px solid #aaa;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #ddd;
    box-sizing: border-box;
    color: #333 !important;
    display: inline-block;
    margin: 6px 0;
    padding: 5px 0;
    text-align: center;
    width: 100%;
	}
	.switchCtrl ul li a:hover {
    background: #ccc;
    background: -ms-linear-gradient(top, #ccc, #bbb);
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#bbb));
    background: -moz-linear-gradient(top, #ccc, #bbb);
    background: linear-gradient(top, #ccc, #bbb);
    color: #333 !important;
    text-decoration: none;
	}
}


/* --- Pager Control --- */

.pagerCtrl {
  margin: 20px 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.pagerCtrl.forItem{
  border-top:1px solid #ccc;
  text-align:center; 
  padding-top:10px;
}
.pagerCtrl .counter {
  float: left;
}
.pagerCtrl .pager {
  position: absolute;
  right: 0;
  top: 0;
}
.pagerCtrl.forItem .pager {
  position:static;
}

.pagerCtrl .filter label.filterOn {
  background-color:#555;
  background: linear-gradient(#888, #555) repeat scroll 0 0 #555;
  color: #fff;
  cursor: pointer;
  margin: 0 0 0 20px;
  padding: 2px 15px 2px 10px;
  position: relative;
}
html>/**/body .pagerCtrl .filter label.filterOn{display /*\**/:none\9;}/* IE8, 9 */
.pagerCtrl .filter label.filterOn {*display:none;}  /* IE6-7 */
.pagerCtrl .filter label.filterOn:not(:target) {display:inline\9;} /* IE9, 10 */

.pagerCtrl .filter label.filterOn::after {
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  content: "";
  display: block;
  height: 5px;
  margin-top: -5px;
  position: absolute;
  right: 5px;
  top: 50%;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 5px;
}
.pagerCtrl .filter label.active::after {
  margin-top: -2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.pagerCtrl .filter input[type="checkbox"] {
  display: none;
}
.pagerCtrl .filter .panel {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  clear: both;
  display: none;
  position: relative;
}
.pagerCtrl .filter input:checked ~ .panel,
.pagerCtrl .filter input:checked + .panel {
  display: block;
  padding: 0 10px;
}
.pagerCtrl .filter dl {
  border-bottom: 1px dotted #bb9;
  display: table;
  width: 100%;
}
.pagerCtrl .filter dl:last-of-type {
  border-bottom: 0 none;
}
.pagerCtrl .filter dl dt {
  display: table-cell;
  padding: 10px 0;
  vertical-align: middle;
  width: 6em;
  width: 6rem;
}
.pagerCtrl .filter dl dd {
  display: table-cell;
  padding: 10px 0;
  vertical-align: middle;
}
.pagerCtrl .filter dl dd ul li {
  display: inline;
}
.pagerCtrl .filter dl dd ul li a {
  margin: 4px;
}

@media screen and (max-width: 640px) {
	.pagerCtrl {
    background-color: #ccc;
    margin: 10px 0;
	}
  .pagerCtrl.forItem{
    border-top:none;
    text-align:center; 
    padding-top:0;
  }
	.pagerCtrl .counter {
    float: none;
    padding: 4px;
	}
	.pagerCtrl .pager {
    background-color: #eee;
    padding: 4px;
    position: static;
    text-align: center;
	}
	.pagerCtrl .filter label.filterOn {
    padding: 4px 15px 4px 10px;
    position: absolute;
    right: 0;
    top: 0;
	}
}


.indexLinkCtrl {
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-top: 20px;
  overflow: hidden;
  padding: 0;
}
.indexLinkCtrl .title {
  background-color: #eee;
  color: #666;
  padding: 0.5em 1em;
}
.indexLinkCtrl ul.index {
  -moz-columns: auto 5;
  -webkit-columns: auto 5;
  columns: auto 5;
  overflow: hidden;
  padding: 0 10px 10px 10px;
}
.indexLinkCtrl ul.index li {
  -moz-break-inside: avoid-column;
  -webkit-break-inside: avoid-column;
  break-inside: avoid-column;
  display: inline-block;
  *float:left;
  margin-top: 10px;
  vertical-align: top;
  width: 14em\9;
}
.indexLinkCtrl ul.index li a {
  color: #666;
}
.indexLinkCtrl ul.index li input[type="checkbox"] {
  display: none;
}
.indexLinkCtrl ul.index li label {
  font-weight: bold;
}
.indexLinkCtrl ul.index li ul {
  margin: 0;
}
.indexLinkCtrl ul.index li ul li{
  display:block;
  margin: 0;
}


@media screen and (max-width: 640px) {
	.indexLinkCtrl .title {
	  background-color: #ddd;
	}
	.indexLinkCtrl ul.index {
    -moz-columns: auto auto;
    -webkit-columns: auto auto;
	columns: auto auto;
    padding: 0;
	}
	.indexLinkCtrl ul.index li {
    display: block;
    *float: none;
    margin: 0;
    width: auto;
	}
	.indexLinkCtrl ul.index li label {
    background-color: #eee;
    background: linear-gradient(top, #fff 1%,#eee 100%);
    border-top: 1px solid #ccc;
    cursor: pointer;
    display: block;
    font-weight: normal;
    padding: 0.6rem 1rem;
	}
	.indexLinkCtrl ul.index li ul {
    display: none;
    overflow: hidden;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
	}
	.indexLinkCtrl ul.index li input:checked ~ ul,
	.indexLinkCtrl ul.index li input:checked + ul {
	  display: block;
	}
	.indexLinkCtrl ul.index li a {
    background-color: #fff;
    border-top: 1px solid #ccc;
    display: block;
    font-weight: normal;
    padding: 0.6rem 1rem;
    position: relative;
    text-decoration: none;
    width: 100%;
	}
	.indexLinkCtrl ul.index li a:after {
    border-right: 2px solid #666;
    border-top: 2px solid #666;
    content: "";
    display: block;
    height: 5px;
    margin-top: -3px;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
	}
}


/* --- Note / Intellectual Property Right --- */


.note
  {color:#666; font-size:85%; font-size:0.9rem;}

ul.note {
  margin: 20px 0;
}
ul.note li {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
  text-align: left;
}

.ipr, .trademark {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
  margin: 20px 0;
  text-align: left;
}


/* -----------------------------------
Individual
----------------------------------- */

/*--- Item Data Field ---*/

.summary ul li em {
  color:inherit;
  display: inline-block;
  margin:0 6px 0 0;
  white-space: nowrap;
}
.summary ul li em::after{
  content: "："; 
}
.summary ul li small {
  display: block;
}

.summary .itemName {
  color: #333;
  font-size: 120%;
  font-size: 1.2rem;
  font-weight: bold;
}
.summary .itemName strong {
  font-weight: normal;
}

.summary .netorder {
  background-color: #060;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: 65%;
  font-size: 0.75rem;
  font-weight: normal;
  min-height:15px;
  padding: 1px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.summary .itemPrefix .icon{
  line-height: 1em;
  overflow: hidden;
}
.summary .itemPrefix .icon .netorder{
  font-size:75%\9;
  padding: 0 6px;
}
.summary .itemPrefix .icon .netorder *{
  vertical-align:middle;
}
.summary .itemPrefix .icon img{
  float: left;
  margin:1px 6px 1px 0;
  vertical-align: middle;
}
.summary .itemPrefix .prefix {
  overflow: hidden;
}
.summary .itemPrefix .prefix span {
  color: #f00;
  display: inline-block;
  float: left;
  font-size: 85%;
  font-size: 0.9rem;
  margin: 0 5px 0 0;
  *white-space: nowrap;
}
.summary .itemPrefix .caption {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
}

.summary .itemPrice .price {
  color: #333;
  font-size: 120%;
  font-size: 1.2rem;
}
.summary .itemPrice .launch {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
}
.summary .itemPrice .region {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
}
.summary .itemPrice .region em {
  color: #666;
}
.summary .itemPrice .nanaco {
  color: #f00;
  margin: 10px 0;
}
.summary .itemPrice .nanaco img{
  margin-right: 6px;
}
.summary .nanaco{
  margin: 10px 0;
}
.summary .nanaco .point{
  color:#f00;
  font-size: 150%;
  font-size: 1.5rem;
  margin: 0 0 10px 0;
}
.summary .nanaco .point strong{
  font-weight: normal;
}
.summary .nanaco .point span{
  white-space:nowrap;
}
.summary .nanaco .point img{
  margin: 1px 6px 1px 0;
  vertical-align: baseline;
}
.summary .nanaco .period,
.summary .nanaco .condition {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
}
.summary .nanaco .period,
.summary .nanaco .period em{
  color: #009;
}

.summary .eventInfo,
.summary .oderInfo,
.summary .attribute {
  margin: 10px 0 0 0;
  font-size: 85%;
  font-size: 0.9rem;
}
.summary .eventInfo em,
.summary .oderInfo em {
  color:#333;
}

.summary .allergy {
  margin: 10px 0 0 0;
}
.summary .allergy dl.nutrition {
  margin: 4px 0 0 0;
}
.summary .allergy dl.ingredient dt,
.summary .allergy dl.nutrition dt {
  background-color: #999;
  color: #fff;
  font-size: 85%;
  font-size: 0.9rem;
  font-weight: normal;
  margin: 0 0 2px 0;
  padding: 1px 2px;
}
.summary .allergy dl.ingredient dd,
.summary .allergy dl.nutrition dd {
  margin: 0;
	font-size: 85%;
	font-size: 0.9rem;
}
.summary .allergy dl.ingredient dd em,
.summary .allergy dl.nutrition dd em {
  color: #666;
  display: block;
  margin: 4px 0 0 0;
}
.summary .allergy dl.nutrition dd small{
  color: #666;
  display: block;
}
.summary .allergy dl.nutrition dd small::before{
  content:"※";
}

.summary .text {
  color: #333;
  font-size: 85%;
  font-size: 0.9rem;
  margin: 10px 0 0 0;
}

.summary .relatedLink {
  color:#960;
  margin: 10px 0 0 0;
  list-style-type:square;
  padding-left:2em;
}
.summary .relatedLink li{
  margin-top:0.5em;
}
.summary .relatedLink li:first-child{
  margin-top:0;
}
.summary .relatedLink a {
  text-decoration: none;
}
/*
.summary .relatedLink a {
  color: #960;
  margin-left:12px;
  text-decoration: none;
}
.summary .relatedLink a:hover {
  color: #f00;
  text-decoration: underline;
}
.summary .relatedLink a::before,
#itemDetail .relatedLink a::before {
  border-top: 0.5rem solid #960;
  border-left: 0.5rem solid transparent;
  content: "";
  display: inline-block;
  height: 0;
  margin: 0 0.5rem 0 -0.8rem;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 0;
}
*/

.summary .ipr {
  margin: 10px 0 0 0;
}

/* 商品コード回覧用対応 */
.attribute .n3{
  display:none;
}


/* --- Item List Page --- */

.itemArea {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position:relative;
}
.itemArea .itemList {
  align-content: flex-start;
  align-items: stretch;
  display: -webkit-box; /* Android 2~4 */
  display: -webkit-flex; /* Safari, iphone */
  display: flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-flow: row wrap;
  -webkit-box-pack: start; /* Android 2~4 */
  -webkit-justify-content: flex-start; /* Safari, iphone */
  justify-content: flex-start;
/* background available
  margin: 0 0 20px 20px;
*/
  margin: -20px 0 0 20px;
  overflow: hidden;
  padding: 0;
}
.itemArea .itemList .item {
/*
  background-color: #eee;
*/
/*
  border-top: 1px dotted #ccc;
*/
  display: inline-block\9;
  *display: inline;
  margin: 20px 20px 0 0;
  margin: 20px 16px 0 0\9;
  overflow: hidden;
  padding: 20px 10px 10px 10px;
  position: relative;
  width: 270px;
  vertical-align:top\9;
  zoom: 1\9;
}

.itemArea .itemList .item .image {
  margin: 0 0 10px 0;
  text-align: center;
}
.itemArea .itemList .item .image img {
  width: 100%;
  border:1px solid #d9d9d9;
}


/* Item List - Long Size / Half Size */

.itemArea .itemList.longSize {
  display: block;
  margin-right:20px;
}
.itemArea .itemList.halfSize{
  -webkit-box-pack: justify; /* Android 2~4 */
  -webkit-justify-content: space-between; /* Safari, iphone */
  justify-content: space-between;
  margin: -20px 20px 0 20px;
  margin: -20px 0 0 20px\9;
}
.itemArea .itemList.longSize .item {
  width: 890px;
  margin-right:0;
}
.itemArea .itemList.halfSize .item {
  width: 425px;
  width: 420px\9;
  *width:425px;
  margin: 20px 0 0 0;
  margin: 20px 20px 0 0\9;
}

.itemArea .itemList.longSize .item .image,
.itemArea .itemList.halfSize .item .image {
  float: left;
  margin: 0;
  padding:0;
  text-align: center;
  width: 180px;
}

.itemArea .itemList.longSize .item .summary,
.itemArea .itemList.halfSize .item .summary {
  margin: 0 0 0 200px;
}
.itemArea .itemList.longSize.noImg .item .summary,
.itemArea .itemList.halfSize.noImg .item .summary {
  margin-left: 0;
}

.itemArea .itemList.nanacoBP .item{
  background-image: url("nanacopoint.gif");
  background-position: 10px 20px;
  background-repeat: no-repeat;
}
.itemArea .itemList.nanacoBP .summary .nanaco .point{
  font-weight: normal;
  left: 10px;
  line-height:1;
  position: absolute;
  top: 50px;
  width: 160px;
 }
 
.itemArea .itemList .summary .nanaco .point strong{
  display:block;
  line-height:1.1;
}
.itemArea .itemList.longSize .summary .nanaco .point strong{
  display:inline;
}

.itemArea .itemList.longSize.nanacoBP .item .summary,
.itemArea .itemList.halfSize.nanacoBP .item .summary {
  margin-left: 180px;
}

@media screen and (max-width: 959px) {
  .itemArea .itemList{
    -webkit-box-pack: justify; /* Android 2~4 */
    -webkit-justify-content: space-between; /* Safari, iphone */
    justify-content: space-between;
    margin-right:20px;
  }
  .itemArea .itemList .item {
    box-sizing: border-box;
    margin-right:0;
    width: 49%;
  }
  .itemArea .itemList.halfSize {
    display: block;
  }
  .itemArea .itemList.longSize .item,
  .itemArea .itemList.halfSize .item {
    box-sizing: border-box;
    width: 100%;
  }
  .itemArea .itemList.nanacoBPImg .summary .nanaco .point strong{
     display:inline;
  }
}

@media screen and (max-width: 640px) {
 	.itemArea {
    background: transparent none;
  }
	.itemArea .itemList,
  .itemArea .itemList.longSize,
  .itemArea .itemList.halfSize,
  .itemArea .itemList.longSize.nanacoBP,
  .itemArea .itemList.halfSize.nanacoBP {
    display:block;
    margin: 0;
  }
	.itemArea .itemList .item,
  .itemArea .itemList.longSize .item,
  .itemArea .itemList.halfSize .item,
  .itemArea .itemList.longSize.nanacoBP .item,
  .itemArea .itemList.halfSize.nanacoBP .item {
    border-top: 0 none;
    border-bottom: 1px dotted #ccc;
    box-sizing: border-box;
    margin: 10px 0 0 0;
    padding: 0 10px 10px 10px;
    width: 100%;
	}
  .itemArea .itemList .item:nth-last-of-type(1){
    border-bottom: 0 none;
  }

  .itemArea .itemList .item .image,
  .itemArea .itemList.longSize .item .image,
  .itemArea .itemList.halfSize .item .image {
    box-sizing: border-box;
    float: left;
    margin: 0;
    padding:0;
    text-align: center;
    width: 40%;
    line-height:0;
  }
  .itemArea .itemList .item .image img{
    border:none; 
  }
	.itemArea .itemList .item .summary,
  .itemArea .itemList.longSize .item .summary,
  .itemArea .itemList.halfSize .item .summary,
  .itemArea .itemList.longSize.nanacoBP .item .summary,
  .itemArea .itemList.halfSize.nanacoBP .item .summary {
	  margin-left: 45%;
	}
  .itemArea .itemList.nanacoBP .item .summary .point {
    box-sizing: border-box;
    width: 40%;
	}

	.itemArea .itemList .item .summary .itemName strong {
    font-size: 1rem;
    font-weight: normal;
	}
	.itemArea .itemList .item .summary .itemPrice .nanaco,
	.itemArea .itemList .item .summary .itemPrice .launch,
  .itemArea .itemList .item .summary .nanaco .period,
  .itemArea .itemList .item .summary .nanaco .condition,
	.itemArea .itemList .item .summary .oderInfo .order,
	.itemArea .itemList .item .summary .oderInfo .preorder,
	.itemArea .itemList .item .summary .oderInfo .receive,
	.itemArea .itemList .item .summary .attribute,
	.itemArea .itemList .item .summary .text,
	.itemArea .itemList .item .summary .relatedLink{
	  display: none;
	}
	.itemArea .itemList.halfSize .item .summary .itemPrice .launch,
	.itemArea .itemList.halfSize .item .summary .itemPrice .region{
		display:inline;
	}
  .itemArea .itemList .item .summary .nanaco .point strong{
    display: inline; 
 	  font-size: 1.2rem;
  }
  .itemArea .itemList.nanacoBP .item .summary .nanaco .period,
  .itemArea .itemList.nanacoBPImg .item .summary .nanaco .period,
  .itemArea .itemList.nanacoBP .item .summary .nanaco .condition,
  .itemArea .itemList.nanacoBPImg .item .summary .nanaco .condition{
    display: block;
  }

	.itemArea .itemList .item .summary .itemPrice .price {
	  font-size: 1rem;
    margin-bottom:5px;
    padding-bottom:0;
	}
	.itemArea .itemList .item .summary .itemPrice .region{
    line-height:1.2;
    font-size: 0.7rem;
  }

  .itemArea .itemList.nanacoBP .item .summary .point {
    font-size:1.5rem;
  }
}


/* Item List - Category Block */

.subCategory .lineup {
  margin: 20px 0;
  text-align: right;
}

@media screen and (max-width: 640px) {
	.subCategory .lineup {
    margin: 20px 0;
    text-align: center;
	}
	.subCategory .lineup .button {
    box-sizing: border-box;
    width: 85%;
	}
}



/* --- Item Information Page --- */

#itemSummary {
  align-content: flex-start;
  align-items: stretch;
  border-bottom: 1px solid #ccc;
  display: -webkit-box; /* Android 2~4 */
  display: block; /* Old Android, iphone */
  display: -webkit-flex; /* Safari, iphone */
  display: flex;
  -webkit-flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify; /* Android 2~4 */
  -webkit-justify-content: space-between; /* Safari, iphone */
  justify-content: space-between;
  overflow: hidden;
}

#itemSummary .image {
/*  border-right: 1px dotted #ccc;
*/
  float: left;
  padding: 0 25px 0 0;
  text-align: center;
  width: 480px;
}
#itemSummary .image img {
  width: 100%;
  border:1px solid #d9d9d9;
  box-sizing:border-box;
}

#itemSummary .summary {
  float: right;
  padding: 0 0 20px 0;
  width: 420px;
}

#itemSummary .summary h1 {
  margin: 20px 0 0 0;
  color: #333;
}

#itemSummary .summary .itemPrice .price {
  color: #333;
  font-size: 150%;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0 0 20px 0;
}
#itemSummary .summary .itemPrice .netorder {
  background-color: #060;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 65%;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0 10px;
  vertical-align: middle;
  white-space: nowrap;
}

#itemSummary .summary dl.nanaco {
  border: 1px solid #f00;
  margin: 10px 0;
  padding: 10px;
  position: relative;
}
#itemSummary .summary dl.nanaco dt.point {
  color: #f00;
  font-size: 120%;
  font-size: 1.2rem;
  font-weight: bold;
}
#itemSummary .summary dl.nanaco dt img {
    vertical-align: middle;
}
#itemSummary .summary dl.nanaco dd:first-of-type {
    margin: 10px 0 0 0;
}
#itemSummary .summary dl.nanaco .period,
#itemSummary .summary dl.nanaco .condition {
  color: #666;
  font-size: 85%;
  font-size: 0.9rem;
  padding-top: 0;
}

#itemDetail .supplemental {
  margin: 20px 0;
}

#itemDetail dl.oderInfo {
  border-bottom: 1px dotted #ccc;
  margin: 20px 0;
  overflow: hidden;
}
#itemDetail dl.oderInfo dt {
  border-top: 1px dotted #ccc;
  clear: left;
  color: #666;
  float: left;
  padding: 0.5em;
  width: 10em;
}
#itemDetail dl.oderInfo dd {
  border-top: 1px dotted #ccc;
  margin: 0 0 0 11em;
  padding: 0.5em;
}

#itemDetail .allergy {
  margin: 20px 0;
}
#itemDetail .allergy table th,
#itemDetail .allergy table td {
  border: 1px solid #ccc;
  margin:0;
  padding: 0.5em;
}
#itemDetail .allergy table th {
  background-color: #eee;
  width: 10em;
}
#itemDetail .allergy table dl {
}
#itemDetail .allergy dl dt {
  color: #666;
  margin: 0.5em 0;
}
#itemDetail .allergy dl dt:before {
  color: #666;
  content: "●";
  font-weight: bold;
}
#itemDetail .allergy table dl dd {
  padding: 0 0 0 1em;
}
#itemDetail .allergy table small{
  color: #666;
  display: block;
}
#itemDetail .allergy table small::before{
  content:"※";}


#itemDetail .relatedLink {
  background-color: #eee;
  color:#960;
  margin: 20px 0;
  padding: 20px 20px 20px 3em;
  list-style-type:square;
}
#itemDetail .relatedLink li{
  margin-top:0.5em;
}
#itemDetail .relatedLink li:first-child{
  margin-top:0;
}

@media screen and (max-width: 959px) {
  #itemSummary .image {
    box-sizing: border-box;
    margin: 0 auto;
    width: 55%;
  }
  #itemSummary .summary {
    width: 40%;
  }
}

@media screen and (max-width: 640px) {
  #itemSummary {
    border: 0 none;
    display: block;
  }
  #itemSummary .image {
    border: 0 none;
    float: none;
    margin: 0 auto;
    padding: 0;
    width: 80%;
  }
  #itemSummary .summary {
    float: none;
    margin: 20px 0 0 0;
    padding:0;
    width: auto;
  }
  #itemSummary .summary .itemPrice .price {
    font-size: 120%;
    font-size: 1.2rem;
    font-weight: normal;
  }
  #itemSummary .summary dl.nanaco .point {
    font-size: 120%;
    font-size: 1.2rem;
    font-weight: normal;
  }
  #itemSummary .summary .text {
    color: #333;
    font-size: 100%;
    font-size: 1rem;
    margin-top: 20px;
  }
  #itemDetail dl.oderInfo dt {
    float: none;
    padding: 0.5em 0.5em 0;
    width: auto;
  }
  #itemDetail dl.oderInfo dd {
    border: medium none;
    margin: 0;
    padding: 0 0.5em 0.5em;
  }
}