@charset "UTF-8";

@import "defaults.css";
@import "form.css";


/***********************************************
 * 基本
 ***********************************************/
html, body, #wrapper {height: 100%;}
body > #wrapper {height: auto; min-height: 100%;}
#wrapper-inner {padding-bottom: 120px;}  /* must be same height as the footer */
#foot-wrapper {
  position: relative;
	margin-top: -120px; /* negative value of footer height */
	height: 120px;
	clear:both;
}

body {
	font-size: 0.75em;
	line-height: 1.5em;
	color: #333333;
  background: url(../img/back_body.gif) center top;
}
body#popup {background: #FFFFFF;}

a:link, a:visited { color: #009ECB; text-decoration: none; }
a:hover, a:active { color: #FF3366; text-decoration: underline; }
em {color: #E84E7D;font-style: normal;}
strong {font-weight: bold;}


/***********************************************
 * 共通
 ***********************************************/
.attention { color: #E84E7D; }
.message { border: 2px dotted #F7F2E3; padding: 10px; margin: 0 0 10px; }
.note {font-size: 0.9em;}
.float-right {float:right;}
.float-left {float:left;}
.align-right {text-align:right;}
.align-left {text-align:lef;t}
.align-center {text-align:center;}

/* テーブル */
#main table, #popup table {border-collapse:collapse;width: 100%;font-size: 1em;}
#main table.form, #main table.list, #popup table.form, #popup table.list {margin: 0 0 10px;}
#main th, #main td, #popup th, #popup td {border: 1px solid #D8D2CB;padding: 8px;}
#main th, #popup th {font-weight: normal;color: #333333;background: #F7F2E3;}
#main table.form th, #popup table.form th {width: 160px; text-align: left;}
#main table.list th, #popup table.list th {width: auto; text-align: center;}
#main table.list td, #popup table.list td {text-align:center;}
#main td.price, #main table.list td.price, #popup td.price, #popup table.list td.price {text-align: right;}
#main th.result, #main table.list th.result, #popup th.result, #popup table.list th.result {text-align: right;}
#main td.address, #main table.list td.address, #popup td.address, #popup table.list td.address {text-align: left;}
#main td.name, #main table.list td.name, #popup td.name, #popup table.list td.name {text-align: left;}

#main td p select, #popup td p select {margin: 0 0 0.5em;}

/* 見出し */
h2 {
  border-top: 2px solid #009ECB;
  border-bottom: 2px solid #009ECB;
  margin: 0 0 20px;
  padding: 20px 0 20px 20px;
  font-size: 15px;
  font-weight: bold;
  color: #009ECB;
}

#title-present, #title-present-apply, #title-present-elected, #title-present-agreement,
#title-trade-law, #title-entry-regist, #title-entry-kiyaku, #title-mypage,
#title-monthly-special, #title-station, #title-takumi, #title-astrology,
#title-member, #title-agreement, #title-natts, #title-qanda,
#title-back-number, #title-site-map, #title-ad {
  border: none;
  margin: 0 0 20px;
  padding: 0;
  width: 635px;
  height: 70px;
  text-indent: -9999em;
  background-image: url(../img/titles.gif);
}
/* 今月のプレゼント */
#title-present {background-position: 0 0;}
/* プレゼント応募 */
#title-present-apply {background-position: 0 -70px;}
/* プレゼント当選者発表 */
#title-present-elected {background-position: 0 -140px;}
/* プレゼント応募規約 */
#title-present-agreement {background-position: 0 -210px;}
/* 特定商取引法の表記 */
#title-trade-law {background-position: 0 -280px;}
/* NATTS新規会員登録 */
#title-entry-regist {background-position: 0 -350px;}
/* NATTS会員ご利用規約 */
#title-entry-kiyaku {background-position: 0 -420px;}
/* MYページ */
#title-mypage {background-position: 0 -490px;}
/* 今月の特集 */
#title-monthly-special {background-position: 0 -560px;}
/* 駅前通 */
#title-station {background-position: 0 -630px;}
/* 沿線匠図鑑 */
#title-takumi {background-position: 0 -700px;}
/* 今月の星占い */
#title-astrology {background-position: 0 -770px;}
/* NATTS会員募集 */
#title-member {background-position: 0 -840px;}
/* 規約一覧 */
#title-agreement {background-position: 0 -910px;}
/* NATTSについて */
#title-natts {background-position: 0 -980px;}
/* Q&A */
#title-qanda {background-position: 0 -1050px;}
/* バックナンバー */
#title-back-number {background-position: 0 -1120px;}
/* サイトマップ */
#title-site-map {background-position: 0 -1190px;}
/* NATTS・P+natts広告のご案内 */
#title-ad {background-position: 0 -1260px;}

h3#subtitle-mypage, h3#subtitle-present {
  background: url(../img/titles.gif) 0 -1330px no-repeat;
  width: 635px;
  height: 50px;
  margin: 0 0 20px;
  text-indent: 20px;
  line-height: 50px;
  font-weight: bold;
  font-size: 1.2em;
  letter-spacing: 0.5em;
  color: #666666;
}
#page-shopping h3, #page-mypage .page-body h3 {font-weight:bold;margin: 0 0 0.5em;padding: 0 10px 0.5em;border-bottom: 1px dotted #D8D2CB;}


/***********************************************
 * レイアウト
 ***********************************************/
#head-wrapper {background: url(../img/back_head_wrapper.gif) 0 0 repeat-x;height: 85px;text-align:center;}
#head {width: 980px;margin: 0 auto;height: 85px;position: relative;background: url(../img/back_head_contents.gif);}
#body {width: 930px;margin: 0 auto;padding: 20px 0 15px;}
#left {width: 260px;float: left;}
#right {width: 260px;float: right;}
#main-wrapper {width: 645px;float:right;}
.one-column #main {width: 930px;}
.two-column-right #main {width: 645px;float: left;}
.two-column-left #main {width: 645px;float: right;}
.two-column-right #two-column-adjuster {padding-left: 10px;}
.two-column-left #two-column-adjuster {padding-right: 10px;}
.three-column #main {width: 360px;float: left;}
#main-bottom {padding: 10px 0 0;}
#foot-wrapper { background: url(../img/back_foot_wrapper.gif) 0 0 repeat-x;height: 120px;text-align:center;}
#foot {width: 980px;margin: 0 auto;height: 120px;position: relative;background: url(../img/back_foot_contents.gif);}


/***********************************************
 * ヘッダー
 ***********************************************/
h1 { position: absolute;top: 20px;left: 40px;height: 49px;width: 200px; }
#primary-links {
  width: 439px;
  height: 40px;
  background: url(../img/sprite.gif) 0 0 no-repeat;
  position: absolute;
  top: 24px;
  left: 275px;
}
#primary-links li {position: absolute;}
#primary-links li a {}
#primary-links-regist, #primary-links-login, #primary-links-mypage, #primary-links-logout {text-indent: -9999em;top:10px;height: 20px;}
#primary-links-regist a, #primary-links-login a, #primary-links-mypage a, #primary-links-logout a {display: block;height: 20px;background-image: url(../img/sprite.gif);}
#primary-links-regist {width: 120px;left:11px;}
#primary-links-regist a {width: 120px;background-position: 0 -40px;}
#primary-links-regist a:hover {background-position: 0 -60px;}
#primary-links-login {width: 120px;left:146px;}
#primary-links-login a {width: 120px;background-position: -120px -40px;}
#primary-links-login a:hover {background-position: -120px -60px;}
#primary-links-mypage {width: 130px;left:65px;}
#primary-links-mypage a {width: 130px;background-position: -240px -40px;}
#primary-links-mypage a:hover {background-position: -240px -60px;}
#primary-links-logout {width: 130px;left:244px;}
#primary-links-logout a {width: 130px;background-position: -370px -40px;}
#primary-links-logout a:hover {background-position: -370px -60px;}
#primary-links-reminder {top: 10px;left: 277px;font-size: 11px;}

/* Googleサイト内検索 */
#search {position: absolute; top: 15px;right: 25px;}
#btn-search-submit {
  float: right;
  display: block;
  height: 25px;
  width: 50px;
  margin: 0 0 0 5px;
  background-image: url(../img/sprite.gif);
  background-position: -480px -110px;
  text-indent: -9999em;
}
#btn-search-submit:hover {background-position: -480px -135px;}
#search-keyword {height: 22px;width: 150px;float:right;}

#secondary-links {position: absolute;top: 55px;right: 25px;text-align: right;}
#secondary-links li {display: inline;padding: 0 12px 0 8px;border-right: 1px solid #009ECB;}
#secondary-links li.last {padding: 0 0 0 8px;border:none;}

/***********************************************
 * フッター
 ***********************************************/
#foot-links {text-align: center;position: absolute;top: 10px;left: 0;width: 100%;}
#foot-links li {display:inline;padding: 0 12px;border-right: 1px solid #009ECB;}
#foot-links li.last {border:none;}
#foot-nankai {width: 390px;height: 30px;background: url(../img/sprite.gif) 0 -80px no-repeat;position: absolute;top: 40px;left: 295px;}
#foot-nankai h3 {position: absolute;top: 6px;left: 11px;width: 90px;height: 18px;text-indent: -9999em;}
#foot-nankai h3 a {display: block;width: 90px;height: 18px;background: url(../img/sprite.gif) -440px 0;}
#foot-nankai h3 a:hover {background-position: -440px -18px;}
#foot-nankai ul {position: absolute;left: 118px;height: 30px;}
#foot-nankai li {float:left;height: 30px;line-height: 30px;font-size: 11px;color:#FFFFFF;}
#foot-nankai li a {float:left;display:block;padding: 0 12px;}
#foot-nankai li a:link, #foot-nankai li a:visited {color: #FFFFFF;}
#foot-nankai li a:hover, #foot-nankai li a:active {color: #FFFFFF;}
#copyright {position:absolute;bottom: 15px;left:0;width: 100%;line-height:1.2em;font-size: 10px;}
#ssl-seal {position:absolute;top: 40px;right: 25px;width: 100px;height: 50px;}


/***********************************************
 * 商品詳細
 ***********************************************/
#detail-main {padding: 0 10px 0 0;}
#detail-main h3 {font-weight: bold;font-size: 1.4em;margin: 0 0 10px;}
#detail-image {float:left;width: 250px;}
#detail-misc {float:right;width: 315px;}
#detail-icon li {display:inline;margin: 0 5px 5px 0;}
#detail-main-comment {margin: 0 0 10px;}
#detail-code {color: #999999;text-align: right;margin: 0 0 10px;}
#detail-price {text-align: right;margin: 0 0 10px;}
#detail-price span {font-size: 1.4em;font-weight: bold;letter-spacing: 0.5em;}
#detail-main #form1 {background: #F7F2E3;border: 1px solid #D8D2CB;padding: 10px 0;}
#detail-main #form1 .btn-one {margin: 0;}
#detail-class1, #detail-class2 {margin-bottom: 10px;}
#detail-class1 dt, #detail-class1 dd, #detail-class2 dt, #detail-class2 dd  {padding-left: 68px;}
#detail-qty {padding: 0 0 10px 68px;margin: 0 0 10px;border-bottom: 1px dotted #D8D2CB;}

.detail-sub {padding: 20px 10px 0 0;}
.detail-sub h3 {font-weight: bold;font-size: 1.2em;margin: 0 0 10px;}
.detail-sub-image {float:left;width: 250px;}
.detail-sub-misc {float:right;width: 315px;}


/***********************************************
 * 商品一覧
 ***********************************************/
.list-rows {margin: 0 0 20px;}
.list-rows li {display:inline;margin: 0 10px 0 0;}

.list-item {padding: 0 10px 0 0;margin: 0 0 20px;}
.list-item h3 {font-weight: bold;font-size: 1.4em;margin: 0 0 10px;}
.list-item h3 a:link, .list-item h3 a:visited {color: #333333;}
.list-item-data {}
.list-item-image {width: 130px;float: left;}
.list-item-misc {width: 435px;float: right;margin: 0 0 0.5em;}
.list-item-icon li {display:inline;margin: 0 5px 5px 0;}
.list-item-comment {margin: 0 0 15px;padding: 20px 0 15px;border-bottom: 1px dashed #D8D2CB;}
.list-item-price {text-align: right;}
.list-item-price span {font-size: 1.4em;font-weight: bold;letter-spacing: 0.5em;}
.list-item-form {border: 1px solid #D8D2CB;background: #F7F2E3;padding: 10px;}
.list-item-form dl {text-align: right;}
.list-item-form dl.with-class2 {margin: 0 0 10px;}
.list-item-form dl.only-class1 {padding: 10px 0 0; width: 368px;float: left;}
.list-item-form dt, .list-item-form dd {display:inline;}
.list-item-form dt {margin: 0 5px 0 20px;}
.list-item-cart {float: right;width: 180px;height: 30px;}
.list-item-cart a.btn-product-cart {display: block;width: 180px;height: 30px;text-indent: -9999em;}


/***********************************************
 * かごの中、購入手続き
 ***********************************************/
#cart-products .action {width: 50px;}
#cart-products .image {width: 90px;}
#cart-products .price {width: 120px;}
#cart-products .qty {width: 90px;}
#cart-products .name {width: 380px;}

#page-shopping .box {margin: 0 0 20px;}
#shopping-flow {width: 930px;height: 50px;margin: 0 auto 20px;background-image: url(../img/flow.gif);position: relative;}
#shopping-flow.step1 {background-position: 0 0;}
#shopping-flow.step2 {background-position: 0 -50px;}
#shopping-flow.step3 {background-position: 0 -100px;}
#shopping-flow.step4 {background-position: 0 -150px;}
#shopping-flow li {text-indent: -9999em;position:absolute;}

#shopping-payment .action {width: 60px;}
#shopping-payment th.name {width: 820px;}
#shopping-products .image {width: 90px;}
#shopping-products .price {width: 120px;}
#shopping-products .qty {width: 90px;}
#shopping-products .name {width: 460px;}


/***********************************************
 * プレゼント
 ***********************************************/
#present-news {margin: 0 10px 20px;padding: 10px;background: #F7F2E3;}
#present-conditions dt {float:left;width: 80px;height: 20px;background-image: url(../img/sprite.gif);clear:both;text-indent: -9999em;}
#present-conditions dt#present-conditions-terms {background-position: 0 -170px;}
#present-conditions dt#present-conditions-qty {background-position: -80px -170px;}
#present-conditions dt#present-conditions-winner {background-position: -160px -170px;}
#present-conditions dd {border-bottom: 1px dotted #CCCCCC;margin: 0 0 0.5em;padding: 0 0 0.5em 90px;}
#present-link-winner {text-align:right;}

.present-item {margin: 0 0 20px;}
.present-title {background: #009ECB;padding: 0 10px 0 0;margin: 0 0 15px;color: #FFFFFF;}
.present-title-no {float: left;width: 70px;}
.present-title-body {float:right;width: 510px;}
.present-image {width: 170px;float: right;text-align: right;}
.present-comment {width: 400px;float: left;}
#main .present-comment table {width: auto;}
#main .present-comment th, #main .present-comment td {border: none;padding: 0px;}
#main .present-comment th {background: none;}

#present-action {margin: 0 10px 20px;padding: 20px 10px 10px;background: #F7F2E3;}
#present-action p {text-align:center;}
#present-banner-regist {text-align:center;}

#table-present-select, #table-present-address, #table-present-note, #table-present-agree {margin: 0 0 10px;}
#table-present-select .no {width: 25px;}
#table-present-select .date {width: 120px;}
#table-present-select .action {width: 65px;}
#table-present-select td.name {text-align:left;}


/***********************************************
 * MYページ
 ***********************************************/
#page-login #registered {margin: 0 0 30px;}
#page-login #anonymous {margin: 0 10px;padding: 10px 0;background: #F7F2E3;}
#page-login #anonymous h3 {font-weight:bold;margin: 0 0 0.5em;padding: 0 10px 0.5em;border-bottom: 1px dotted #D8D2CB;}
#page-login #anonymous p {margin: 0 10px;}
#page-login .leadtext {margin: 0 0 0.5em;}

/* 購入履歴 */
#mypage-history .date {width: 240px;}
#mypage-history .number {width: 110px;}
#mypage-history .type {width: 90px;}
#mypage-history .price {width: 90px;}
#mypage-history .action {width: 60px;}

.history-condition {border: 1px dotted #D8D2CB;padding: 10px;margin: 0 0 10px;}
#mypage-order-products .number {width: 60px;}
#mypage-order-products .name {width: 315px;}
#mypage-order-products .price {width: 90px;}
#mypage-order-products .qty {width: 40px;}

/* お届け先 */
#mypage-delivery .number {width: 50px;}
#mypage-delivery .adress {width: 420px;}
#mypage-delivery .action {width: 60px;}


/***********************************************
 * ページ
 ***********************************************/
.page-body {padding: 0 20px;}


/***********************************************
 * ブロック
 ***********************************************/
.block-wrapper {margin: 0 0 10px;}

/* メニュー */
#block-menu-left {margin: 0 0 20px;}

/* MYページ */
#block-mypage li {
  background: url(../img/icon_arrow_circle_right.gif) 10px center no-repeat;
  margin: 0 0 10px 0;
  padding: 0 0 0 28px;
}
/* カテゴリー */
#block-category ul {padding: 0 0 0 10px;}
#block-category ul ul {padding: 10px 0 0 10px;}
#block-category li {
  background: url(../img/icon_arrow_circle_right.gif) left top no-repeat;
  margin: 0 0 10px 0;
  padding: 0 0 0 18px;
}


/***********************************************
 * ポップアップ
 ***********************************************/
.popup-body {padding: 0 20px 20px;}


/***********************************************
 * P+nattsお届けサービスお申し込み
 ***********************************************/
#popup.pnatts h2 {height: 110px;margin: 0 0 10px;padding: 0;border: none;text-indent:-9999em;background: url(../img/pnatts_title_popup.gif) top center no-repeat;}
#popup.pnatts h3 {height: 70px;width: 636px;margin: 0 0 20px;text-indent: -9999em;background: url(../img/pnatts_title_delivery.gif);}
#popup.pnatts h4 {font-weight: bold;color: #E84E7D;margin: 0 0 3px;padding: 3px 10px;border-bottom: 1px dotted #D8D2CB;}
#popup.pnatts th {background: #F4F4F4;}
#popup.pnatts ul {margin: 0 10px;}
#popup.pnatts ul.primary li {list-style-type: disc;list-style-position: outside;margin: 0 0 0 1.5em;}
#popup.pnatts ul.secondary li {font-size: 0.9em;}
#popup.pnatts #popup-wrapper {border-bottom: 5px solid #E84E7D;background: url(../img/pnatts_head_back.gif) 0 0 repeat-x;}
#popup.pnatts .popup-body {padding: 0 32px 10px;}
#popup.pnatts .inner {margin: 0 20px 20px;}
#popup.pnatts .leadtext {text-align: center;font-weight: bold;margin: 0 0 20px;}
#popup.pnatts .message { border: none; margin: 0 0 20px; padding: 10px 0; background: #F4F4F4; }
#popup.pnatts .message p {margin: 0 10px;}
#popup.pnatts #copyright {position: relative;margin: 0 0 20px;padding: 20px 0 0;line-height:1.2em;font-size: 0.9em;color: #666666;text-align:center;}
#popup.pnatts .btn-common-submit, #popup.pnatts .btn-common-confirm,
#popup.pnatts .btn-common-close, #popup.pnatts .btn-sub-address {background-image: url(../img/buttons_pnatts.gif);}
#popup.pnatts a.btn-common-submit {background-position: 0 0;}
#popup.pnatts a.btn-common-submit:hover {background-position: 0 -30px;}
#popup.pnatts a.btn-common-confirm {background-position: -180px 0;}
#popup.pnatts a.btn-common-confirm:hover {background-position: -180px -30px;}
#popup.pnatts a.btn-common-close {background-position: -360px 0;}
#popup.pnatts a.btn-common-close:hover {background-position: -360px -30px;}
#popup.pnatts a.btn-sub-address {background-position: -540px 0;}
#popup.pnatts a.btn-sub-address:hover {background-position: -540px -18px;}


/***********************************************
 * ボタン
 ***********************************************/
#button-mypage-change, #button-mypage-refusal {
  display: block;
  height: 30px;
  width: 240px;
  text-indent: -9999em;
  background-image: url(../img/sprite.gif);
}
/* 会員登録内容変更 */
#button-mypage-change {background-position: 0 -110px;}
#button-mypage-change:hover {background-position: -240px -110px;}
/* 退会手続き */
#button-mypage-refusal {background-position: 0 -140px;}
#button-mypage-refusal:hover {background-position: -240px -140px;}

/* 住所自動入力 */
.form-personal-input-zip a.btn-sub-address {
  float:left;
  margin: 3px 5px 0 0;
  display: block;
  height: 18px;
  background-repeat: no-repeat;
  text-indent: -9999em;
}