@CHARSET "EUC-JP";

/* Layout
---------------------------------------------------- */
.graduate {
  text-align: center;
  padding: 25px 0;
}

.graduate a {
  font-size: 26px;
  color: #ff0000 !important;
  text-decoration: underline;
}

.left-navi {
  width: 192px;
  padding-top: 10px;
  position: relative;
}

#content .main {
  padding: 5px 8px 0;
  width: 522px;
  position: relative;
  z-index: 10;
}

.shop-info {
  width: 220px;
  padding-top: 10px;
  position: relative;
}


/* Common Style
---------------------------------------------------- */

h2 {
  margin-bottom: 10px;
  padding: 5px;
  position: relative;
  background-color: #d8f5ff;
  font-weight: bold;
}

.main h2 {
  margin-bottom: 0;
}

h2 a.more {
  position: absolute;
  top: 5px;
  right: 5px;
  font-weight: normal;
}


/* Left-navi
---------------------------------------------------- */

p.new-article {
  margin-bottom: 5px;
}

p.new-article a span,
p.bookmark a {
  margin-bottom: 2px;
  padding: 10px 10px 10px 35px;
  border-radius: 5px;
  display: block;
  position: relative;
  color: #fff;
  background-color: #f79256;
  font-size: 14px;
  text-align: left;
  transition: background-color 0.3s ease-in-out;
}

p.new-article a span::before,
p.bookmark a::before {
  content: url('/images/shop/common/icon-search.png');
  margin-top: -7px;
  position: absolute;
  top: 50%;
  left: 10px;
}

p.new-article a span:hover {
  background-color: #ffa666;
}

p.new-article a:hover,
p.bookmark a:hover {
  text-decoration: none;
}

p.bookmark a {
  background-color: #aed028;
}

p.bookmark a:hover {
  background-color: #c1e23f;
  text-decoration: none;
}

/* pick-up */
div.pick-up {
  margin-top: 10px;
  background-color: #ffffcf;
}

div.pick-up ul li {
  padding-bottom: 10px;
  text-align: center;
}

div.pick-up ul li a img {
  margin-bottom: 5px;
  display: inline-block;
}


/* Main
---------------------------------------------------- */

/* top-info */
div.top-info {
  margin-bottom: 10px;
  border: 1px #ccc solid;
  background: url('/images/shop/index/main/bg-top-info.png') no-repeat 0 100%;
  text-align: left;
}

div.top-info a {
  padding: 9px 10px 9px 63px;
  border-top: 1px #fff solid;
  display: block;
  background: url('/images/shop/index/main/icon-important.gif') no-repeat 12px 9px;
  font-size: 1.2em;
}

/* roll */
#roll {
  overflow: hidden;
}

#roll img {
  width: 100%;
}

#roll .slick-slide,
#roll .slick-current {
  filter: brightness(0.4);
  transition: all 0.5s ease-in-out;
}

#roll .slick-current {
  filter: brightness(1);
  z-index: 30;
}

ul.slick-dots {
  margin-bottom: 10px;
  border: 1px #ccc solid;
  display: flex;
}

ul.slick-dots li {
  padding: 5px;
  border-right: 1px #ccc solid;
  width: 104px;
  line-height: 1.3;
  color: #000;
  background: linear-gradient(0deg, #f3f3f3, #fff);
  box-sizing: border-box;
}

ul.slick-dots li:last-child {
  border-right: none;
}

ul.slick-dots li.slick-active,
ul.slick-dots li:hover {
  color: #f00;
  background: none;
  background-color: #ff0;
  cursor: pointer;
}

/* index-beginner */
.main .index-beginner {
  margin-bottom: 10px;
  height: 52px;
  background: url('/images/shop/index/main/bg-beginner.png') no-repeat 0 0;
}

.main .index-beginner a {
  padding: 10px 10px 10px 50px;
  display: block;
  color: #000;
  font-size: 1.2em;
}

.main .index-beginner a:hover {
  text-decoration: none;
}

/* news */
ul#news {
  margin-bottom: 10px;
  height: 110px;
  overflow-y: auto;
  list-style: none;
}

