/* CSS for top-page */

* {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'ＭＳ Ｐゴシック', 'sans-serif';
}

body {
    width : 1000px;
    margin: 0 auto;
    background-color: #fff;
    color: #333;    /* position: relative;  IE*/
    -webkit-text-size-adjust: 100%;
}

a {
    text-decoration: none;
    font-weight: 500;
}

img {
    border-width: 0px;
}

a.button {
    color: #fff;
    padding: 3px 6px 1px 5px;
    background: #132947;
}

div.clear {
    height: 0px;
    clear: both;
}

div.title {
    background-position: right top;
    background-repeat: no-repeat;
    margin-bottom: 3px;
    height: 130px;
    background-image: url(/shop/img/head1-2.jpg);
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

div.title  span {
    color: #666;
    font-size: 10px;
}
div.title_left {
    width: 320px;
    float: left;
    margin-top: 8px;
}
div.title_bottom {
    width: 800px;
    float: left;
    margin-left: 8px;
}
div.title_center {
    position: relative;
    width: 400px;
    float: left;
}
div.title_right {
    width: 239px;
    float: left;
}
div.title2area {
    position: relative;
    height: 66px;
    width: 980px;
    margin: 0 auto 0 auto;
}
div.top_contents {
    position: relative;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}
div.top_footer {
    position: relative;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}
div.title2 {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    height: 35px;
    border: #CFCFCF 1px solid;
    background: #CFCFCF;
    font-weight: 800;
}

div.title2 div.whats_new {
    display: inline-block;
    width: 634px;
    margin: 8px 0 0px 40px;
    text-align: left;
    color: #1C2C5C;
    font-size: 16px;
    font-weight: 800;
}

div.title2 select {
    width: 77%;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 6px;
    margin-left: 5px;
    float: left;
}

div.title2 div.direct_code {
    margin-left: 30px;
    float: left;
}
div.title2 div.direct_code .title {
    color: #1C2C5C;
}
div.title2 div.direct_code .input {
}
div.title2 div.direct_code .button {
    margin-left: 3px;
}
div.title2 #mobile_link {
  display: inline-block;
  width: 300px;
  background-color: #fff;
  border: solid 1px #777;
  text-align: center;
}
div.title2 #mobile_link a {
  font-size: 22px;
  margin-left: 10px;
  font-weight: 600;
  color: #b62421;
}

div.link_area {
    height: 26px;
    padding: 0 9px;
    margin-bottom: 4px;
    background-position: top 1px right 6px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}
div.link_area form {
    float: left;
    border: solid 1px #777;
    width: 572px;
    background-position: top 4px right 6px;
    background-repeat: no-repeat;
    background-image: url(/shop/mobile_images/search_mark.svg);
    background-size: 16px 16px;
}
div.link_area form.logined {
    width: 470px;
}
div.link_area form input[type="text"] {
    width: 370px;
    height: 20px;
    border: none;
    padding-left: 4px;
    font-size: 14px;
}
div.link_area form.logined input[type="text"] {
    width: 340px;
}
div.link_area form input[type="text"]:focus {
    border: none;
    background-color: #fff;
    outline: 0;
    box-shadow: none;
}
div.link_area form input[type="text"]:-webkit-autofill,
div.link_area form input[type="text"]:-webkit-autofill:hover,
div.link_area form input[type="text"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    /*transition: background-color 5000s ease-in-out 0s;*/
}
div.link_area form input[type="text"]::placeholder {
  font-size: 13px;
  line-height: 12px;
}
div.link_area form span {
    display: inline-block;
    width: 80px;
    height: 21px;
    background-color: #777;
    padding: 3px 0 0 0;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #ececec;
}
div.link_area div.button {
    margin: 0 0 0 2px;
    width: 100px;
    float: left;
    background-color: #777;
    padding: 5px 0 4px 0;
    text-align: center;
}
div.link_area a {
    font-weight: 600;
}
div.link_area .link1 {
    color: #f4c9c6;
}
div.link_area .link2 {
    color: #b62421;
}
div.link_area .link3 {
    color: #ffffff;
}
div.link_area .link4 {
    color: #E6DDBA;
}
div.link_area .link5 {
    color: #eef9da;
}
div.link_area .link6 {
    color: #CFCFCF;
}
div.link_area .link7 {
    color: #f7a5c9;
}

div.photo_landscape {
  overflow: hidden;
  width: 487px;
  height: 247px;
}

div.photo_portrait {
    overflow: hidden;
    width: 245px;
    height: 487px;
}

div.top_footer_left {
    float: left;
    min-height: 172px;
    width: 540px;
    background-image: url(/shop/img-period/catalog.jpg);
    background-position: 0px 12px;
    background-repeat: no-repeat;
    padding: 4px 0 2px 145px;
}
div.catalog_info {
    margin-left: 20px;
    padding: 8px 0 8px 0px;
    border-bottom: #CFCFCF 1px solid;
    font-size: 12px;
}

div.top_footer_right {
    float: right;
}
div.top_footer_right div.about {
    text-align: right;
}
div.top_footer_right div.about  a {
    color: #333;
}

