@charset "UTF-8";
#contents {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

div.container {
  width: 980px;
  margin: 0 0 80px;
}

body div#wrap-container {
  padding: 0;
  width: 100%;
}

#container {
  width: 100%;
}

div#container a:hover {
  opacity: 0.6;
}

h1 {
  border-bottom: 1px solid #ccc;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 auto 25px;
  padding-bottom: 1%;
  width: 980px;
  letter-spacing: 0.06em;
}

h2 {
  background-color: #D1111B;
  color: #fff;
  width: 100%;
  font-size: 1.4em;
  line-height: 1.1;
  padding: 1.3% 1.7%;
  box-sizing: border-box;
}

#epson h2 {
  background-color: #0D0B8D;
}

#brother h2 {
  background-color: #1662D4;
}

h3 {
  font-size: 1.46em;
  font-weight: bold;
  margin: 0 0 1.1%;
  border: none;
}

.inner-wrapper {
  width: 950px;
  margin: auto;
}

.main-image {
  width: 100%;
}

.main-image img {
  width: 100%;
}

.company-btn-block {
  display: flex;
  justify-content: center;
  margin: 3% auto 0;
}

.company-btn-block a {
  display: flex;
  width: 32%;
  max-width: 280px;
  border: 1px solid #888;
  border-radius: 8px;
  padding: 1.2% 1.8%;
  box-sizing: border-box;
  position: relative;
}

.company-btn-block a:nth-of-type(1) {
  color: #BD0728;
}

.company-btn-block a:nth-of-type(2) {
  color: #0D0B8D;
  margin: 0 12px;
}

.company-btn-block a:nth-of-type(3) {
  color: #1662D4;
}

.company-btn-block a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8%;
  color: #333;
  line-height: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #888888;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  margin: auto;
}

.company-btn-block a > img {
  width: 64px;
  height: auto;
}

.company-btn-block a .name {
  display: block;
  width: 100px;
  margin: 4% 0 0 8%;
}

.company-btn-block a .name img {
  width: 100%;
}

.company-btn-block a span {
  display: block;
  font-size: 1.0666em;
  line-height: 1.6;
  margin: 3% auto 0;
  font-weight: bold;
}

.model-number-btn-block {
  display: flex;
  flex-wrap: wrap;
  margin: 1.8% auto 0;
}

.model-number-btn-item {
  display: block;
  background-color: #fff;
  font-size: 1.0666em;
  width: calc(178 / 940 *100%);
  border: 1px solid #888;
  border-radius: 8px;
  margin: 0 12px 12px 0;
  color: #333 !important;
  box-sizing: border-box;
  padding: 1.6%;
  font-weight: bold;
  letter-spacing: -0.08em;
  position: relative;
}

.model-number-btn-item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  color: #333;
  line-height: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #888888;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  margin: auto;
}

.model-number-btn-item:nth-of-type(5n) {
  margin-right: 0;
}

.model-number-block {
  margin: 3.7% auto 0;
}

.model-number-table table {
  width: 940px;
  border: 1px solid #AFAFAF;
  border-collapse: collapse;
  background-color: #fff;
}

.model-number-table th {
  width: calc(200/940 * 100%);
  text-align: center;
  background-color: #888;
  color: #fff;
  font-size: 1em;
  line-height: 1.2em;
  height: 2.4em;
  border: 1px solid #AFAFAF;
}

.model-number-table td {
  text-align: left;
  color: #333;
  font-size: 1em;
  line-height: 1.2666em;
  height: 2.52em;
  border: 1px solid #AFAFAF;
  padding: 0 0 0 1em;
}

.model-number-table td.color {
  padding-left: 6%;
  position: relative;
}

.model-number-table td.color::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11.2%;
  width: 20px;
  height: 20px;
  background-color: #000;
  margin: auto;
}

.model-number-table td.color.full-color::after {
  background: url("/static/images/product/yosi/recycling_ink/icn_4color.jpg") no-repeat;
  background-size: contain;
}

.model-number-table td.color.magenta::after {
  background-color: #FF008C;
}