ul#news li {
  padding: 5px 0 5px 80px;
  border-bottom: 1px solid #ccc;
  position: relative;
  line-height: 1.3;
  text-align: left;
}

ul#news li:last-child {
  border-bottom: 0;
}

ul#news li > span {
  display: inline-block;
  position: absolute;
  left: 0;
}

ul#news li p {
  display: inline;
}

ul#news li.new::after {
  content: 'NEW';
  margin-left: 5px;
  padding: 0 2px;
  color: #fff;
  background-color: #f00;
  font-weight: bold;
  font-size: 10px;
}

/* index-banner */
.main ul.index-banner {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

/* imakore */
.main #imakore-box {
  margin-bottom: 20px;
}

.main #imakore {
  padding: 0 6px;
  width: 510px;
  overflow: hidden;
}

.main #imakore li {
  padding: 10px 10px 10px;
  width: 150px;
  float: left;
  position: relative;
}

.main #imakore li img.new {
  position: absolute;
  top: 10px;
  left: 10px;
}

.main #imakore li a,
.main #imakore li span {
  display: block;
}

.main #imakore li span {
  padding: 5px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 140px;
  color: #fff;
  background: url('/images/shop/index/main/bg-imakore.png') repeat 0 0;
  white-space: nowrap;
  overflow: hidden;
  font-weight: bold;
  font-size: 1.1em;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.main #imakore-box p.btn-more {
  text-align: center;
}

.main #imakore-box p.btn-more a,
.opinion div.notice a.faq {
  margin: 0 auto;
  padding: 10px 0;
  border: 1px solid #bbb;
  border-radius: 5px;
  display: block;
  width: 190px;
  color: #000;
  background: linear-gradient(0deg, #eee, #fff);
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

.main #imakore-box p.btn-more a:hover,
.opinion div.notice a.faq:hover {
  color: #00a0e9;
  text-decoration: none;
}

/* calender */
div#callender {
  margin-bottom: 20px;
  overflow: hidden;
  width: 522px;
}

div#callender table {
  margin-top: 5px;
  padding: 0 4px;
  width: 172px;
  float: left;
  text-align: center;
}

div#callender table thead tr td.month{
  padding: 2px 0;
  font-weight: bold;
  text-align: center;
}

div#callender table thead tr td.week{
  background-color: #eee;
  padding: 2px 0;
}

div#callender table tbody tr td{
  color: #ccc;
  padding: 2px 0;
}

div#callender table tbody tr td a {
  color: #06f;
  text-decoration: none;
}


div#callender table tbody tr td.even {
  background-color: #ffffcf;
}

.callender-popup {
  padding: 5px 1px 0 1px;
  position: absolute;
  width: 149px;
  height: 70px;
  background-image: url("/images/shop/index/main/baloon.png");
  text-align: left;
  z-index : 11;
}

.callender-popup div.list-search {
  height: 20px;
}

.callender-popup div.list-search a {
  padding: 2px 0 2px 10px;
  border-bottom: 1px #ccc solid;
  display: block;
  text-decoration: none;
}

.callender-popup div.list-search a:hover,
.callender-popup div.csv-download a:hover {
  background-color: #ffca30;
  color: #fff;
}

.callender-popup div.csv-download {
  height: 20px;
}

.callender-popup div.csv-download a {
  padding: 4px 0 2px 10px;
  border-bottom: 1px #ccc solid;
  display: block;
  text-decoration: none;
}

.callender-popup div.callender-date {
  padding: 4px 0 0 10px;
}

/* Opinion */
.opinion {
  background-color: #fff;
}

.opinion .opinion-bg {
  padding: 0;
  font-size: 1em;
}

.opinion div.notice {
  margin: 10px 0;
  width: 522px;
  min-height: 39px;
  position: relative;
}

