@charset 'utf-8';

/* base style
======================================================== */
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);
@media all and (-ms-high-contrast: none) {
.main__content { font-family: 'メイリオ', Meiryo, sans-serif; }
}
@media screen and (max-width: 667px) {
.main__content { padding: 0; }
}
.main__content ol,
.main__content ul,
.main__content li { list-style: none; }
.column-main_inner {
  margin: 0 auto;
  padding-bottom: 100px;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.column-main_inner {
  padding-bottom: 50px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.column-main_inner { width: 95%; }
}


/* text style
======================================================== */
.link-text {
  color: #0098cb;
  text-decoration: underline;
}
.link-text:hover {
  color: #1a5098;
  text-decoration: none;
}
.target-blank { position: relative; }
.target-blank:after {
  content: '\f35d';
  display: inline-block;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  padding-left: .2em;
}
.link-text.target-blank:after { text-decoration: none; }
@media screen and (max-width: 667px) {
.target-blank:after { position: static; }
}

.reference-url {
  margin: 0 auto;
  padding: 0;
  text-align: right;
  width: 100%;
}
@media screen and (max-width: 667px) {
.reference-url {
  font-size: 12px;
  text-align: left;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.reference-url {
  font-size: 14px;
  width: 90%;
}
}

.align-center-text { text-align: center; }


/* article-header
======================================================== */
.article-header {
  border-bottom: none;
  max-width: 1040px;
  padding: 0 0 100px;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.article-header {
  margin: 0 auto;
  max-width: 95%;
  padding: 0 0 30px;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-header {
  max-width: 100%;
  padding: 0 0 50px;
  width: 100%;
}
}

.article-headline {
  margin: 0 auto;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.article-headline { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-headline { width: 100%; }
}

.keyvisual {
  display: block;
  height: auto;
  max-width: 1040px;
  width: 100%;
}
@media screen and (max-width: 667px) {
.keyvisual { max-width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.keyvisual { max-width: 100%; }
}

.article-header-introduction {
  margin: 0 auto;
  padding: 30px 0 50px;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.article-header-introduction {
  padding: 20px 0 15px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-header-introduction {
  padding: 40px 0 35px;
  width: 100%;
}
}

.article-header-introduction-sentence {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  padding: 0 0 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.article-header-introduction-sentence {
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-header-introduction-sentence {
  font-size: 14px;
  line-height: 1.5;
}
}

.article-header-introduction .article-header-introduction-sentence:last-child { padding-bottom: 0; }


/* article-section
======================================================== */
.article-section {
  display: block;
  margin: 0 auto;
  min-width: 1040px;
  padding: 0 0 100px;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.article-section {
  margin: 0 auto;
  min-width: 95%;
  padding: 0 0 60px;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-section {
  min-width: 100%;
  padding: 0 0 80px;
  width: 100%;
}
}

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


/* headline-underline-half
======================================================== */
.headline-underline-half {
  margin: 0 auto;
  padding-bottom: 20px;
  text-align: center;
}

.headline-underline-half-inner {
  border-bottom: 4px solid #1a5098;
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  padding: 0 5px 10px;
  position: relative;
}
@media screen and (max-width: 667px) {
.headline-underline-half-inner {
  border-bottom: 2px solid #1a5098;
  font-size: 15px;
  line-height: 1.125;
  margin: 0 auto;
  padding: 0 0 10px;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-underline-half-inner {
  border-bottom: 3px solid #1a5098;
  font-size: 20px;
  line-height: 1.25;
  padding: 0 0 10px;
}
}

.headline-underline-half-introduction {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  padding: 0 0 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.headline-underline-half-introduction {
  font-size: 13px;
  text-align: left;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-underline-half-introduction { font-size: 15px; }
}


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

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

.headline-frame-label {
  background-color: #fff;
  border-radius: 6px;
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  margin-right: 20px;
  padding: 0 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.headline-frame-label {
  font-size: 13px;
  line-height: 25px;
  margin-right: 5px;
}
}


/* headline-icon-top
======================================================== */
.headline-icon-top {
  margin: 0 0 30px;
  padding: 80px 0 24px;
  position: relative;
}
@media screen and (max-width: 667px) {
.headline-icon-top {
  margin-bottom: 15px;
  padding: 45px 0 11px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-icon-top {
  margin-bottom: 20px;
  padding: 50px 0 12px;
}
}

.headline-icon-top-inner {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 667px) {
.headline-icon-top-inner {
  font-size: 15px;
  line-height: 1.25;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-icon-top-inner {
  font-size: 16px;
  line-height: 1.25;
}
}

.headline-icon-top:before {
  content: '';
  display: block;
  height: 60px;
  left: 0;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 667px) {
.headline-icon-top:before {
  background-size: 35px 35px;
  height: 35px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-icon-top:before {
  background-size: 40px 40px;
  height: 40px;
}
}

.headline-icon-top:after {
  background-color: #ccc;
  content: '';
  display: block;
  height: 4px;
  left: 50%;
  margin-left: -35px;
  position: absolute;
  bottom: 0;
  width: 70px;
}
@media screen and (max-width: 667px) {
.headline-icon-top:after { height: 2px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-icon-top:after { height: 2px; }
}


/* headline-leftline
======================================================== */
.headline-leftline {
  align-items: center;
  border-left: 6px solid #1a5098;
  display: flex;
  margin: 0 auto 15px;
  min-width: 1040px;
  padding: .4em .5em;
  width: 100%;
}
@media screen and (max-width: 667px) {
.headline-leftline {
  border-left-width: 3px;
  margin-bottom: 10px;
  min-width: 98%;
  padding: .2em;
  width: 98%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-leftline {
  border-left-width: 4px;
  margin-bottom: 12px;
  min-width: 100%;
  width: 100%;
}
}

.article-section .headline-leftline:nth-of-type(n+2) { margin-top: 100px; }
@media screen and (max-width: 667px) {
.article-section .headline-leftline:nth-of-type(n+2) { margin-top: 50px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-section .headline-leftline:nth-of-type(n+2) { margin-top: 70px; }
}

.headline-leftline-inner {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
@media screen and (max-width: 667px) {
.headline-leftline-inner { font-size: 14px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-leftline-inner { font-size: 16px; }
}


/* headline-leftline-underline
======================================================== */
.headline-leftline-underline {
  align-items: center;
  border-bottom: 2px solid #1a5098;
  border-left: 6px solid #1a5098;
  display: flex;
  margin: 0 auto 15px;
  min-width: 1040px;
  padding: .4em .5em;
  width: 100%;
}
@media screen and (max-width: 667px) {
.headline-leftline-underline {
  border-left-width: 3px;
  margin-bottom: 10px;
  min-width: 100%;
  padding: .2em;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-leftline-underline {
  border-left-width: 4px;
  margin-bottom: 12px;
  min-width: 100%;
  width: 100%;
}
}

.article-section .headline-leftline-underline:nth-of-type(n+2) { margin-top: 100px; }
@media screen and (max-width: 667px) {
.article-section .headline-leftline-underline:nth-of-type(n+2) { margin-top: 50px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-section .headline-leftline-underline:nth-of-type(n+2) { margin-top: 70px; }
}

.headline-leftline-underline-inner {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
@media screen and (max-width: 667px) {
.headline-leftline-underline-inner { font-size: 13px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-leftline-underline-inner { font-size: 16px; }
}


/* article-section-introduction
======================================================== */
.article-section-introduction {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  padding: 0 0 1em;
}
@media screen and (max-width: 667px) {
.article-section-introduction {
  font-size: 13px;
  line-height: 1.75;
  margin: 0 auto;
  width: 98%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.article-section-introduction { font-size: 15px; }
}

.headline-icon-top-introduction {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  padding: 0 0 1em;
  text-align: center;
}
@media screen and (max-width: 667px) {
.headline-icon-top-introduction {
  font-size: 13px;
  text-align: left;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.headline-icon-top-introduction { font-size: 15px; }
}


/* product-wrap
======================================================== */
.product-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-top: 30px;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.product-wrap {
  padding-top: 0;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-wrap {
  padding-top: 20px;
  width: 100%;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-wrap {
  padding-top: 20px;
  width: 100%;
}
}

.product-wrap.justify-center { justify-content: center; }


/* product-list
======================================================== */
.product-list {
  background-color: #fff;
  display: block;
  margin: 0 0 0 13px;
  padding: 0 0 40px;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 250px;
}
@media screen and (max-width: 667px) {
.product-list {
  align-items: flex-start;
  border-bottom: 1px dotted #ddd;
  display: flex;
  margin: 0;
  padding: 15px 15px 15px 0;
  width: 100%;
}
.product-list:first-child { border-top:1px dotted #ddd; }
.product-list:last-child { border-bottom: none; }
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-list {
  margin: 0 0 0 7px;
  padding: 0 0 30px;
  width: 177px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-list {
  margin: 0 0 0 13px;
  padding: 0 0 30px;
  width: 157px;
}
}

.product-list.type-ranking { margin-left: 10px !important; }
.product-list.type-ranking:nth-child(1) { margin-left: 0 !important; }
@media screen and (max-width: 667px) {
.product-list.type-ranking { margin-left: 0 !important; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {}

.product-list.type-ranking:nth-of-type(-n+3) { width: 210px; }
.product-list.type-ranking:nth-of-type(n+4) {
  padding-top: 25px;
  width: 185px;
}
@media screen and (max-width: 667px) {
.product-list.type-ranking:nth-of-type(-n+3) { width: 100%; }
.product-list.type-ranking:nth-of-type(n+4) {
  padding-top: 15px;
  width: 100%;
}
}

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

.product-list:before {
  border: 1px solid #ccc;
  content: '';
  display: block;
  height: 250px;
  left: 0;
  position: absolute;
  top: 0;
  width: 250px;
}
@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: 768px) {
.product-list:before {
  height: 177px;
  width: 177px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-list:before {
  height: 157px;
  width: 157px;
}
}

.product-list.type-ranking:nth-of-type(-n+3):before {
  height: 210px;
  width: 210px;
}
.product-list.type-ranking:nth-of-type(n+4):before {
  height: 185px;
  top: 25px;
  width: 185px;
}
@media screen and (max-width: 667px) {
.product-list.type-ranking:nth-of-type(-n+3):before,
.product-list.type-ranking:nth-of-type(n+4):before {
  height: 50px;
  top: 15px;
  width: 50px;
}
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-list.type-ranking:nth-of-type(-n+3):before,
.product-list.type-ranking:nth-of-type(n+4):before {
  height: 177px;
  width: 177px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-list.type-ranking:nth-of-type(-n+3):before,
.product-list.type-ranking:nth-of-type(n+4):before {
  height: 157px;
  width: 157px;
}
}

.product-list:hover:before { border: 1px solid #1a5098; }
@media screen and (max-width: 667px) {
.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-list:nth-of-type(1),
.product-list:nth-of-type(4n+1) { margin-left: 0; }
.product-list-picture {
  display: block;
  height: auto;
  max-height: 250px;
  max-width: 250px;
  width: auto;
}
@media screen and (max-width: 667px) {
.product-list-picture {
  height: 50px;
  width: 50px;
}
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-list-picture {
  max-height: 175px;
  max-width: 175px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-list-picture {
  max-height: 155px;
  max-width: 155px;
}
}

.product-list.type-ranking:nth-of-type(-n+3) .product-list-picture {
  height: 210px;
  width: 210px;
}
.product-list.type-ranking:nth-of-type(n+4) .product-list-picture {
  height: 185px;
  width: 185px;
}
@media screen and (max-width: 667px) {
.product-list.type-ranking:nth-of-type(-n+3) .product-list-picture,
.product-list.type-ranking:nth-of-type(n+4) .product-list-picture {
  height: 50px;
  width: 50px;
}
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-list.type-ranking:nth-of-type(-n+3) .product-list-picture,
.product-list.type-ranking:nth-of-type(n+4) .product-list-picture {
  max-height: 175px;
  max-width: 175px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.product-list.type-ranking:nth-of-type(-n+3) .product-list-picture,
.product-list.type-ranking:nth-of-type(n+4) .product-list-picture {
  max-height: 155px;
  max-width: 155px;
}
}

.product-list-description {
  color: #333;
  font-weight: 500;
  margin: 0;
}
@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 {
  padding: 10px 0 0;
  width: 92%;
}
}

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

.product-list-description .product-list-item-name:last-child { padding-bottom: 0; }

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

.product-list-item-name.item-label {
  margin-top: .5em;
  padding-top: 1.2em;
}
@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.fullcolor:before {
  background:linear-gradient(to right, #00afe2, #7bc352, #fd0, #eb7d3c, #ee0f59);
  color: #000;
  content: 'フルカラー印刷';
}

.product-list-price {
  font-size: 14px;
  line-height: 1;
  margin: 0;
  padding-bottom: 1em;
}
@media screen and (max-width: 667px) {
.product-list-price { font-size: 12px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-price {
  font-size: 12px;
  margin-top: .5em;
}
}

.product-list-description .product-list-price:last-child { padding-bottom: 0; }

.product-list-text {
  font-size: 14px;
  margin: 0;
  line-height: 1.4;
}
@media screen and (max-width: 667px) {
.product-list-text { font-size: 12px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-text {
  font-size: 12px;
  line-height: 1.4;
}
}

.product-list-more-button {
  align-items: center;
  border: 1px solid #ff9500;
  display: flex;
  height: 40px;
  margin: 0;
  width: 100%;
}
@media screen and (max-width: 667px) {
.product-list-more-button {
  height: 20px;
  margin-top: 1em;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-more-button {
  height: 25px;
  margin-top: 1em;
}
}

.product-list-more-button-inner {
  color: #ff9500;
  display: block;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
@media screen and (max-width: 667px) {
.product-list-more-button-inner { font-size: 13px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-list-more-button-inner { font-size: 12px; }
}

.product-list-more-button:hover { background-color: #ff9500; }
.product-list-more-button:hover .product-list-more-button-inner { color: #fff; }

.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-renewal:after {
  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-renewal:after {
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  width: 70px;
}
}

.product-new-mark:after {
  background-color: #f00;
  content: 'NEW';
  padding: 0 .3em;
}
.product-new-color:after {
  background-image: url(/html/user_data/assets/img/common/icon-new-color.png);
  content: '新色';
  padding: 0 .5em;
}
.product-renewal:after {
  background-color: #84dd63;
  content: 'リニューアル';
  padding: 0 .5em;
}


/* button-border
======================================================== */
.button-border {
  align-items: center;
  background-color: #1a5098;
  border: 3px solid #fff;
  box-shadow: 2px 2px 2px #ccc;
  display: flex;
  height: 75px;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 100%;
}
@media screen and (max-width: 667px) {
.button-border {
  border: 2px solid #fff;
  margin: 10px auto 0;
  height: 45px;
  width: 95%;
}
.button-border:first-child { margin: 0 auto; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.button-border {
  border: 2px solid #fff;
  height: 50px;
  width: 80%;
}
}

.button-border:after {
  color: #fff;
  content: '\f138';
  font-family: 'Font Awesome 5 Free';
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  position: absolute;
  right: .5em;
  top: 25px;
}
@media screen and (max-width: 667px) {
.button-border:after { display: none; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.button-border:after {
  font-size: 14px;
  top: 15px;
}
}

.button-border:link,
.button-border:visited,
.button-border:hover,
.button-border:active { text-decoration: none !important; }

.button-border.rows1 { width: 850px; }
.button-border.rows2 { width: 385px; }
.button-border.rows3 { width: 270px; }
.button-border.rows4 { width: 260px; }
.button-border.rows5 { width: 210px; }
@media screen and (max-width: 667px) {
.button-border.rows1,
.button-border.rows2,
.button-border.rows3,
.button-border.rows4,
.button-border.rows5 {
  margin: 20px auto 0;
  width: 95%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.button-border.rows1 { width: 80%; }
.button-border.rows2 { width: 48%; }
.button-border.rows3 { width: 32%; }
.button-border.rows4 { width: 24%; }
.button-border.rows5 { width: 19%; }
}


/* button hover & arrow-direction
======================================================== */
.button-border:hover {
  background-color: #fff;
  border-color: #1a5098;
  color: #1a5098;
  text-decoration: none;
}

.button-border:hover .button-inner { color: #1a5098; }
.button-border:hover:after { color: #1a5098; }
.button-border.arrow-down:after { transform: rotate(90deg); }


/* button-inner
======================================================== */
.button-inner {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
@media screen and (max-width: 667px) {
.button-inner { font-size: 13px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.button-inner { font-size: 14px; }
}


/* button wrap
======================================================== */
.button-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 850px;
}
@media screen and (max-width: 667px) {
.button-wrap { width: 100%; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.button-wrap { width: 95%; }
}

.button-wrap.flex-center { justify-content: center; }

.button-wrap .button-border { margin: 20px 0 0; }
@media screen and (max-width: 667px) {
.button-wrap .button-border { margin: 10px auto 0; }
}

.product-wrap + .button-wrap,
.product-wrap + .button-border { margin-top: 10px; }
@media screen and (max-width: 667px) {
.product-wrap + .button-wrap,
.product-wrap + .button-border { margin-top: 15px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.product-wrap + .button-wrap,
.product-wrap + .button-border { margin-top: 10px; }
}


/* under-button-sentence
======================================================== */
.under-button-sentence {
  font-size: 16px;
  line-height: 1.75;
  margin: 50px auto 0;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 667px) {
.under-button-sentence {
  font-size: 11px;
  line-height: 1.5;
  margin: 25px auto 0;
  text-align: left;
  width: 93%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.under-button-sentence {
  font-size: 13px;
  line-height: 1.5;
  margin: 30px auto 0;
}
}

.under-button-emphasis-sentence { font-weight: 500; }

.under-button-sentence + .button-border { margin-top: 30px; }
@media screen and (max-width: 667px) {
.under-button-sentence + .button-border { margin-top: 10px; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.under-button-sentence + .button-border { margin-top: 20px; }
}


/* figure-menu
======================================================== */
.figure-menu-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
@media screen and (max-width: 667px) {
.figure-menu-wrap {
  justify-content: left;
  padding-bottom: 15px;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.figure-menu-wrap { width: 80%; }
}

.figure-menu-list:nth-of-type(n+6) { margin-top: 20px; }
@media screen and (max-width: 667px) {
.figure-menu-list:nth-of-type(n+6) { margin-top: 0; }
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.figure-menu-list:nth-of-type(n+6) { margin-top: 0; }
}

.figure-menu-list {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  height: 184px;
  margin: 0 10px;
  position: relative;
  width: 184px;
}
@media screen and (max-width: 667px) {
.figure-menu-list {
  height: auto;
  margin: 0 .5%;
  padding-top: calc(100/300*100%);
  width: 32%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.figure-menu-list {
  height: auto;
  margin: 0 .5%;
  padding-top: calc(100/500*100%);
  width: 19%;
}
}

.figure-menu-link {
  background-color: #fff;
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: .3s;
  width: 100%;
}

.figure-menu-link:hover { opacity: .3; }


/* thumbnail-commentary
======================================================== */
.thumbnail-commentary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1em 0;
  width: 1040px;
}
@media screen and (max-width: 667px) {
.thumbnail-commentary {
  align-items: flex-start;
  padding: 0;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.thumbnail-commentary { width: 100%; }
}

.thumbnail-commentary.row-reverse { flex-direction: row-reverse; }
@media screen and (max-width: 667px) {
.thumbnail-commentary.row-reverse { flex-direction: column; }
}

.thumbnail-commentary-figure { width: 48%; }
@media screen and (max-width: 667px) {
.thumbnail-commentary-figure { width: 100%; }
}

.thumbnail-commentary-picture {
  display: block;
  height: auto;
  width: 100%;
}

.thumbnail-commentary-body {
  height: 100%;
  padding: .5em 0;
  width: 48%;
}
@media screen and (max-width: 667px) {
.thumbnail-commentary-body {
  padding: 1em 0;
  width: 100%;
}
}

.thumbnail-commentary-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0 0 1em;
  width: 100%;
}
@media screen and (max-width: 667px) {
.thumbnail-commentary-title {
  font-size: 15px;
  line-height: 1.25;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.thumbnail-commentary-title { font-size: 16px; }
}

.thumbnail-commentary-copy {
  display: block;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0 0 1em;
}
@media screen and (max-width: 667px) {
.thumbnail-commentary-copy {
  font-size: 11px;
  line-height: 1.25;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
thumbnail-commentary-copy {
  font-size: 11px;
  line-height: 1.25;
}
}

.thumbnail-commentary-sentence {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  padding: 0 0 1em;
}
@media screen and (max-width: 667px) {
.thumbnail-commentary-sentence {
  font-size: 13px;
  line-height: 1.5;
}
}
@media only screen and (min-width: 668px) and (max-width: 1024px) {
.thumbnail-commentary-sentence {
  font-size: 14px;
  line-height: 1.5;
}
}
.thumbnail-commentary-sentence:last-child { padding-bottom: 0; }


.indent-text { text-indent: -1em; }

/* 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; }
}