@charset "utf-8";

/* reset style ----------------- */
html, body { color: #525263; }
@media screen and (max-width: 667px) {
.site__main { padding-top: 10px!important; }
}

.col-12.col-md-9.tabacms_post,
.col-sm-10 {
  float: none;
  width: 100%;
}

.col-12.col-md-9.tabacms_post { padding: 0 35px; }
@media screen and (max-width: 667px) {}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

.col-sm-10 { padding: 0 0 1em; }
@media screen and (max-width: 667px) {}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

header.row.tabacms_header {
  height: auto!important;
  margin: 0;
  padding: 0 0 40px;
  position: static;
  z-index: auto;
}



/* bread crumb ----------------- */
.breadcrumb-wrap { padding: 0 0 1em!important; }




/* ec-pageHeader ----------------- */
.ec-pageHeader h1 {
  background-color: transparent!important;
  color: #000!important;
  font-size: 40px!important;
  font-weight: 600!important;
  line-height: 1.5!important;
  margin: 0!important;
  padding: 0!important;
}
@media screen and (max-width: 667px) {
.ec-pageHeader h1 {
  font-size: 22px!important;
  margin-top: .5em;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.ec-pageHeader h1 { font-size: 30px!important; }
}



/* blog upload time ---------- */
.tabacms_post header .blog-update-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  padding: 10px 0 18px;
}
@media screen and (max-width: 667px) {
.tabacms_post header .blog-update-wrap {
  font-size: .5em;
  gap: 1em;
  padding: 2em 0 2.5em;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.tabacms_post header .time-wrap { padding-bottom: 10px; }
}

.tabacms_post header time {
  color: #525263;
  display: block;
  float: none;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (max-width: 1024px) {
.tabacms_post header time { font-size: 15px; }
}

.tabacms_post header time.blog-update:before,
.tabacms_post header time .blog-last-update-inner span:before {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  margin-right: .2em;
}
.tabacms_post header time.blog-update:before { content: '\f133'; }

.tabacms_post header time .blog-last-update-inner span { display: none; }
.tabacms_post header time .blog-last-update-inner span:before { content: '\f021'; }




/* category list ---------- */
.tabacms_post label {
  background-color: #fff;
  border: 1px solid #00a0e9;
  border-radius: 18px;
  color: #00a0e9;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 2.25;
  margin: 0;
  padding: 0 1em;
}
@media screen and (max-width: 667px) {
.tabacms_post label { font-size: 12px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.tabacms_post label { font-size: 14px; }
}



/* blog contents ---------- */
.blog-contents-inner {
  margin: 0 auto !important;
  padding: 0;
  width: 1000px !important;
}
@media screen and (max-width: 667px) {
.blog-contents-inner { width: 95% !important; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-contents-inner { width: 90% !important; }
}



/* blog keyvisual ---------- */
.blog-keyvisual {
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  width: 100%;
}

.blog-keyvisual img {
  display: block;
  height: auto;
  max-width: 100%;
}



/* blog link button ---------- */
.blog-link-button {
  align-items: center;
  background-color: #fff;
  border: 1px solid #1a5098;
  color: #1a5098;
  display: flex;
  height: 72px;
  justify-content: center;
  margin: 0 auto 100px;
  padding: 0 1em;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  width: 60%;
}
@media only screen and (max-width: 667px) {
.blog-link-button {
  height: 45px;
  margin: 15px auto 50px;
  padding: 0 0.5em;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-link-button {
  height: 52px;
  margin-bottom: 70px;
  padding: 0 1em;
}
}

.blog-link-button:hover {
  background-color: #1a5098;
  border: 1px solid #1a5098;
  color: #fff;
  text-decoration: none;
}

.msec-article-cta-button.comingsoon {
  border: 1px solid #999;
  color: #999;
}
.msec-article-cta-button.comingsoon:hover {
  background-color: #fff;
  border: 1px solid #999;
  color: #999;
}

.blog-link-button-inner {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 667px) {
.msec-article-cta-button-inner { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-button-inner { font-size: 14px; }
}



/* column honbun ---------- */
.msec-article {
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  margin: 0 auto;
  padding: 0;
  width: 1000px;
}
@media screen and (max-width: 667px) {
.msec-article { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article { width: 100%; }
}

.msec-article .sentence {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}
@media screen and (max-width: 667px) {
.msec-article .sentence {
  font-size: 14px;
  line-height: 1.5;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article .sentence {
  font-size: 16px;
  line-height: 1.5;
}
}

.msec-article-ul + .sentence { margin-top: 1em; }

.figuration-center { text-align: center; }
@media screen and (max-width: 667px) {
.figuration-center { text-align: left; }
}

.msec-article-header {
  margin: 0 auto;
  padding: 0 0 100px;
  width: 1000px;
}
@media screen and (max-width: 667px) {
.msec-article-header {
  padding: 0 0 30px;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-header {
  padding: 0 0 40px;
  width: 95%;
}
}

.msec-article-header-picture {
  display: block;
  width: 100%;
}

.msec-article-headline-wrap { padding: 50px 0; }
@media screen and (max-width: 667px) {
.msec-article-headline-wrap { padding: 25px 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-headline-wrap { padding: 25px 0; }
}

.table-of-contents-wrap {
  background-color: #fafafa;
  margin: 0 auto;
  padding: 40px 40px 35px;
  width: 1000px;
}
@media only screen and (max-width: 667px) {
.table-of-contents-wrap {
  margin: 0 auto;
  padding: 1em;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.table-of-contents-wrap {
  margin: 0 auto;
  padding: 1em;
  width: 95%;
}
}

.table-of-contents-caption {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
@media only screen and (max-width: 667px) {
.table-of-contents-caption { font-size: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.table-of-contents-caption { font-size: 16px; }
}

.table-of-contents {
  list-style-type: none;
  margin: 15px 0 0;
  padding: 0;
}
@media only screen and (max-width: 667px) {
.table-of-contents { margin: 10px 0 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.table-of-contents { margin: 10px 0 0; }
}

.table-of-contents-list {
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  padding: 0.5em 0 0.5em 1.8em;
  position: relative;
}
@media only screen and (max-width: 667px) {
.table-of-contents-list {
  font-size: 14px;
  line-height: 1.2;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.table-of-contents-list { font-size: 14px; }
}

.table-of-contents-list:before {
  left: 0.3em;
  position: absolute;
  top: 0.5em;
}
.table-of-contents-list:nth-of-type(1):before { content: '1.'; }
.table-of-contents-list:nth-of-type(2):before { content: '2.'; }
.table-of-contents-list:nth-of-type(3):before { content: '3.'; }
.table-of-contents-list:nth-of-type(4):before { content: '4.'; }
.table-of-contents-list:nth-of-type(5):before { content: '5.'; }
.table-of-contents-list:nth-of-type(6):before { content: '6.'; }
.table-of-contents-list:nth-of-type(7):before { content: '7.'; }
.table-of-contents-list:nth-of-type(8):before { content: '8.'; }
.table-of-contents-list:nth-of-type(9):before { content: '9.'; }
.table-of-contents-list:nth-of-type(10):before { content: '10.'; }

.table-of-contents-list-inner { color: #000; }
.table-of-contents-list-sub { margin: 0 0 0 1.5em; }

.table-of-contents-wrap + .sentence { margin-top: 50px; }

.msec-article-section {
  margin: 0 auto;
  padding: 0 0 100px;
  width: 1000px;
}
@media only screen and (max-width: 667px) {
.msec-article-section {
  padding: 0 0 30px;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-section {
  padding: 0 0 30px;
  width: 95%;
}
}

.msec-article-large-heading {
  background-color: #dce9f9;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1em;
  padding: .5em;
}
@media only screen and (max-width: 667px) {
.msec-article-large-heading { font-size: 18px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-large-heading { font-size: 20px; }
}

.msec-article-frame-heading {
  align-items: center;
  background-color: #1a5098;
  display: flex;
  height: 60px;
  margin: 0 auto 20px;
  padding: 0 20px;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.msec-article-frame-heading {
  height: 45px;
  margin-bottom: 10px;
  min-width: 100%;
  padding: 0 .5em;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-frame-heading {
  height: 50px;
  margin-bottom: 15px;
  min-width: 100%;
  padding: 0 .5em;
}
}

.msec-article-frame-heading-inner {
  color: #fff;
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.125;
}
@media only screen and (max-width: 667px) {
.msec-article-frame-heading-inner { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-frame-heading-inner { font-size: 16px; }
}

.msec-article-photo-right:after {
  clear: both;
  content: '\0020';
  display: block;
}
@media only screen and (max-width: 667px) {
.msec-article-photo-right:after { display: none; }
}

.msec-article-photo-right .msec-article-picture,
.msec-article-photo-left .msec-article-picture { width: 450px; }
@media only screen and (max-width: 667px) {
.msec-article-photo-right .msec-article-picture,
.msec-article-photo-left .msec-article-picture { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-photo-right .msec-article-picture,
.msec-article-photo-left .msec-article-picture { width: 300px; }
}

.msec-article-photo-right .msec-article-picture {
  float: right;
  margin: 0 0 20px 20px;
}
.msec-article-photo-left .msec-article-picture {
  float: left;
  margin: 0 20px 20px 0;
}
@media only screen and (max-width: 667px) {
.msec-article-photo-right .msec-article-picture,
.msec-article-photo-left .msec-article-picture {
  float: none;
  margin: 0 0 20px 0;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-photo-right .msec-article-picture { margin: 0 0 15px 15px; }
.msec-article-photo-left .msec-article-picture { margin: 0 15px 15px 0; }
}

.msec-article-photo-right .msec-article-picture .picture,
.msec-article-photo-left .msec-article-picture .picture { width: 100%; }

.msec-article-photo-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.msec-article-picture { display: block; }
.msec-article-picture.rows2 { width: 48%; }
.msec-article-picture.rows3 { width: 31%; }
.msec-article-picture.rows4 { width: 24%; }
@media only screen and (max-width: 667px) {
.msec-article-picture { margin-top: 1em; }
.msec-article-picture.rows2,
.msec-article-picture.rows3,
.msec-article-picture.rows4 { width: 100%; }
}

.msec-article-paragraph { padding: 0 0 50px; }
@media only screen and (max-width: 667px) {
.msec-article-paragraph { padding: 0 0 25px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-paragraph { padding: 0 0 35px; }
}

.msec-article-header .msec-article-paragraph { padding-bottom: 0; }

.msec-article-middle-heading {
  color: #1a5098;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .8em;
  padding: .3em 0 .3em .8em;
  position: relative;
}
@media only screen and (max-width: 667px) {
.msec-article-middle-heading { font-size: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-middle-heading { font-size: 17px; }
}

.msec-article-middle-heading:before {
  background-color: #1a5098;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 6px;
}

.msec-article-cta-button + .msec-article-middle-heading { margin-top: 3em; }

.msec-article-small-heading {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 0.8em;
}
@media only screen and (max-width: 667px) {
.msec-article-small-heading { font-size: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-small-heading { font-size: 16px; }
}

.msec-article-header .sentence { padding: 0 0 1em; }
.msec-article-header .sentence:last-child { padding-bottom: 0; }
.msec-article-paragraph .sentence { padding: 0 0 1em; }

.msec-article-picture.wide-size {
  display: block;
  margin: 0 0 50px;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.msec-article-picture.wide-size { margin: 0 0 25px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-picture.wide-size { margin: 0 0 35px; }
}

.msec-article-picture.wide-size-middle {
  display: block;
  margin: 0 auto 50px;
  width: 80%;
}
@media only screen and (max-width: 667px) {
.msec-article-picture.wide-size-middle {
  margin: 0 0 25px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-picture.wide-size-middle { margin: 0 0 35px; }
}

.msec-article-picture.wide-size-half {
  display: block;
  margin: 0 auto 50px;
  width: 60%;
}
@media only screen and (max-width: 667px) {
.msec-article-picture.wide-size-half {
  margin-bottom: 25px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-picture.wide-size-half { margin-bottom: 30px; }
}

.msec-article-picture.wide-size-small {
  display: block;
  margin: 0 auto 50px;
  width: 40%;
}
@media only screen and (max-width: 667px) {
.msec-article-picture.wide-size-small {
  margin-bottom: 25px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-picture.wide-size-small { margin-bottom: 30px; }
}

.msec-article-figure-wrap {
  display: flex;
  justify-content: space-between;
}

.msec-article-figure.rows2 { width: 469px; }
@media only screen and (max-width: 667px) {
.msec-article-figure.rows2 { width: 49%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-figure.rows2 { width: 48%; }
}

.msec-article-picture {
  display: block;
  width: 100%;
}

.msec-article-figuration {
  font-size: 15px;
  line-height: 1.3;
  margin: 1em 0 0;
  padding: 0 0 1em;
  text-align: center;
}
@media only screen and (max-width: 667px) {
.msec-article-figuration {
  font-size: 14px;
  text-align: left;
}
}

.msec-article-product-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.msec-article-product-detail-figure { width: 49%; }
@media only screen and (max-width: 667px) {
.msec-article-product-detail-figure {
  margin: 0 auto;
  width: 95%; }
}

.msec-article-product-detail-link {
  border: 1px solid #ccc;
  display: block;
  transition: .3s;
  width: 100%;
}
.msec-article-product-detail-link:hover { border-color: #1a5098; }

.msec-article-picture {
  display: block;
  height: auto;
  width: 100%;
}

.msec-article-product-detail-body { width: 49%; }
@media only screen and (max-width: 667px) {
.msec-article-product-detail-body {
  margin: 20px auto 0;
  width: 95%;
}
}

.msec-article-point {
  margin: 0;
  padding: 0;
}

.msec-article-point-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
@media only screen and (max-width: 667px) {
.msec-article-point-inner { align-items: flex-start; }
}

.msec-article-point .msec-article-point-inner:first-child { margin-top: 0; }

.msec-article-point-dt {
  margin: 0;
  padding: 0;
  width: 30%;
}
@media only screen and (max-width: 667px) {
.msec-article-point-dt { width: 20%; }
}

.msec-article-point-dd {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 0 5%;
  width: 65%;
}
@media only screen and (max-width: 667px) {
.msec-article-point-dd {
  font-size: 14px;
  width: 78%;
}
}

.msec-article-point-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding-bottom: .5em;
}
@media only screen and (max-width: 667px) {
.msec-article-point-label { font-size: 15px; }
}

.msec-article-point .msec-article-picture { border: 1px solid #ccc; }

.product-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-wrap {
  margin: 0 auto;
  width: 105%;
}
}

.product-catch-copy {
  padding-top: 50px;
  position: relative;
}
@media only screen and (max-width: 667px) {
.product-catch-copy { padding-top: 30px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-catch-copy { padding-top: 40px; }
}

.product-catch-copy:before {
  background-color: #1a5098;
  border-radius: 150px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  left: 0;
  line-height: 34px;
  padding: 0 2em;
  position: absolute;
  text-align: center;
  top: 0;
}
@media screen and (max-width: 667px) {
.product-catch-copy:before {
  font-size: 14px;
  line-height: 22px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-catch-copy:before {
  font-size: 14px;
  line-height: 28px;
}
}

.product-list {
  background-color: #fff;
  display: block;
  padding: 0 10px 0;
  position: relative;
  text-decoration: none;
  width: 250px;
}
@media screen and (max-width: 667px) {
.product-list {
  border-bottom: 1px dotted #ddd;
  display: flex;
  padding: 15px 15px 15px 0;
  width: 100%;
}
.product-list:after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  margin-top: -8px;
  position: absolute;
  right: 5px;
  top: 50%;
}
.product-wrap .product-list:last-child { border-bottom: none; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list { width: 172px; }
}

.product-list:nth-child(n+5) { margin-top: 30px; }
@media screen and (max-width: 667px) {
.product-list:nth-child(n+5) { margin-top: 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list:nth-child(n+5) { margin-top: 20px; }
}

.product-list:hover { text-decoration: none; }

.product-list:before {
  border: 1px solid #ccc;
  content: '';
  display: block;
  height: 230px;
  left: 10px;
  position: absolute;
  top: 0;
  width: 230px;
}
@media screen and (max-width: 667px) {
.product-list:before {
  height: 50px;
  left: 0;
  top: 15px;
  width: 50px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list:before {
  height: 162px;
  width: 162px;
}
}

.product-list:hover:before { border: 1px solid #1a5098; }

.product-list.no-click {
  cursor: default;
  pointer-events: none;
}

.product-list-picture {
  display: block;
  height: auto;
  max-height: 230px;
  max-width: 230px;
  width: auto;
}
@media screen and (max-width: 667px) {
.product-list-picture {
  max-height: 50px;
  max-width: 50px !important;
  min-width: 50px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-picture {
  max-height: 160px;
  max-width: 160px;
}
}

.product-list-description {
  color: #333;
  font-weight: 500;
  margin: 0 auto;
  width: 92%;
}
@media screen and (max-width: 667px) {
.product-list-description {
  margin: 0;
  padding: 0 0 0 4%;
  width: 80%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-description {
  margin: 10px auto 0;
  width: 100%;
}
}

.product-list-item-name {
  align-items: center;
  display: flex;
  height: 3.5em;
  margin: 0;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 667px) {
.product-list-item-name {
  display: block;
  height: auto;
  text-align: left;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-item-name { height: 2.5em; }
}

.item-name-inner {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
}
@media screen and (max-width: 667px) {
.item-name-inner {
  font-size: 13px;
  height: auto;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.item-name-inner {
  font-size: 14px;
  height: auto;
}
}

.product-list-item-name.item-label { margin-top: .5em; }
@media screen and (max-width: 667px) {
.product-list-item-name.item-label {
  margin-top: 0;
  padding-top: 1.2em;
}
}

.product-list-item-name.item-label:before {
  background-color: #1a5098;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  height: 22px;
  left: 0;
  line-height: 22px;
  margin: 0;
  padding: 0 .5em;
  position: absolute;
  text-align: center;
  top: -.2em;
}
@media screen and (max-width: 667px) {
.product-list-item-name.item-label:before {
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-item-name.item-label:before {
  font-size: 11px;
  height: 18px;
  line-height: 18px;
}
}

.product-list-item-name.item-label.tansyoku:before {
  background-color: #1b3163;
  content: '単色印刷';
}
.product-list-item-name.item-label.nairefuka:before {
  background-color: #ff9500;
  content: '名入れ不可';
}
.product-list-item-name.item-label.shinsyoku:before {
  background-color: #f7567c;
  content: '新色';
}
.product-list-item-name.item-label.renewal:before {
  background-color: #84dd63;
  content: 'リニューアル';
}
.product-list-item-name.item-label.fullcolor:before {
  background:linear-gradient(to right, #00afe2, #7bc352, #fd0, #eb7d3c, #ee0f59);
  color: #000;
  content: 'フルカラー印刷';
}

.product-new-mark:after {
  background-color: #f00;
  content: 'NEW';
  padding: 0 .3em;
}

.product-new-mark:after,
.product-new-color:after {
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 18px;
  color: #fff;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  height: 36px;
  left: 5px;
  line-height: 1;
  position: absolute;
  top: -15px;
  width: 36px;
  z-index: 2;
}
@media screen and (max-width: 667px) {
.product-new-mark:after,
.product-new-color:after {
  font-size: 10px;
  height: 30px;
  left: 0;
  top: 10px;
  width: 30px;
}
}



/* product icon multiple ---------- */
.product-icon-multiple {
  display: flex;
  height: 36px;
  justify-content: flex-start;
  left: -.5em;
  position: absolute;
  top: -1.1em;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 667px) {
.product-icon-multiple:before,
.product-icon-multiple:after { height: 30px; }
}

.product-icon-multiple .product-icon-multiple-item {
  display: block;
  height: auto;
  margin-right: .2em;
  max-width: 100%;
  width: auto;
}



.product-list-price {
  color: #000;
  font-size: 16px;
  line-height: 1;
  margin: 0;
}
@media screen and (max-width: 667px) {
.product-list-price {
  font-size: 12px;
  margin: 0.5em 0 0;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-price {
  font-size: 14px;
  margin: 0.5em 0 0;
}
}

.product-list-description .sentence {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 1em;
}
@media screen and (max-width: 667px) {
.product-list-description .sentence { font-size: 12px; }
}


.msec-article-product {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  font-weight: 500;
  justify-content: space-between;
  line-height: 1.3;
  margin-bottom: 1.25em;
  width: 100%;
}
@media screen and (max-width: 667px) {
.msec-article-product {
  font-size: 14px;
  margin-bottom: 3em;
}
.product-wrap .msec-article-product:last-child { margin-bottom: 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-product { font-size: 15px; }
}

.msec-article-product-figure {
  display: block;
  width: 19%;
}
@media screen and (max-width: 667px) {
.msec-article-product-figure { width: 100%; }
}

.msec-article-product-image {
  border: 1px solid #ccc;
  display: block;
  height: auto;
  max-width: 100%;
}

.msec-article-product-spec { width: 79%; }
@media screen and (max-width: 667px) {
.msec-article-product-spec {
  margin: 1.2em 0 0;
  width: 100%;
}
}

.msec-article-product-name {
  color: #000;
  font-size: 1.125em;
  font-weight: 600;
  margin: 0;
  padding: 0 0 .5em;
}
@media screen and (max-width: 667px) {
.msec-article-product-name { padding-bottom: 1em; }
}

.msec-article-product-deployment {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
}

.msec-article-product-deployment-dt {
  color: #000;
  font-size: 1em;
  margin: 0;
  padding: 0;
  width: 13%;
}
@media screen and (max-width: 667px) {
.msec-article-product-deployment-dt {
  font-weight: 400;
  width: 100%;
}
}

.msec-article-product-deployment-dd {
  color: #000;
  font-size: 1em;
  margin: 0;
  padding: 0;
  width: 87%;
}
@media screen and (max-width: 667px) {
.msec-article-product-deployment-dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
}

.msec-article-product-deployment span {
  display: inline-block;
  font-size: 1em;
}
@media screen and (max-width: 667px) {
.msec-article-product-deployment span {
  display: block;
  margin: .3em 0 0;
  position: relative;
  width: 49%;
}
}

.msec-article-product-deployment-dd a {
  color: #1a5098;
  font-size: 1em;
  text-decoration: underline;
  transition: .3s;
}
@media screen and (max-width: 667px) {
.msec-article-product-deployment-dd a {
  background-color: #1a5098;
  border-radius: .5em;
  color: #fff;
  display: block;
  font-size: .9em;
  font-weight: 600;
  padding: .2em .5em;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  width: 100%;
}
.msec-article-product-deployment-dd a:after {
  content: ' ＞';
  display: block;
  font-size: .8em;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
}
}

.msec-article-product-deployment-dd a:hover { color: #00a0e9; }

.msec-aricle-product-features {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.msec-aricle-product-features-li {
  font-size: 1em;
  margin: 0;
  padding: 0 0 .5em 1rem;
  position: relative;
}

.msec-aricle-product-features-li:before {
  content: '・';
  left: 0;
  position: absolute;
  top: 0;
}


.msec-article-table {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  width: 100%;
}

.msec-article-paragraph .msec-article-table { margin-bottom: 1em; }

.msec-article-th {
  background-color: #f2f2f2;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  padding: 10px 1%;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
@media screen and (max-width: 667px) {
.msec-article-th {
  font-size: 13px;
  white-space: normal;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-th {
  font-size: 14px;
  white-space: normal;
}
}

.msec-article-th.align-center { text-align: center; }

.msec-article-td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  padding: 10px 1%;
  text-align: left;
  vertical-align: middle;
}
@media screen and (max-width: 667px) {
.msec-article-td {
  font-size: 13px;
  vertical-align: top;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-td {
  font-size: 13px;
  vertical-align: top;
}
}

.msec-article-td .sentence:last-child { padding-bottom: 0; }

.msec-article-ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

.msec-article-list {
  font-size: 18px;
  padding: 0.5em 0 0.5em 1.5em;
  position: relative;
}
@media screen and (max-width: 667px) {
.msec-article-list { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-list { font-size: 15px; }
}

.msec-article-ul .msec-article-list:first-child { margin-top: 0; }

.msec-article-list:before {
  left: 0;
  position: absolute;
}

.msec-article-list.circle,
.msec-article-list.number,
.msec-article-list.check { padding-left: 1em; }
.msec-article-list.circle:before,
.msec-article-list.number:before,
.msec-article-list.check:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 0.8em;
  font-weight: 900;
  line-height: 1;
  top: 1em;
}
.msec-article-list.circle:before {
  color: #b7b7b7;
  content: '\f111';
}
.msec-article-ul .msec-article-list.number:nth-child(1):before { content: '1.'; }
.msec-article-ul .msec-article-list.number:nth-child(2):before { content: '2.'; }
.msec-article-ul .msec-article-list.number:nth-child(3):before { content: '3.'; }
.msec-article-ul .msec-article-list.number:nth-child(4):before { content: '4.'; }
.msec-article-ul .msec-article-list.number:nth-child(5):before { content: '5.'; }
.msec-article-ul .msec-article-list.number:nth-child(6):before { content: '6.'; }
.msec-article-ul .msec-article-list.number:nth-child(7):before { content: '7.'; }
.msec-article-ul .msec-article-list.number:nth-child(8):before { content: '8.'; }
.msec-article-ul .msec-article-list.number:nth-child(9):before { content: '9.'; }
.msec-article-ul .msec-article-list.number:nth-child(10):before { content: '10.'; }
.msec-article-ul .msec-article-list.number:nth-child(11):before { content: '11.'; }
.msec-article-ul .msec-article-list.number:nth-child(12):before { content: '12.'; }
.msec-article-ul .msec-article-list.number:nth-child(13):before { content: '13.'; }
.msec-article-ul .msec-article-list.number:nth-child(14):before { content: '14.'; }
.msec-article-ul .msec-article-list.number:nth-child(15):before { content: '15.'; }
.msec-article-ul .msec-article-list.number:nth-child(16):before { content: '16.'; }
.msec-article-ul .msec-article-list.number:nth-child(17):before { content: '17.'; }
.msec-article-ul .msec-article-list.number:nth-child(18):before { content: '18.'; }
.msec-article-ul .msec-article-list.number:nth-child(19):before { content: '19.'; }
.msec-article-ul .msec-article-list.number:nth-child(20):before { content: '20.'; }

.msec-article-ul .msec-article-list.maru-number:nth-child(1):before { content: '①'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(2):before { content: '②'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(3):before { content: '③'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(4):before { content: '④'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(5):before { content: '⑤'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(6):before { content: '⑥'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(7):before { content: '⑦'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(8):before { content: '⑧'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(9):before { content: '⑨'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(10):before { content: '⑩'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(11):before { content: '⑪'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(12):before { content: '⑫'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(13):before { content: '⑬'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(14):before { content: '⑭'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(15):before { content: '⑮'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(16):before { content: '⑯'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(17):before { content: '⑰'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(18):before { content: '⑱'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(19):before { content: '⑲'; }
.msec-article-ul .msec-article-list.maru-number:nth-child(20):before { content: '⑳'; }

.msec-article-list.check:before {
  color: #b7b7b7;
  content: '\f00c';
}

.frame-border {
  border: 1px solid #000;
  padding: 15px;
}
.msec-article-photo-right .frame-border { width: 52%; }
@media only screen and (max-width: 667px) {
.frame-border,
.msec-article-photo-right .frame-border {
  margin: 0 auto;
  width: 95%;
}
}

.frame-border-sentence {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  padding: 0 0 1em;
}
@media only screen and (max-width: 667px) {
.frame-border-sentence {
  font-size: 14px;
  line-height: 1.5;
}
}

.frame-border-sentence:last-child { padding-bottom: 0; }

.date-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 1em;
}

.date-list-dt,
.date-list-dd {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: 0.5em;
}
@media only screen and (max-width: 667px) {
.date-list-dt,
.date-list-dd {
  font-size: 14px;
  line-height: 1.3;
}
}

.date-list-dt { width: 12%; }
@media only screen and (max-width: 667px) {
.date-list-dt {
  display: block;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.date-list-dt { width: 15%; }
}

.date-list-dd { width: 88%; }
@media only screen and (max-width: 667px) {
.date-list-dd {
  display: block;
  padding-bottom: 1.5em;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.date-list-dd { width: 85%; }
}

.msec-article-thumbnail-dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
}
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-dl { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-dl { width: 90%; }
}

.msec-article-thumbnail-dl-group {
  margin-top: 50px;
  padding-left: 120px;
}
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-dl-group {
  margin-top: 20px;
  padding-left: 80px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-dl-group {
  margin-top: 30px;
  padding-left: 100px;
}
}

.msec-article-thumbnail-dl-group.rows2 { width: 48%; }
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-dl-group.rows2 { width: 100%; }
}

.msec-article-thumbnail-dt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  padding-bottom: 0.5em;
}
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-dt { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-dt { font-size: 15px; }
}

.msec-article-thumbnail-dd {
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 1em;
}
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-dd {
  font-size: 13px;
  line-height: 1.5;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-dd {
  font-size: 14px;
  line-height: 1.5;
}
}

.msec-article-thumbnail-dl .msec-article-thumbnail-dd:last-child { padding-bottom: 0; }

.msec-article-thumbnail-commentary { font-size: 0.8em; }
@media only screen and (max-width: 667px) {
.msec-article-thumbnail-commentary { font-size: 11px; }
}

.msec-article-quote {
  background-color: #eee;
  margin-bottom: 20px;
  padding: 50px 50px 40px;
  position: relative;
}
@media only screen and (max-width: 667px) {
.msec-article-quote { padding: 30px 20px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-quote { padding: 50px 50px 40px; }
}

.msec-article-quote:before,
.msec-article-quote:after {
  color: #ccc;
  font-family: 'Font Awesome 5 Free';
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  position: absolute;
}
@media only screen and (max-width: 667px) {
.msec-article-quote:before,
.msec-article-quote:after { font-size: 20px; }
}

.msec-article-quote:before {
  content: '\f10d';
  left: 20px;
  top: 20px;
}
@media only screen and (max-width: 667px) {
.msec-article-quote:before {
  left: 10px;
  top: 10px;
}
}

.msec-article-quote:after {
  content: '\f10e';
  bottom: 20px;
  right: 20px;
}
@media only screen and (max-width: 667px) {
.msec-article-quote:after {
  bottom: 10px;
  right: 10px;
}
}

.msec-article-quote .sentence {
  color: #333;
  font-size: 16px;
}
@media only screen and (max-width: 667px) {
.msec-article-quote .sentence {
  font-size: 14px;
  line-height: 1.5;
}
}

.msec-article-cta-headline {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  text-align: center;
}
@media only screen and (max-width: 667px) {
.msec-article-cta-headline { font-size: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-headline { font-size: 17px; }
}

.msec-article-cta-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1em 0 2em;
  width: 1000px;
}
@media only screen and (max-width: 667px) {
.msec-article-cta-wrap { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-wrap { width: 90%; }
}

.msec-article-cta-button {
  align-items: center;
  background-color: #fff;
  border: 1px solid #1a5098;
  color: #1a5098;
  display: flex;
  height: 72px;
  justify-content: center;
  margin: 0 auto;
  padding: 0 1em;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
}
@media only screen and (max-width: 667px) {
.msec-article-cta-button {
  height: 45px;
  margin: 15px auto 0;
  padding: 0 0.5em;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-button {
  height: 52px;
  padding: 0 1em;
}
}

.msec-article-cta-button { width: 100%; }
.msec-article-cta-button.rows1 { width: 1000px; }
.msec-article-cta-button.rows2 { width: 450px; }
.msec-article-cta-button.rows3 { width: 320px; }
.msec-article-cta-button.rows4 { width: 240px; }
.msec-article-cta-button.rows5 { width: 210px; }
@media only screen and (max-width: 414px) {
.msec-article-cta-button,
.msec-article-cta-button.rows1,
.msec-article-cta-button.rows2,
.msec-article-cta-button.rows3,
.msec-article-cta-button.rows4,
.msec-article-cta-button.rows5 { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-button,
.msec-article-cta-button.rows1 { width: 80%; }
.msec-article-cta-button.rows2 { width: 48%; }
.msec-article-cta-button.rows3 { width: 32%; }
.msec-article-cta-button.rows4 { width: 48%; }
.msec-article-cta-button.rows5 { width: 19%; }
}

.msec-article-cta-wrap .msec-article-cta-button.rows2:nth-child(n+2),
.msec-article-cta-wrap .msec-article-cta-button.rows3:nth-child(n+3),
.msec-article-cta-wrap .msec-article-cta-button.rows4:nth-child(n+2),
.msec-article-cta-wrap .msec-article-cta-button.rows5:nth-child(n+5) { margin-bottom: 1em; }
@media screen and (max-width: 667px) {
.msec-article-cta-wrap .msec-article-cta-button.rows2:nth-child(n+2),
.msec-article-cta-wrap .msec-article-cta-button.rows3:nth-child(n+3),
.msec-article-cta-wrap .msec-article-cta-button.rows4:nth-child(n+2),
.msec-article-cta-wrap .msec-article-cta-button.rows5:nth-child(n+5) { margin-bottom: 0; }
}

.msec-article-cta-button:hover {
  background-color: #1a5098;
  border: 1px solid #1a5098;
  color: #fff;
  text-decoration: none;
}

.msec-article-cta-button.with-thumnail {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 20%;
  padding-left: 3em;
  position: relative;
}
@media screen and (max-width: 667px) {
.msec-article-cta-button.with-thumnail {
  background-size: 13%;
  padding-left: 2em;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-button.with-thumnail { padding-left: 2em; }
}

.msec-article-cta-button-inner {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 667px) {
.msec-article-cta-button-inner { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-cta-button-inner { font-size: 14px; }
}

.cta-button-small-text {
  display: block;
  font-size: 16px;
  margin: 0;
}
@media only screen and (max-width: 667px) {
.cta-button-small-text { font-size: 11px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.cta-button-small-text { font-size: 13px; }
}

.msec-article-thumbnail-wrap {
  display: flex;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 50px 0 0;
  width: 1000px;
}
@media screen and (max-width: 667px) {
.msec-article-thumbnail-wrap {
  border-top: 1px solid #eee;
  padding: 0;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-wrap {
  padding: 25px 0 0;
  width: 100%;
}
}

.msec-article-thumbnail-list {
  margin: 0;
  padding: 0 10px 50px;
  position: relative;
  width: 250px;
}
@media screen and (max-width: 667px) {
.msec-article-thumbnail-list {
  border-bottom: 1px solid #eee;
  box-shadow: none;
  padding: 0;
  width: 50%;
}
.msec-article-thumbnail-list:after,
.msec-article-thumbnail-list:nth-child(odd):before {
  background-color: #eee;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 2;
}
.msec-article-thumbnail-list:after { right: 0; }
.msec-article-thumbnail-list:nth-child(odd):before { left: 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-thumbnail-list {
  padding: 0 20px 50px;
  position: relative;
  width: 220px;
}
}

.msec-article-thumbnail-list:hover { text-decoration: none; }

.msec-article-thumbnail-figure {
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width: 667px) {
.msec-article-thumbnail-figure { width: 100%; }
}

.msec-article-thumbnail-picture {
  height: auto;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  width: 100%;
}

.msec-article-thumbnail-list:hover .msec-article-thumbnail-picture {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
}

.msec-article-thumbnail-date {
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  margin: 15px auto 0;
  position: relative;
  text-align: left;
  width: 95%;
}
@media screen and (max-width: 667px) {
.msec-article-thumbnail-date {
  font-size: 11px;
  margin: 0 auto;
  padding: 15px 0 20px;
  width: 90%;
}
}

.msec-article-thumbnail-headline {
  display: table;
  margin: 0 auto;
  width: 95%;
}
@media screen and (max-width: 667px) {
.msec-article-thumbnail-headline { display: block; }
}

.thumbnail-headline-inner {
  display: table-cell;
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  height: 3.5em;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}
@media screen and (max-width: 667px) {
.thumbnail-headline-inner {
  display: block;
  font-size: 13px;
  height: auto;
  line-height: 1.5;
  padding: 0 0 0.5em;
}
}

.msec-article-thumbnail-list:hover .msec-article-thumbnail-date,
.msec-article-thumbnail-list:hover .msec-article-thumbnail-headline { opacity: 0.7; }

.msec-article-section .msec-article-picture.wide-size-half:last-child,
.msec-article-section .msec-article-paragraph:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.rinker-list-wrap {
  display: flex;
  margin: 0 auto;
  width: 900px;
}
@media screen and (max-width: 667px) {
.rinker-list-wrap {
  flex-wrap: wrap;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.rinker-list-wrap { width: 100%; }
}

.rinker-list {
  display: block;
  transition: .3s;
}

.rinker-list.rows2 { width: 400px; }
.rinker-list-wrap .rinker-list.rows2:nth-child(even) { margin-left: 50px; }
@media screen and (max-width: 667px) {
.rinker-list.rows2 {
  margin-top: 40px;
  width: 100%;
}
.rinker-list-wrap .rinker-list.rows2:nth-child(even) { margin-left: 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.rinker-list.rows2 { width: 45%; }
}

.rinker-list-figure {
  display: block;
  width: 100%;
}

.rinker-list-figuration {
  align-items: center;
  display: flex;
  height: 5em;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media screen and (max-width: 667px) {
.rinker-list-figuration { height: 3em; }
}

.rinker-list-figuration-inner {
  color: #000;
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
}
@media screen and (max-width: 667px) {
.rinker-list-figuration-inner { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.rinker-list-figuration-inner { font-size: 16px; }
}

.rinker-list .msec-article-cta-button { width: 100%; }
@media screen and (max-width: 667px) {
.rinker-list .msec-article-cta-button { margin-top: 0; }
}

.rinker-list:hover { text-decoration: none; }
.rinker-list:hover .rinker-list-figure { opacity: .7; }

.msec-article-banner-button {
  display: block;
  margin: 10px auto 0;
  width: 50% !important;
}
@media screen and (max-width: 667px) {
.msec-article-banner-button { width: 90% !important; }
}

.msec-article-interview {
  margin: 0;
  padding: 0;
}

.msec-article-interview-wrap {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1.5em;
  width: 100%;
}

.msec-article-interview-dt {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  width: 10%;
}
@media screen and (max-width: 667px) {
.msec-article-interview-dt {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-interview-dt {
  font-size: 16px;
  line-height: 1.5;
}
}

.msec-article-interview-dd {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  width: 90%;
}
@media screen and (max-width: 667px) {
.msec-article-interview-dd {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-interview-dd {
  font-size: 16px;
  line-height: 1.5;
}
}



/* article history ---------- */
.msec-article-history-heading {
  background-color: #1a5098;
  border-radius: .2em;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: .3em .5em;
}
.msec-article-history-heading:nth-of-type(n+2) { margin-top: 2em; }
@media screen and (max-width: 667px) {
.msec-article-history-heading { font-size: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-history-heading { font-size: 17px; }
}

.msec-article-history {
  margin: 1em 0 0;
  padding: 0 0 0 2.5em;
  position: relative;
}

.msec-article-history:before {
  background-color: #1a5098;
  border-radius: 1em;
  content: '';
  display: block;
  height: 100%;
  left: 1em;
  position: absolute;
  top: 0;
  width: .3em;
}

.msec-article-history-title {
  color: #1a5098;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 .5em;
  position: relative;
}
@media screen and (max-width: 667px) {
.msec-article-history-title { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-history-title { font-size: 16px; }
}

.msec-article-history-title:before {
  background-color: #1a5098;
  border-radius: 1em;
  content: '';
  display: block;
  height: 1em;
  left: -1.6em;
  line-height: 1;
  position: absolute;
  top: .3em;
  width: 1em;
}
@media screen and (max-width: 667px) {
.msec-article-history-title:before { left: -2em; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.msec-article-history-title:before { left: -1.85em; }
}

.msec-article-history .sentence {
  margin: 0;
  padding: 0 0 1em;
}
.msec-article-history .sentence:last-child { padding-bottom: 0; }



/* product flex list ---------- */
.product-flex-list {
  color: #525263;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1.2em 0;
  padding: 0;
  position: relative;
  text-decoration: none;
  transition: .3s;
}

.product-flex-list:link,
.product-flex-list:visited,
.product-flex-list:active {
  color: #525263;
  text-decoration: none;
}

.product-flex-list:hover {
  color: #525263;
  opacity: .7;
  text-decoration: none;
}
.product-flex-list.no-link:hover { opacity: 1; }

.product-flex-list.rows1 { width: 100%; }
.product-flex-list.rows2 { width: 48%; }
.product-flex-list.rows2:nth-of-type(odd) { margin-right: 2%; }
@media screen and (max-width: 667px) {
.product-flex-list.rows2 { width: 90%; }
.product-flex-list.rows2:nth-of-type(odd) { margin-right: 0; }
}

.rows1 .product-flex-list-figure { width: 19%; }
.rows2 .product-flex-list-figure { width: 39.585%; }

.rows1 .product-flex-list-body { width: 79%; }
.rows2 .product-flex-list-body { width: 55%; }

.product-flex-list-subheading {
  font-size: 1.1em;
  font-weight: 600;
  margin: 1em 0 0;
  padding: 0 0 .5em;
}

.product-flex-list-picture {
  display: block;
  height: auto;
  max-width: 100%;
}

.product-flex-list:before {
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 24px;
  color: #fff;
  display: flex;
  font-weight: 600;
  height: 48px;
  left: 5px;
  line-height: 1;
  position: absolute;
  top: -15px;
  width: 48px;
  z-index: 2;
}

.product-flex-list.ranking-01:before,
.product-flex-list.ranking-02:before,
.product-flex-list.ranking-03:before,
.product-flex-list.ranking-04:before,
.product-flex-list.ranking-05:before,
.product-flex-list.ranking-06:before,
.product-flex-list.ranking-07:before,
.product-flex-list.ranking-08:before,
.product-flex-list.ranking-09:before,
.product-flex-list.ranking-10:before {
  background-color: transparent;
  border-radius: 0;
  content: '';
  height: 61px;
  left: 0;
  top: 0;
  width: 40px;
}

.product-flex-list.ranking-01:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_01.png); }
.product-flex-list.ranking-02:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_02.png); }
.product-flex-list.ranking-03:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_03.png); }
.product-flex-list.ranking-04:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_04.png); }
.product-flex-list.ranking-05:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_05.png); }
.product-flex-list.ranking-06:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_06.png); }
.product-flex-list.ranking-07:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_07.png); }
.product-flex-list.ranking-08:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_08.png); }
.product-flex-list.ranking-09:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_09.png); }
.product-flex-list.ranking-10:before { background-image: url(/html/user_data/assets/img/msec-article/common/rank_10.png); }

.product-flex-list.new-mark:before {
  background-color: #f00;
  content: 'NEW';
  padding: 0 0.3em;
}

.product-flex-list.new-color:before {
  background-image: url(/html/user_data/assets/img/msec-article/common/icon-new-color.png);
  content: '新色';
  padding: 0 0.5em;
}



/* banner link ---------- */
.msec-article-banner-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
}
@media screen and (max-width: 667px) {
.msec-article-banner-link { width: 90%; }
}



/* blog middle headline ---------- */
.blog-middle-headline {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0 0 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.blog-middle-headline { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-middle-headline { font-size: 16px; }
}



/* blog thumbnail ---------- */
.blog-thumbnail-wrap {
  display: none;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  list-style-type: none;
  padding: 0 0 150px;
}
@media screen and (max-width: 667px) {
.blog-thumbnail-wrap { padding-bottom: 70px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-thumbnail-wrap { padding-bottom: 100px; }
}

.blog-thumbnail {
  display: block;
  margin: 0;
  padding: 0 !important;
  width: 30% !important;
}
@media screen and (max-width: 667px) {
.blog-thumbnail { width: 90% !important; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-thumbnail { width: 31% !important; }
}

.blog-thumbnail-link {
  display: block;
  transition: .3s;
}
.blog-thumbnail-link:hover { text-decoration: none; }

.blog-thumbnail-figure {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 2px #ccc;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.blog-thumbnail-image {
  display: block;
  height: auto;
  transition: all .3s ease-out;
  width: 100% !important;
}

.blog-thumbnail-link:hover .blog-thumbnail-image {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
}

.blog-thumbnail-headline {
  color: #000;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 8px 0 0;
  word-break: break-word;
}
@media screen and (max-width: 667px) {
.blog-thumbnail-headline { font-size: 13px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-thumbnail-headline { font-size: 14px; }
}

.blog-thumbnail-headline a,
.blog-thumbnail-headline a:hover { 
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: .3s;
}

.blog-thumbnail-headline a:hover { opacity: .7; }



/* blog writer ---------- */
.blog-writer {
  background-color: #f3f8fe;
  border-radius: 20px;
  display: none;
  margin: 0 auto;
  padding: 35px 30px 50px 180px;
  position: relative;
  width: 750px;
}
@media screen and (max-width: 667px) {
.blog-writer {
  min-height: auto;
  padding: 20px 20px 30px;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.blog-writer { width: 95%; }
}

.blog-writer:before {
  background-color: #1a5098;
  border-radius: 0 10px 10px 0;
  color: #fff;
  content: 'writer';
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  left: 0;
  line-height: 20px;
  padding: 0 .5em;
  position: absolute;
  top: 22px;
}
@media screen and (max-width: 667px) {
.blog-writer:before {
  left: 44.5%;
  top: 10%;
}
}

.blog-writer-figure {
  background-color: #fff;
  border-radius: 60px;
  left: 30px;
  position: absolute;
  top: 45px;
  width: 120px;
}
@media screen and (max-width: 667px) {
.blog-writer-figure {
  left: 20px;
  top: 20px;
}
}

.blog-writer-image { display: block; }
@media screen and (max-width: 667px) {
.blog-writer-figure {
  height: auto;
  max-width: 100%;
}
}

.blog-writer-inner { width: 100%; }

.blog-writer-dt {
  color: #1a5098;
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media screen and (max-width: 667px) {
.blog-writer-dt { padding: 3em 0 0 130px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
}

.blog-writer-department {
  color: #000;
  display: inline-block;
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 0 10px;
  padding: 0;
}
@media screen and (max-width: 667px) {
.blog-writer-department {
  display: block;
  font-size: 11px;
  margin: 1em 0 0;
}
}

.blog-writer-dd {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  margin: 1.1em 0 0;
  padding: 0;
}
@media screen and (max-width: 667px) {
.blog-writer-dd {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 3em;
  width: 100%;
}
}


/* read also ---------- */
.read-also-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 1em auto 0;
  width: 1000px;
}
@media screen and (max-width: 667px) {
.read-also-wrap { width: 100%; }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also-wrap { width: 100%; }
}

.read-also {
  border: 1px solid #1a5098;
  display: flex;
  justify-content: space-between;
  margin: 1.5em 0 0;
  padding: 30px 20px 20px;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 48%;
}
@media screen and (max-width: 667px) {
.read-also {
  flex-wrap: wrap;
  padding: 20px 10px 10px;
  width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also {
  padding-top: 25px;
  width: 100%;
}
}

.read-also:hover { text-decoration: none; }

.read-also-wrap .read-also:nth-child(even) { margin-left: 2%; }
@media screen and (max-width: 667px) {
.read-also-wrap .read-also:nth-child(even) { margin-left: 0; }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also-wrap .read-also:nth-child(even) { margin-left: 0; }
}

.read-also > p {
  background-color: #1a5098;
  border-radius: .9em;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  left: 20px;
  line-height: 1.73;
  margin: 0;
  padding: 0 1.2em;
  position: absolute;
  top: -.9em;
}
@media screen and (max-width: 667px) {
.read-also > p {
  font-size: 12px;
  left: 10px;
}
}
@media screen and (min-width: 415px) and (max-width: 1024px) {}

.read-also-figure {
  margin-right: 1em;
  max-width: 180px;
}
@media screen and (max-width: 667px) {
.read-also-figure {
  margin: 0 0 1em;
  max-width: 100%;
}
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also-figure { max-width: 100px; }
}

.read-also-figure img {
  display: block;
  height: auto;
}
@media screen and (max-width: 667px) {
.read-also-figure img { width: 100%; }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also-figure img { width: 100%; }
}

.read-also-body { width: 55%; }
@media screen and (min-width: 415px) and (max-width: 1024px) {
.read-also-body { width: 80%; }
}

.read-also-body p {
  color: #000;
  font-size: 15px;
  line-height: 1.46;
  margin: 0;
  padding: 0 0 1em;
}
@media screen and (max-width: 667px) {
.read-also-body p { font-size: 14px; }
}
@media screen and (min-width: 415px) and (max-width: 1024px) {}

.read-also-body p.text-align-right {
  bottom: 20px;
  color: #1a5098;
  font-size: 13px;
  padding: 0;
  position: absolute;
  right: 20px;
  text-align: right;
}
@media screen and (max-width: 667px) {
.read-also-body p.text-align-right {
  bottom: 5px;
  font-size: 12px;
  right: 10px;
}
}
@media screen and (min-width: 415px) and (max-width: 1024px) {}

.read-also-body p.text-align-right:after { content: '＞'; }
.read-also:hover .read-also-body p.text-align-right { text-decoration: underline; }



/* target blank ---------- */
.target-blank { position: relative; }
.target-blank:after {
  content: '\f35d';
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  padding-left: 0.2em;
}


/* bullet ---------- */
.bullet-circle,
.bullet-square,
.bullet-rhombus,
.bullet-midpoint {
  padding-left: 1.2em;
  position: relative;
}
.bullet-circle:before,
.bullet-square:before,
.bullet-rhombus:before,
.bullet-midpoint:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1em;
  font-weight: 900;
  line-height: 1.6em;
  left: 0;
  position: absolute;
  top: 0;
}
.bullet-circle:before { content: '●'; }
.bullet-square:before { content: '■'; }
.bullet-rhombus:before { content: '◆'; }
.bullet-midpoint:before { content: '・'; }


/* text ---------- */
.link-text {
  color: #1a5098;
  text-decoration: none;
}
.link-text.target-blank:after {
  content: ' \f35d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  text-decoration: none;
}
.indent-text { text-indent: -.6em; }
.underline-text { text-decoration: underline; }
.strong { font-weight: 900; }
.color-red { color: #ef233c; }


/* device ---------- */
.sp-only,
.tab-only { display: none; }
@media screen and (max-width: 667px) {
.sp-only { display: block; }
.pc-only,
.tab-only,
.pc-tab-only { display: none; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.tab-only,
.pc-tab-only { display: block; }
.pc-only,
.sp-only { display: none; }
}