.opinion div.notice p {
  margin-right: 210px;
  line-height: 1.5;
}

.opinion div.notice a.faq {
  position: absolute;
  top: 0;
  right: 0;
}

.opinion form textarea#opinion-input {
  margin-bottom: 5px;
  padding: 3px;
  border: 1px solid #ccc;
  width: 514px;
  height: 7em;
  background-color: #fff;
  text-align: left;
  font-size: 12px;
}

.opinion form div.submit {
  margin: 0 auto 5px;
  width: 70px;
  text-align: center;
}

.opinion div.complete {
  padding: 10px;
  border: 1px solid #CCCCCC;
  line-height: 1.4;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
}

/* facebook */
#content .fb {
  margin-top: 20px;
}

#content .fb iframe {
  margin: 10px;
}


/* Shop-Info
---------------------------------------------------- */

.shop-info .status {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f7f6f5;
}

/* Profile */
#profile {
  margin-bottom: 10px;
  padding-left: 65px;
  width: 133px;
  min-height: 60px;
  position: relative;
}

#profile dt {
  padding-bottom: 2px;
}

#profile dt span {
  font-weight: bold;
  font-size: 1.2em;
}

#profile dd.pht {
  position: absolute;
  top: 0;
  left: 0;
}

#profile dd.rank img {
  margin-left: 3px;
}

.status p.bonus {
  padding-bottom: 3px;
  text-align: center;
}

/* Quick Report */
#quickreport {
  margin-top: 10px;
  width: 200px;
  overflow: hidden;
  line-height: 1;
}

#quickreport dt,
#quickreport dd {
  padding: 5px;
  min-height: 16px;
  font-size: 13px;
}

#quickreport dt {
  padding-right: 0;
  background-color: #d8f5ff;
  font-weight: bold;
}

#quickreport dd {
  padding-left: 0;
  background-color: #fff;
  font-weight: bold;
  text-align: right;
}

.status p.limited {
  margin-top: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#quickreport dd.rank span.out {
  color: #000;
  font-weight: normal;
}

p.profit-notice {
  margin: 10px 0;
  font-size: 10px;
}

/* challenge */
#challenge p {
  margin-bottom: 10px;
  text-align: center;
}

#challenge p.question a {
  margin: 0 auto;
  display: block;
  width: 200px;
  height: 175px;
  background: url('/images/shop/index/shop-info/banner-question.png') 0 0 no-repeat;
  text-indent: -9999px;
}

#challenge p.question a:hover {
  background-position: 0 -175px;
}

/* college */
#college {
  margin-bottom: 5px;
}

#college p {
  margin-bottom: 10px;
  text-align: center;
}

#college p.link {
  margin: 0 10px;
  text-align: left;
}

#college p.link a {
  padding: 0 0 5px 18px;
  display: inline-block;
  background: url('/images/shop/common/arrow-blue-r.png') no-repeat 0 0;
}

/* sns */
#content .shop-info .sns ul {
  margin-top: -10px;
}

#content .shop-info .sns ul li a {
  width: 160px;
}

#content .shop-info .sns ul li.facebook a {
  background-image: url('/images/shop/common/icon40/facebook.png');
}

#content .shop-info .sns ul li.moshimochan a {
  background-image: url('/images/shop/common/icon40/moshimochan.png');
}

#content .shop-info .sns ul li.buyer a {
  background-image: url('/images/shop/common/icon40/twitter.png');
}

#content .shop-info .sns ul li.ayakoblog a {
  background-image: url('/images/shop/common/icon40/ayakoblog.png');
}

#content .shop-info .sns ul li.michikoblog a {
  background-image: url('/images/shop/common/icon40/michikoblog.png');
}


/* Side-Banner
---------------------------------------------------- */
#container #content {
  padding: 5px 10px 920px;
  position: relative;
  overflow: visible;
  background-color: #fff;
}

#container #content:after {
  content: "";
  display: block;
  clear: both;
}