div.top_footer_right div.about a:hover {
    color: #FC4C27;
    cursor: pointer;
}


div.top_copyright {
    background-image: url(/shop/img/title-bottom_2x.png);
    background-position: center 8px;
    background-repeat: no-repeat;
    background-size: 93px 32px;
    padding: 6px 0 6px 0;
    border-top: #CFCFCF 1px solid;
    border-bottom: #CFCFCF 1px solid;
    margin-bottom: 10px;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}
div.top_copyright div.text {
    margin: 36px 0 0 0;
    color: #777;
    text-align: center;
    font-size: 10px;
}
div.top_business_info {
    margin: 8px 0 20px 20px;
}

div.top_business_info div.office {
    width: 280px;
    float: left;
}
div.top_business_info div.hours {
    width: 240px;
    float: left;
}
div.top_business_info div.hours dt {
    width: 60px;
    float: left;
}
div.top_business_info div.hours dd {
    margin-left: 60px;
}

div.top_ssl_icons {
    margin-top: -3px;
    text-align: right;
}

div.social_tags {
}
div.social_tags div {
    float: right;
}

div.social_tags div.twitter {
    margin-right: -25px;
}


/* ---  memu  ---  */

table.menu_box {
    border-collapse:collapse;
    border-spacing:0;
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.menu_box td, .menu_box td.photo {
    width: 245px;
    height: 243px;
    border: #CFCFCF 1px solid;
    vertical-align: top;
}
.menu_box tr.last_row td {
    height: 144px;
}
.menu_box  ul {
    margin-top: 5px;
    list-style: none;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 3px;
}
.menu_box li {
    font-weight: 400;
    line-height: 190%;
    background-repeat: no-repeat;
    background-position: left center;
    margin-bottom: 1px;
}
.menu_box  a.m {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    margin-left: 18px;
}
.menu_box  a.m:hover {
    color: #FC8C67;
}

.menu_link {
    padding-top: 8px;
    padding-right: 0;
    padding-left: 5px;
}
.menu_link > span {
    padding-left: 0px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.item1 > span {
    color: #913347;
}
.item2 > span {
    color: #C56134;
}
.item3 > span{
    color: #6B5937;
}
.item4 > span {
    color: #95B040;
}
.item5 > span {
    color: #5f9d74;
}
.item6 > span {
    color: #EBAB60;
}
.item7 > span {
    color: #666666;
}

.menu_box .menu_link li:hover  {
    background-image:url(/shop/img/TOP-BTM-0.gif);
}
.menu_box .item1 li {
    background-image:url(/shop/img/TOP-BTM-1.gif);
}
.menu_box .item2 li {
    background-image:url(/shop/img/TOP-BTM-3.gif);
}
.menu_box .item3 li {
    background-image:url(/shop/img/TOP-BTM-2.gif);
}
.menu_box .item4 li {
    background-image:url(/shop/img/TOP-BTM-8.gif);
}
.menu_box .item5 li {
    background-image:url(/shop/img/TOP-BTM-GIFT.gif);
}
.menu_box .item6 li {
    background-image:url(/shop/img/TOP-BTM-BOOK.gif);
}
.menu_box .item7 li {
    background-image:url(/shop/img/TOP-BTM-7.gif);
}


div.login_info {
    position: absolute;
    top: 2px;
    left: auto;
    float: right;
    text-align: right;
    color: #FF8000;
}
div.login_info a {
    color: #FF8000;
    font-weight: 400;
    text-decoration: underline;
}
div.login_info span.customer_info {
    margin-right: 10px;
}

/* 横スクロール枠 */
div.x_data_area {
  width: 978px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #CFCFCF;
  border-bottom: 7px solid #CFCFCF;
  border-left: 1px solid #CFCFCF;
}

/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
  width: 977px;
  border-left: 1px solid #CFCFCF;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
/* テーブル */
.widthxscroll {
  width: auto;
}

table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}

table.data th,
table.data td {
  padding: 2px;
  border-right: 1px solid #CFCFCF;
  border-bottom: 1px solid #CFCFCF;
}

table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}

table.data th {
  border-top: 1px solid #CFCFCF;
  background: #EEF1F4;
}

table.data th,
table.data td {
  min-width: 290px;
  overflow: hidden; /* データが幅を超えたとき非表示に */
  white-space: nowrap; /* データの折り返しを防止 */
}

.snslink {
  padding: 0 0 10px 12px;
}
/* 横スクロール枠 モバイル版 */

.top {
  padding-top: 146px; // 194px;
}
.top-info {
  padding: 0px 0 0 0;
}
.top-info__title {
  display: none;
}
.top-info__content {
  width: 976px;
  display: flex;
  overflow-y: scroll;
  list-style: none;
  border-left: solid 2px #dcdcdc;
  border-right: solid 2px #dcdcdc;
  border-bottom: solid 8px #dcdcdc;
}
.top-info__content-item {
  min-width: 290px;
  padding: 2px 5px 20px 5px;
  flex: 0 1 auto;
  border-right: solid 1px #dcdcdc;
  text-align: center;
}
.top-info__content-item img {
  max-height: 160px;
}
.top-info__content-item p {
}