@charset "utf-8";
/* CSS Document */
#company-titanium-inkan {
  font-family: "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", sans-serif;
  position: relative;
  margin: 0 auto;
  padding: 0;
  line-height: 1.6;
  font-size: 16px;
}
#company-titanium-inkan .m-container {
  width: auto;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* 見出し */
.m-heading--t2 {
  display: block;
  position: relative;
  background: linear-gradient(to bottom, #fff 0%, #eee 50%, #eee 100%) !important;
  border-top: solid 1px #ccc;
  border-right: solid 4px #245520;
  border-bottom: solid 1px #ccc;
  border-left: solid 4px #245520;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  line-height: 1.1;
  margin: 0 0 16px 0;
  padding: 12px;
}
.m-heading--t3 {
  display: block;
  position: relative;
  border-bottom: solid 1px #245520;
  font-size: 18px;
  font-weight: bold;
  color: #444;
  line-height: 1.1;
  margin: 0 0 16px 0;
  padding: 0 8px 4px 8px;
}
.m-heading--t3::after {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 30%;
  border-bottom: solid 4px #245520;
}
.m-heading--t4 {
  display: block;
  position: relative;
  border-bottom: solid 1px #245520;
  font-size: 16px;
  font-weight: bold;
  color: #444;
  line-height: 1.1;
  margin: 0 0 16px 0;
  padding: 0 8px 4px 8px;
}
/* 画像 */
.img-responsive {
  margin-right: auto;
  margin-left: auto;
  display: block;
  max-width: 100%;
  height: auto;
}
/* レイアウト */
.m-row {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-col-sm-1, .m-col-sm-2, .m-col-sm-3, .m-col-sm-4, .m-col-sm-5, .m-col-sm-6, .m-col-sm-7, .m-col-sm-8, .m-col-sm-9, .m-col-sm-10, .m-col-sm-11, .m-col-sm-12 {
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  padding-left: 8px;
  padding-right: 8px;
}
.m-col-sm-1 {
  width: calc(( 100% / 12 ) * 1);
}
.m-col-sm-2 {
  width: calc(( 100% / 12 ) * 2);
}
.m-col-sm-3 {
  width: calc(( 100% / 12 ) * 3);
}
.m-col-sm-4 {
  width: calc(( 100% / 12 ) * 4);
}
.m-col-sm-5 {
  width: calc(( 100% / 12 ) * 5);
}
.m-col-sm-6 {
  width: calc(( 100% / 12 ) * 6);
}
.m-col-sm-7 {
  width: calc(( 100% / 12 ) * 7);
}
.m-col-sm-8 {
  width: calc(( 100% / 12 ) * 8);
}
.m-col-sm-9 {
  width: calc(( 100% / 12 ) * 9);
}
.m-col-sm-10 {
  width: calc(( 100% / 12 ) * 10);
}
.m-col-sm-11 {
  width: calc(( 100% / 12 ) * 11);
}
.m-col-sm-12 {
  width: 100%;
}
/* 商品リスト */
.m-goods-grid--col-3 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -14px;
  margin-right: -14px;
}
.m-goods-grid--col-3 .m-goods-grid__item {
  width: 33.3333%;
  padding: 24px 14px 0 14px;
  box-sizing: border-box;
  margin-top: 24px;
}
.m-goods-grid--col-3 .m-goods-grid__item:nth-of-type(1), .m-goods-grid--col-3 .m-goods-grid__item:nth-of-type(2), .m-goods-grid--col-3 .m-goods-grid__item:nth-of-type(3) {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.m-goods-grid__item a {
  position: relative;
  border-bottom: solid 1px #D9D9D9;
  display: block;
  box-sizing: border-box;
  color: #212529;
}
.m-goods-grid__item a::before {
  position: absolute;
  content: "";
  right: 0;
  bottom: 4px;
  border-left: 16px solid transparent;
	border-bottom: 16px solid #D9D9D9;
}
.m-goods-grid__item a:hover::before {
  border-bottom: 16px solid #D50000;
}
.m-goods-grid__item a:hover {
  text-decoration: none;
  background-color: #F8F9FA;
}
.m-goods-item__thumbnail {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 100%;
}
.m-goods-item__thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  z-index: 5;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.m-goods-label {
  list-style: none;
  padding: 0;
  margin: 0;
}
.m-goods-label li {
  display: inline-block;
  margin-bottom: 4px;
  border-radius: 4px;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}
.m-goods-label_jitu {
  background-color: #339C4B;
}
.m-goods-label_ginko {
  background-color: #3AA4C5;
}
.m-goods-label_mitome {
  background-color: #DF3C64;
}
.m-goods-label_kaku {
  background-color: #64559A;
}
.m-goods-label_popular {
  background-color: #ff3c00;
}
.m-goods-label_new {
  background-color: #DC1F29;
}
.m-goods-item__block {
  margin-top: 8px;
}
.m-goods-item__type {
  display: block;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.m-goods-item__name {
  font-size: 18px;
  color: #333;
  font-weight: bold;
  margin-bottom: 0;
}
.m-goods-item__description {
  font-size: 12px;
  color: #212529;
  text-align:justify;
  margin-bottom: 8px;
}
.m-goods-item-price {
  color: #d50000;
  margin-bottom: 0;
}
.m-goods-item-price__label {
  color: #333;
  display: inline-block;
  padding-right: 4px;
}
.m-goods-item-price__unit {
  font-size: 12px;
  display: inline-block;
  padding-left: 0.25em;
  color: #d50000;
}
.m-goods-price__usually-price-label, .m-goods-price__usually-price {
  font-size: 11px;
  color: #555;
}
.m-goods-price__usually-price {
  text-decoration: line-through;
}
.m-goods-single-item-price {
  font-size: 12px;
  text-decoration: line-through;
}
.m-goods-single-item-price__label {
  display: inline-block;
  padding-right: 4px;
  text-decoration: none;
}
.m-goods-item__footer {
  text-align: center;
}

/* 最安価格／最短出荷日／無料サービス */
.m-goods-summary {
  background-color: #F8F9FA;
  padding: 24px;
}
.m-goods-summary-price, .m-goods-summary-deadline {
  border-bottom: 1px solid #D9D9D9;
}
.m-goods-summary-price dd {
  font-size: 26px;
  color: #D50000;
}
.m-goods-summary-price__unit {
  font-size: 16px;
  display: inline-block;
  padding-left: 8px;
}
.m-goods-summary-deadline dd {
  font-size: 26px;
  color: #0099FF;
}
.m-free-service {
  list-style: none;
  display: flex;
}
.m-free-service li {
  list-style: none;
  margin-right: 8px;
}
.m-free-service a, .m-free-service span {
  display: block;
  background-color: #D9D9D9;
  color: #333;
  padding: 2px 8px 0 8px;
}
.m-free-service li a b, .m-free-service li span b {
  color: #D50000;
  display: inline-block;
  padding-left: 4px;
}
.m-free-service a:hover {
  text-decoration: none;
}
/* アンカー */
.m-goods-anchor-block {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.m-goods-anchor {
  width: 50%;
  padding-left: 8px;
  padding-right: 8px;
  margin-top: 16px;
  box-sizing: border-box;
}
.m-goods-anchor a {
  position: relative;
  border: solid 1px #D9D9D9;
  display: block;
  box-sizing: border-box;
  color: #212529;
}
.m-goods-anchor a::before {
  position: absolute;
  content: "";
  right: 4px;
  bottom: 4px;
  border-left: 16px solid transparent;
	border-bottom: 16px solid #D9D9D9;
}
.m-goods-anchor a:hover {
  text-decoration: none;
  background-color: #F8F9FA;
}
.m-goods-anchor a:hover::before {
  border-bottom: 16px solid #D50000;
}
.m-goods-anchor:nth-child(1), .m-goods-anchor:nth-child(2) {
  margin-top: 0;
}
.m-goods-anchor-item {
  display: table;
  width: 100%;
}
.m-goods-anchor-item__thumbnail {
  display: table-cell;
  width: 104px;
  border-right: solid 1px #D9D9D9;
  box-sizing: border-box;
}
.m-goods-anchor-item__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.m-goods-anchor-item__thumbnail-img {
  padding: 8px;
}
.m-goods-anchor-item__content {
  display: table-cell;
  width: calc( 100% - 104px);
  box-sizing: border-box;
  vertical-align: middle;
  padding: 8px 16px;
}
.m-goods-anchor-item__content dl dt {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}
.m-goods-anchor-item-set-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.m-goods-anchor-item-set-list li {
  width: 50%;
  position: relative;
  list-style: none;
  padding-left: 1.6em;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1.3;
}
.m-goods-anchor-item-set__yes {
  padding-left: 24px;
  color: #212529;
}
.m-goods-anchor-item-set__no {
  padding-left: 24px;
  color: #666666;
}
.m-goods-anchor-item-set__yes::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: url(https://www.hankoya.com/shop/cam/images/company-titanium-inkan/icon-yes.png);
}
.m-goods-anchor-item-set__no::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: url(https://www.hankoya.com/shop/cam/images/company-titanium-inkan/icon-no.png);
}
.m-goods-anchor-item-form-list {
  list-style: none;
}
.m-goods-anchor-item-form-list li {
  position: relative;
  list-style: none;
  padding-left: 1.6em;
  font-size: 14px;
  box-sizing: border-box;
  line-height: 1.3;
}
.m-goods-anchor-item-form__corporation, .m-goods-anchor-item-form__personal {
  padding-left: 24px;
}
.m-goods-anchor-item-form__corporation::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: "●";
  color: #245520;
}
.m-goods-anchor-item-form__personal::before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  content: '■';
  color: #245520;
}
/* よくある質問 */
.m-faq-block {
  margin-top: 24px;
}
.m-faq-block:first-of-type {
  margin-top: 0;
}
.m-faq-title {
  border: 1px solid #ccc;
  color: #333;
  font-size: 1em;
  padding: 8px 48px 8px 16px;
  position: relative;
  cursor: pointer;
  user-select: none;
  background-color: #eee;
  box-sizing: border-box;
}
.m-faq-title::before, .m-faq-title::after {
  content: '';
  display: block;
  background-color: #333;
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 2px;
}
.m-faq-title::after {
  transform: rotate(90deg);
  transition-duration: .3s;
}
.m-faq-title:hover,
.m-faq-title:active,
.m-faq-title.is-active { 
  background-color: #eee;
}
.m-faq-title.is-mactive::before {
  opacity: 0;
}
.m-faq-title.is-mactive::after {
  transform: rotate(0);
}
.m-faq-content {
  padding: 0;
  line-height: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  box-sizing: border-box;
}
.m-faq-content.is-mopen {
  border-bottom: 1px solid #ccc;
  padding: 16px;
  line-height: normal;
  height: auto;
  opacity: 1;
}
.m-w80 {
  width: 80%;
}
.u-super {
  font-size: 0.6em;
	vertical-align: top;
}
.u-note {
  font-size: 14px;
}
.u-line-yellow {
  background: linear-gradient(transparent 50%, #fff499 50%);
}
.u-td-ul {
  text-decoration: underline;
}
.u-fz-sm {
  font-size: 12px;
}
.u-fz-md {
  font-size: 14px;
}
.u-ta-c {
  text-align: center;
}
.u-fc-red {
  color: #d50000;
}

/* マージン上 */
.u-mt-0 {
  margin-top: 0;
}
.u-mt-xs {
  margin-top: 4px;
}
.u-mt-sm {
  margin-top: 8px;
}
.u-mt-md {
  margin-top: 16px;
}
.u-mt-lg {
  margin-top: 24px;
}
.u-mt-xl {
  margin-top: 32px;
}
.u-mt-xxl {
  margin-top: 48px;
}
.u-mt-xxxl {
  margin-top: 64px;
}
.u-mt-xxxxl {
  margin-top: 128px;
}

/* マージン下 */
.u-mb-0 {
  margin-bottom: 0;
}
.u-mb-xs {
  margin-bottom: 4px;
}
.u-mb-sm {
  margin-bottom: 8px;
}
.u-mb-md {
  margin-bottom: 16px;
}
.u-mb-lg {
  margin-bottom: 24px;
}
.u-mb-xl {
  margin-bottom: 32px;
}
.u-mb-xxl {
  margin-bottom: 48px;
}
.u-mb-xxxl {
  margin-bottom: 64px;
}
.u-mb-xxxxl {
  margin-bottom: 128px;
}