#container #footer {
  background-color: #fff;
  z-index: 20;
}

/*
.wrapper.bootcamp {
  margin-top: -5px;
  background: url('/images/shop/index/ayako/background.jpg') repeat center center fixed;
}

#content div.sidebanner-l,
#content div.sidebanner-r {
  position: absolute;
  top: 0;
  left: -100px;
  width: 100px;
  height: 100%;
  background: url('/images/shop/index/grandprix/side-grandprix.png') repeat-y 0 0;
  z-index: 10;
}

.newyear #content div.sidebanner-l,
.newyear #content div.sidebanner-r {
  background-image: url('/images/shop/index/rankBonus/sideBanner.gif');
}

#content div.sidebanner-r {
  left: 970px;
}

#content div.sidebanner-l a,
#content div.sidebanner-r a {
  display: block;
  height: 100%;
  text-indent: -9999px;
}
 */

/* holiday-closing
---------------------------------------------------- */
div#closing-info {
  margin-bottom: 10px;
}

div#closing-info p.title {
  border: 1px #ccc solid;
  text-align: left;
}

div#closing-info p.title a {
  padding: 10px 10px 10px 13px;
  border-top: 1px #fff solid;
  display: block;
  background: url('/images/shop/index/main/bg-top-info.png') no-repeat 0 100%;
  font-weight: bold;
  font-size: 1.35em;
  outline: none;
}
div#closing-info div.closing-txt {
  padding: 10px;
  position: relative;
  background-color: #e5f8ff;
  line-height: 1.5;
  display: none;
}

div#closing-info div.closing-txt strong {
  color: #f00;
}

div#closing-info div.closing-txt a {
  font-weight: bold;
}

div#closing-info div.holiday-calender {
  padding: 5px;
  border: 1px #999 solid;
  position: absolute;
  top: 48px;
  left: 388px;
  width: 356px;
  background-color: #fff;
  z-index: 200;
  display: none;
}

div#closing-info div.holiday-calender p.close {
  padding:0;
  text-align: right;
}

div#closing-info div.holiday-calender p.close span {
  padding: 0;
  color: #000;
  background-color: transparent;
}

div#closing-info div.holiday-calender p.close a {
  text-decoration: none;
}

div#closing-info div.holiday-calender table {
  margin: 0 5px;
  width: 168px;
  float: left;
}

div#closing-info div.holiday-calender table thead tr th {
  padding: 2px 0;
  font-weight: bold;
  text-align: center;
}

div#closing-info div.holiday-calender table thead tr td {
  padding: 2px 0;
  background-color: #e5f8ff;
  text-align: center;
}

div#closing-info div.holiday-calender table tbody tr td {
  padding: 2px 5px;
  border-bottom: 1px #ccc dotted;
  text-align: right;
}

div#closing-info div.holiday-calender table tbody tr td.close,
div#closing-info div.holiday-calender p span {
  color: #ccc;
  background-color: #999;
}

div#closing-info div.holiday-calender table tbody tr.last td {
  border-bottom: 0;
}

div#closing-info div.holiday-calender p {
  padding: 5px 0;
  text-align: center;
  clear: both;
}

div#closing-info div.holiday-calender p span {
  margin-right: 5px;
  padding: 0 2px;
}


/* sdChallenge
---------------------------------------------------- */
a#sdChallenge {
  margin-left: 960px;
  display: block;
  width: 94px;
  height: 485px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  z-index: 100;
}

/* moshimo10th
---------------------------------------------------- */
a#moshimo10th {
  padding-top: 100px;
  display: block;
  height: 100px;
  overflow: hidden;
  background: #10738b url('/static/img/ds/www/index/banner/moshimo10th.jpg') no-repeat center 0;
  text-align: center;
  box-sizing: border-box;
}

/* hijack
---------------------------------------------------- */

#hijack p {
  line-height: 1.5;
  font-size: 16px;
  text-align: center;
}

#hijack p.banner {
  margin-bottom: 10px;
}