.model-number-table td.color.yellow::after {
  background-color: #FFF000;
}

.model-number-table td.color.cyan::after {
  background-color: #00AEFF;
}

.model-number-table td.color.gray::after {
  background-color: #BBB;
}

.model-number-table td.color.orange::after {
  background-color: #ffa000;
}

.model-number-table td.color.green::after {
  background-color: #08ac33;
}

.model-number-table td.number {
  font-weight: bold;
  background: url("https://www.sanwa.co.jp/static/images/product/oatap/ya.gif") no-repeat 0px center;
  padding: 0 0 0 4%;
  background-position-x: 7.8%;
}

/* セルの幅を％で指定 */
.model-number-table td:nth-child(1) {
  width: calc(200/940 * 100%);
}

.model-number-table td:nth-child(2) {
  width: calc(260/940 * 100%);
}

.model-number-table td:nth-child(3) {
  width: calc(260/940 * 100%);
}

.model-number-table td:nth-child(4) {
  width: calc(220/940 * 100%);
}

/* キャノン */
#canon {
  margin: 4% auto 0;
  background-color: #FDF3F3;
  padding: 0 0 2%;
}

/* エプソン */
#epson {
  margin: 8.1% auto 0;
  padding: 0 0 2%;
  background-color: #F3F3F9;
}

#epson .model-number-btn-item {
  display: block;
  background-color: #fff;
  font-size: 1.0666em;
  width: calc(225 / 940 *100%);
  border: 1px solid #888;
  border-radius: 8px;
  margin: 0 12px 12px 0;
  color: #333 !important;
  box-sizing: border-box;
  padding: 1.6%;
  font-weight: bold;
  letter-spacing: -0.08em;
}

#epson .model-number-btn-item.tall {
  padding: 2.6% 1.6% 0.6%;
}

#epson .model-number-btn-item:nth-of-type(4n) {
  margin-right: 0;
}

/* ブラザー */
#brother {
  margin: 8% auto 0;
  padding: 0 0 2%;
  background-color: #F3F7FD;
}

/* バナー */
.bottom-bnr-btn {
  display: flex;
  border-radius: 8px;
  position: relative;
  align-items: center;
}

.bottom-bnr-btn span {
  display: block;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 0 4%;
}

.bottom-bnr-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 6%;
  color: #333;
  line-height: 1;
  width: 15px;
  height: 15px;
  border: 4px solid #174EAF;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(45deg);
  margin: auto;
}

.info-bnr-btn {
  background-color: #F5F5F5;
  border: 1px solid #1B4DA2;
  color: #004DA2;
  font-size: 1.4666em;
  max-width: 620px;
  width: 80%;
  margin: 8% auto 0;
  padding: 1.7% 3%;
  box-sizing: border-box;
}

.info-bnr-btn img {
  width: 85px;
}

.refill-ink-bnr-btn {
  background-color: #004DA2;
  color: #fff !important;
  font-size: 1.4em;
  max-width: 490px;
  width: 80%;
  margin: 3.1% auto 0;
  padding: 1.2% 3%;
  box-sizing: border-box;
}

.refill-ink-bnr-btn b {
  font-size: 1.14em;
}

.refill-ink-bnr-btn img {
  width: 96px;
}

.refill-ink-bnr-btn::after {
  border-color: #fff;
  right: 9%;
}

/* サイドメニュー */
#side-menu {
  position: absolute;
  width: 180px;
  border-left: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
  right: 0;
  top: 0;
}

.side-menu-ttl {
  background-color: #414242;
  color: #fff;
  font-size: 1.0666em;
  line-height: 1.18;
  font-weight: bold;
  text-align: center;
  padding: 5% 0;
}

.side-menu-link-item {
  border-bottom: 1px solid #D9D9D9;
  width: 100%;
}

.side-menu-link-item a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8% 0;
}

.side-menu-link-item a img {
  width: 120px;
  margin: 0 auto;
}

.side-menu-link-item a span {
  font-size: 0.86em;
  display: block;
  text-align: center;
}