@charset "utf-8";

/* common --------------- */
.brackets-indent { text-indent: -0.6em; }
.emphasis-text { font-weight: 700 !important; }

.indent-text { text-indent: -0.6em; }
.link-text { color: var(--skyblue); }
@media screen and (min-width: 1367px) {
.link-text { transition: .3s; }
.link-text:hover {
  color: var(--skyblue);
  text-decoration: none;
}
.link-text:visited,
.link-text:active {
  color: var(--skyblue);
  text-decoration: underline;
}
}

.marker-text {
  background: linear-gradient(transparent 75%, #ff0 75%);
  font-weight: bold;
}
.quote_link { word-break: break-all; }
.strong {
  font-size: 1.0625em;/* 17px */
  font-weight: bold;
}
.underline { text-decoration: underline; }
.target-blank { position: relative; }
.target-blank:after {
  content: ' \f35d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  text-decoration: none;
}
.center-text { text-align: center; }

.page_content {
  margin: 0 auto;
  padding-bottom: 100px;
  width: 95%;
}
@media screen and (min-width: 1367px) {
.page_content { padding-bottom: 300px; }
}



/* archive --------------- */
.page_archive {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 1367px) {
.page_archive {
  margin: 0 auto;
  width: 1200px;
}
}


/* archive --------------- */
@media screen and (min-width: 1367px) {
.archive_wrap {
  margin: 0;
  padding-top: 0;
  width: 1000px;
}
}

.archive_list {
  padding: 0;
  width: 47%;
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
.archive_list { width: 31.7%; }
}
@media screen and (min-width: 1367px) {
.archive_list { width: 300px; }
}

.archive_update {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin: .5em 0 0;
}

@media screen and (min-width: 1367px) {
.pagination-container { width: 1000px; }
}

.archive_list_label_wrap { min-height: 0; }



/* aside tab list ------------- */
.tab-list {
  display: block;
  margin: 2em auto 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.tab-list {
  opacity: 0;
  position: fixed;
  right: 0;
  top: 15%;
  transition:  all 0.3s ease 0s;
  width: 260px;
}
.is-in .tab-list { opacity: 1; }
}

.tab-list_header_wrap {
  display: flex;
  position: relative;
  width: 100%;
}

.tab-list_header {
  align-items: center;
  background-color: var(--skyblue-light);
  border-bottom: none;
  border-left: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  border-top: 1px solid var(--navy);
  border-radius: 20px 20px 0 0;
  color: var(--navy);
  display: flex;
  font-size: 18px;
  font-weight: 500;
  height: 50px;
  justify-content: center;
  width: 50%;
}
@media screen and (min-width: 1367px) {
.tab-list_header {
  cursor: pointer;
  transition: .3s;
  width: 160px;
}
}

.tab-list_header.is-active {
  background-color: var(--navy);
  color: #fff;
  pointer-events: none;
  z-index: 2;
}

@media screen and (min-width: 1367px) {
.tab-list_header:hover { background-color: #fff; }
}

.tab-list_main {
  background-color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0 0 20px 20px;
  display: none;
  flex-wrap: wrap;
  padding: 1.5em 1em;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1367px) {
.tab-list_main {
  border-radius: 0 0 0 20px;
  padding: 34px 20px;
}
}

.tab-list_main.is-active { display: flex; }
.tab-list_main.list-tag {
  gap: .5em;
  padding: 34px 15px;
}

.list-category li {
  display: block;
  width: 100%;
}

.list-category li:nth-child(n+2) { border-top: 1px solid #fff; }

.list-category li a {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
  position: relative;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.list-category li a { transition: .5s; }
.list-category li a:hover { color: var(--yellow); }
.list-category li a:hover,
.list-category li a:visited,
.list-category li a:active { text-decoration: none; }
}

.list-category li a:after {
  background-color: #fff;
  background-image: url(/assets/images/common/icon_arrow_navy.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 11px 10px;
  border-radius: 10px;
  content: '';
  display: block;
  height: 20px;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
}

.list-category li.is-current a { color: var(--yellow); }

.list-tag li { display: inline-block; }

.list-tag li a {
  background-color: var(--skyblue-light);
  border-radius: .9em;
  color: var(--navy);
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.73;
  padding: 0 1em;
  text-decoration: none;
}
@media screen and (min-width: 1367px) {
.list-tag li a { transition: .5s; }
.list-tag li a:hover { background-color: var(--yellow); }
.list-tag li a:hover,
.list-tag li a:visited,
.list-tag li a:active { text-decoration: none; }
}

.list-tag li.is-current a { background-color: var(--yellow); }



/* column detail ------------- */
.article {
  margin: 0 auto;
  width: 95%;
}
@media screen and (min-width: 1367px) {
.article { width: 1000px; }
}

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

.article-datetime_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin-top: 1.5em;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.article-datetime_wrap {
  flex-wrap: nowrap;
  gap: 2em;
}
}

.article-datetime_wrap span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
@media screen and (min-width: 1367px) {
.article-datetime_wrap span { display: inline-block; }
}

.article-headline {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: .5em;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.article-headline {
  font-size: 32px;
  line-height: 1.4375;
  padding-bottom: .2em;
}
}

.article-headline + .archive_list_label_wrap { margin-top: 1em; }

.article-introduction {
  margin: 0 auto;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.article-introduction { width: 100%; }
}

.article-introduction-sentence {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin: 1em 0 0;
}
@media screen and (min-width: 1367px) {
.article-introduction-sentence {
  font-size: 16px;
  line-height: 1.8;
}
}

.table-of-contents {
  margin: 1em 0 0;
  padding: 1em;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.table-of-contents {
  margin: 20px 0 0;
  padding: 2em;
}
}

.table-of-contents-heading {
  margin: 0 auto;
  position: relative;
  width: 160px;
}

.table-of-contents-heading:before,
.table-of-contents-heading:after { position: absolute; }

.table-of-contents-heading:before {
  background-color: var(--navy);
  border-radius: 15px;
  color: #fff;
  content: '\f03a';
  display: block;
  font-family: 'Font Awesome 5 Free';
  font-size: 1em;
  font-weight: 900;
  line-height: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 30px;
}

.table-of-contents-heading:after {
  color: #666;
  cursor: pointer;
  display: block;
  font-size: .6em;
  font-weight: 400;
  line-height: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.table-of-contents-heading:after { content: '［目次を非表示］'; }
.table-of-contents-heading.active:after { content: '［目次を表示］'; }

.table-of-contents-heading span {
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 0 1.75em;
}

.table-of-contents-headline {
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  position: relative;
}
@media only screen and (max-width: 667px) {
.table-of-contents-headline { font-size: 14px; }
}

.table-of-contents-headline:after {
  color: #314349;
  display: block;
  font-size: .7em;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 0;
  top: .1em;
  transition: all .3s ease-out;
}
.table-of-contents-headline:after { content: '［目次を非表示にする］'; }
.table-of-contents-headline.active:after { content: '［目次を表示する］'; }

.table-of-contents-ul { margin: 10px 0 0; }

.table-of-contents-list {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  margin-top: 1em;
  padding-left: 2em;
  position: relative;
}

.table-of-contents-list:before {
  display: block;
  left: .5em;
  position: absolute;
  top: 0;
}

.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:nth-of-type(11):before { content: '11.'; }
.table-of-contents-list:nth-of-type(12):before { content: '12.'; }
.table-of-contents-list:nth-of-type(13):before { content: '13.'; }
.table-of-contents-list:nth-of-type(14):before { content: '14.'; }
.table-of-contents-list:nth-of-type(15):before { content: '15.'; }
.table-of-contents-list:nth-of-type(16):before { content: '16.'; }
.table-of-contents-list:nth-of-type(17):before { content: '17.'; }
.table-of-contents-list:nth-of-type(18):before { content: '18.'; }
.table-of-contents-list:nth-of-type(19):before { content: '19.'; }
.table-of-contents-list:nth-of-type(20):before { content: '20.'; }

.table-of-contents-ul-sub { margin-top: .5em; }

.table-of-contents-list-sub {
  font-weight: 400;
  position: relative;
}
.table-of-contents-list-sub:before { content: '・'; }

.table-of-contents-list a { text-decoration: none; }
.table-of-contents-list a:hover { text-decoration: underline; }
.table-of-contents-list a:active,
.table-of-contents-list a:visited { text-decoration: none; }

.table-of-contents-list-sub a { color: #000 !important; }
.table-of-contents-list-sub a:active,
.table-of-contents-list-sub a:visited { color: #000 !important; }

.article-contents {
  margin: 0 auto;
  /* padding-bottom: 5em; */
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.article-contents { width: 98%; }
}
@media only screen and (min-width: 1367px) {
.article-contents { width: 1000px; }
}

.article-section {
  margin: 50px auto 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.article-section {
  margin-top: 70px 0 0;
  width: 100%;
}
}

.article-section-headline {
  border-left: 3px solid var(--navy);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: .7em;
  padding: .5em 0 .5em .5em;
}

.section-introduction-picture {
  display: block;
  height: auto;
  margin-top: 1em;
  width: 100%;
}

.smartphone-order-flow-image {
  border: 1px solid #ccc;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  width: 45%;
}

.section-sentence {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  padding-bottom: 1.5em;
}
@media screen and (min-width: 1367px) {
.section-sentence { line-height: 1.8; }
}

.section-introduction-picture + .section-sentence,
.smartphone-order-flow-image + .section-sentence { margin-top: 1em; }
.section-small-heading + .section-sentence { margin-top: .5em; }

.section-sub {
  font-size: .8em;
  vertical-align: baseline;
}

.wide-banner-link {
  display: block;
  margin: 20px auto 0;
  transition: .3s;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1366px) {
.wide-banner-link { width: 90%; }
}
@media screen and (min-width: 1367px) {
.wide-banner-link {
  margin-top: 30px;
  transition: .3s;
  width: 600px;
}
}

.wide-banner-link:hover { opacity: .7; }

.wide-banner-figure {
  display: block;
  width: 100%;
}

.sentence-above-banner {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 1.5em;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.sentence-above-banner {
  font-size: 16px;
  line-height: 1.7;
}
}

.sentence-above-banner-inner { display: inline-block; }
.sentence-above-banner + .wide-banner-link { margin-top: 10px; }

.section-supplement {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.5em;
  padding: 0 0 1.2em 1.2em;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-supplement { font-size: 12px; }
}

.section-supplement-strong { font-weight: 700; }
.section-supplement:before {
  content: '※';
  line-height: inherit;
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

.section-middle-heading {
  border-left: 3px solid var(--navy);
  margin-bottom: .7em;
  padding: .5em 0 .5em .5em !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1em;
  position: relative;
}

.section-middle-heading.bullet-square { padding-top: .5em; }
.section-middle-heading.bullet-square:before { display: none; }

.figure-small-thumbnail + .section-middle-heading,
.blog-card + .section-middle-heading { margin-top: 2em; }

.section-small-heading {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 20px;
  position: relative;
}

.section-middle-heading + .section-small-heading { margin-top: 1em; }

.article-frame { margin-bottom: 1em; }
.section-small-heading + .article-frame { margin-top: 1em; }
.article-frame .section-small-heading:first-child,
.article-frame .section-sentence:first-child { margin-top: 0; }

.article-frame-sentence {
  font-size: 11px;
  line-height: 1.8;
}
@media screen and (min-width: 1367px) {
.article-frame-sentence { font-size: 12px; }
}

.article-frame .section-sentence:last-child,
.article-frame .section-ul .section-li:last-child { padding-bottom: 0; }

.section-frame-headline {
  background-color: var(--navy);
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 700;
  height: auto;
  line-height: 1.3;
  margin-top: 20px;
  padding: .5em;
  text-align: left;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-frame-headline {
  align-items: center;
  display: flex;
  font-size: 18px;
  height: 3em;
  line-height: 1.2;
  margin-top: 50px;
  padding: 0 1em;
}
}

.section-middle-heading + .section-frame-headline { margin-top: 20px; }
.article-frame .section-middle-heading:first-child { margin-top: 0; }

.reference-url {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  text-align: right;
  width: 100%;
  word-break: break-all;
}
@media screen and (min-width: 1367px) {
.reference-url {
  font-size: 16px;
  line-height: 1.8;
}
}

.reference-url-small {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: .5em;
  padding: 0 0 1.2em;
  word-break: break-all;
}
.reference-url + .section-sentence { margin-top: 2em; }
.reference-url + .section-middle-heading { margin-top: 3em; }

.section-picture {
  display: block;
  margin-top: 10px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-picture { margin-top: 20px; }
}

.section-wide-picture {
  display: block;
  margin-top: 10px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-wide-picture { margin-top: 20px; }
}

.section-ul,
.section-ol {
  list-style: none;
  padding: 0 0 1em;
}
.section-introduction-picture + .section-ul,
.section-introduction-picture + .section-ol,
.smartphone-order-flow-image + .section-ol,
.smartphone-order-flow-image + .section-ol,
.section-small-heading + .section-ul,
.section-small-heading + .section-ol { margin-top: 1em; }

.section-li {
  font-size: 14px;
  line-height: 1.3;
  padding: 0 0 .6em 1.2em;
  position: relative;
}
@media screen and (min-width: 1367px) {
.section-li { font-size: 15px; }
}

.section-ol .section-li:before,
.circle:before,
.square:before,
.rhombus:before,
.triangle-down:before {
  font-size: inherit;
  line-height: inherit;
  left: 0;
  position: absolute;
  top: 0;
}

.circle:before,
.square:before,
.rhombus:before,
.triangle-down:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.circle:before { content: '●'; }
.square:before { content: '■'; }
.rhombus:before { content: '◆'; }
.triangle-down:before { content: '▼'; }

.section-ol .section-li:nth-child(1):before { content: '１.' }
.section-ol .section-li:nth-child(2):before { content: '２.' }
.section-ol .section-li:nth-child(3):before { content: '３.' }
.section-ol .section-li:nth-child(4):before { content: '４.' }
.section-ol .section-li:nth-child(5):before { content: '５.' }
.section-ol .section-li:nth-child(6):before { content: '６.' }
.section-ol .section-li:nth-child(7):before { content: '７.' }
.section-ol .section-li:nth-child(8):before { content: '８.' }
.section-ol .section-li:nth-child(9):before { content: '９.' }
.section-ol .section-li:nth-child(10):before { content: '10.' }

.section-faq {
  margin: 0;
  padding: 0;
}
.section-faq-q,
.section-faq-a {
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  padding: 0 0 .6em 1.2em;
  position: relative;
}
.section-faq-q:before,
.section-faq-a:before {
  font-size: inherit;
  line-height: inherit;
  left: 0;
  position: absolute;
  top: 0;
}
.section-faq-q:before { content: 'Q. '; }
.section-faq-a:before { content: 'A. ' }

.section-inline-dl-inner {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: .5em;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-inline-dl-inner { flex-wrap: nowrap; }
}

.section-inline-dl-inner:last-child { padding-bottom: 0; }

.section-inline-dt,
.section-inline-dd {
  font-size: 14px;
  line-height: 1.5;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-inline-dt,
.section-inline-dd {
  font-size: 14px;
  line-height: 1.5;
}
}

.section-inline-dt { padding-bottom: .2em; }
@media screen and (min-width: 1367px) {
.section-inline-dt { padding-bottom: 0; }
}

.section-inline-dt { width: 100%; }
@media screen and (min-width: 1367px) {
.section-inline-dt { width: 15%; }
}

.section-inline-dd { width: 100%; }
@media screen and (min-width: 1367px) {
.section-inline-dd { width: 85%; }
}

.section-step {
  list-style: none;
  text-align: center;
}

.section-step-list {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 1em 0 2em;
  position: relative;
}
@media screen and (min-width: 1367px) {
.section-step-list { font-size: 16px; }
}

.section-step-list:after {
  border-bottom: none;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 16px solid #5bbff6;
  bottom: 0;
  content: '';
  left: 50%;
  margin-left: -30px;
  position: absolute;
}

.section-step-list:last-child:after { display: none; }

.article-frame {
  border-radius: 10px;
  padding: 20px 10px;
}
@media screen and (min-width: 1367px) {
.article-frame { padding: 20px; }
}

.bullet-midpoint,
.bullet-circle,
.bullet-double-circle,
.bullet-square,
.bullet-rhombus,
.bullet-checkmark,
.bullet-unique,
.bullet-triangle-down,
.bullet-number {
  padding: 0 0 .6em 1.1em;
  position: relative;
}
.bullet-number { padding-left: 1.8em; }
.bullet-midpoint:before,
.bullet-circle:before,
.bullet-double-circle:before,
.bullet-square:before,
.bullet-rhombus:before,
.bullet-checkmark:before,
.bullet-unique:before,
.bullet-triangle-down:before,
.bullet-number:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  left: 0;
  line-height: inherit;
  position: absolute;
  top: .1em;
}
.bullet-midpoint:before { content: '・'; }
.bullet-circle:before { content: '●'; }
.bullet-double-circle:before { content: '◎'; }
.bullet-square:before { content: '■'; }
.bullet-rhombus:before { content: '◆'; }
.bullet-checkmark:before { content: '\f00c'; }
.bullet-triangle-down:before { content: '▼'; }
.section-ol .bullet-number:nth-child(1):before { content: '１. '; }
.section-ol .bullet-number:nth-child(2):before { content: '２. '; }
.section-ol .bullet-number:nth-child(3):before { content: '３. '; }
.section-ol .bullet-number:nth-child(4):before { content: '４. '; }
.section-ol .bullet-number:nth-child(5):before { content: '５. '; }
.section-ol .bullet-number:nth-child(6):before { content: '６. '; }
.section-ol .bullet-number:nth-child(7):before { content: '７. '; }
.section-ol .bullet-number:nth-child(8):before { content: '８. '; }
.section-ol .bullet-number:nth-child(9):before { content: '９. '; }
.section-ol .bullet-number:nth-child(10):before { content: '10. '; }
.section-ol .bullet-number:nth-child(11):before { content: '11. '; }
.section-ol .bullet-number:nth-child(12):before { content: '12. '; }
.section-ol .bullet-number:nth-child(13):before { content: '13. '; }
.section-ol .bullet-number:nth-child(14):before { content: '14. '; }
.section-ol .bullet-number:nth-child(15):before { content: '15. '; }
.section-ol .bullet-number:nth-child(16):before { content: '16. '; }
.section-ol .bullet-number:nth-child(17):before { content: '17. '; }
.section-ol .bullet-number:nth-child(18):before { content: '18. '; }
.section-ol .bullet-number:nth-child(19):before { content: '19. '; }
.section-ol .bullet-number:nth-child(20):before { content: '20. '; }

.section-middle-heading.bullet-circle:before,
.section-middle-heading.bullet-square:before,
.section-middle-heading.bullet-rhombus:before,
.section-middle-heading.bullet-triangle-down:before { display: none; }

.rows-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 15px auto 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.rows-wrap { margin-top: 30px; }
}

.rows-list {
  display: block;
  padding: 0 0 20px;
}
@media screen and (min-width: 1367px) {
.rows-list { padding: 0 1% 30px; }
}

.rows-list.rows2,
.rows-list.rows3,
.rows-list.rows4 { width: 100%; }
@media screen and (min-width: 1367px) {
.rows-list.rows2 { width: 48%; }
.rows-list.rows3 { width: 31%; }
.rows-list.rows4 { width: 23%; }
}

.rows-list.hover-action { position: relative; }
.rows-list.hover-action:before {
  background-color: #fff;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: .3s;
  width: 100%;
  z-index: 2;
}
.rows-list.hover-action:hover:before { opacity: .3; }

.rows-list-picture {
  display: block;
  width: 100%;
}

.rows-list-headline {
  align-items: center;
  display: flex;
  height: auto;
  margin-top: 1em;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.rows-list-headline {
  align-items: center;
  display: flex;
  height: 4em;
  width: 100%;
}
}

.rows-list-headline-inner {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.rows-list-headline-inner {
  font-size: 16px;
  line-height: 1.4;
}
}

.rows-list-sentence {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 1em;
  padding: 0 .2em;
}
@media screen and (min-width: 1367px) {
.rows-list-sentence {
  font-size: 16px;
  line-height: 1.5;
}
}

.figure-middle-thumbnail {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail { flex-direction: unset; }
}

.figure-middle-thumbnail:last-child { border-bottom: none; }

.figure-middle-thumbnail-figure,
.figure-middle-thumbnail-figure.very-small {
  margin: 0 auto;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-figure,
.figure-middle-thumbnail-figure.very-small { margin: 0; }
.figure-middle-thumbnail-figure { width: 45%; }
.figure-middle-thumbnail-figure.very-small { width: 115px; }
}

.figure-middle-thumbnail-figure img,
.figure-middle-thumbnail-figure.very-small img {
  display: block;
  height: auto;
  width: 100%;
}

.figure-middle-thumbnail-body {
  padding: 10px 0 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-body {
  padding: 0;
  width: 53%;
}
}

.figure-middle-thumbnail-body.very-small { width: 100%; }
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-body.very-small { width: 785px; }
}

.figure-middle-thumbnail-headline {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 1.2em;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-headline { font-size: 16px; }
}

.figure-middle-thumbnail-sub-heading {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.2em;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-sub-heading {
  font-size: 14px;
  line-height: 1.2;
}
}

.figure-middle-thumbnail-middle-heading {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.2em;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-middle-heading {
  font-size: 15px;
  line-height: 1.3;
}
}

.figure-middle-thumbnail .figure-middle-thumbnail-headline:nth-of-type(1),
.figure-middle-thumbnail .figure-middle-thumbnail-sub-heading:nth-of-type(1) { margin-top: 0; }

.figure-middle-thumbnail-sentence {
  font-size: 13px;
  line-height: 1.5;
  margin: 1em 0 0;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail-sentence {
  font-size: 16px;
  line-height: 1.7;
}
}

.figure-middle-thumbnail-middle-heading + .figure-middle-thumbnail-sentence { margin-top: .2em; }

.figure-middle-thumbnail .reference-url {
  font-size: 12px;
  line-height: 1.5;
  margin: 1em 0 0;
}
@media screen and (min-width: 1367px) {
.figure-middle-thumbnail .reference-url {
  font-size: 14px;
  line-height: 1.7;
}
}

.figure-small-thumbnail {
  align-items: center;
  border: 1px solid var(--navy);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin: 1em auto 0;
  padding: 10px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.figure-small-thumbnail {
  padding: 20px 10px 20px 20px;
  width: 640px;
}
}

.figure-small-thumbnail-figure {
  display: block;
  overflow: hidden;
  width: 30%;
}
.type-oshikatsu .figure-small-thumbnail-figure { width: 100%; }

.figure-small-thumbnail-picture {
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.figure-small-thumbnail-picture { transition: .3s; }
.figure-small-thumbnail-figure:hover .figure-small-thumbnail-picture { transform: scale(1.1); }
}

.figure-small-thumbnail-body {
  box-sizing: border-box;
  width: 65%;
}

.figure-small-thumbnail-body .section-sentence {
  font-size: 13px;
  padding: 0;
}

.figure-small-thumbnail-headline,
.figure-small-thumbnail-sub-heading {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: .5em 0 0;
}

.figure-small-thumbnail-sentence {
  font-size: 12px;
  line-height: 1.5;
  margin: 1em 0 0;
}
@media screen and (min-width: 1367px) {
.figure-small-thumbnail-sentence { font-size: 13px; }
}

.figure-small-thumbnail-middle-heading + .figure-small-thumbnail-sentence { margin-top: .2em; }

.figure-small-thumbnail .reference-url {
  font-size: 14px;
  line-height: 1.5;
  margin: 1em 0 0;
}

.figure-small-thumbnail .reference-url a { color: var(--navy) !important; }
@media screen and (min-width: 1367px) {
.figure-small-thumbnail .reference-url a { transition: .3s; }
.figure-small-thumbnail .reference-url a:hover {
  color: var(--skyblue) !important;
  text-decoration: none;
}
.figure-small-thumbnail .reference-url a:active,
.figure-small-thumbnail .reference-url a:visited { color: var(--navy); }
}

.figure-small-thumbnail + .section-sentence { margin-top: 1em; }

.blog-card {
  border: 1px solid var(--navy);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.3em;
  margin: .5em 0;
  padding: 20px 10px 20px 20px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.blog-card {
  font-size: 18px;
  margin: 0 auto;
  transition: .3s;
  width: 640px;
}
}

.blog-card a {
  align-items: flex-start;
  background-color: #fff;
  color: #314349;
  display: flex;
  gap: 1em;
  position: relative;
  text-decoration: none;
  transition: .3s;
}
@media screen and (min-width: 1367px) {
.blog-card a { transition: .3s; }
.blog-card a:hover {
  color: var(--skyblue);
  text-decoration: none;
}
.blog-card a:visited,
.blog-card a:active {
  color: var(--skyblue);
  text-decoration: none;
}
}

.blog-card img {
  border: 1px solid #eee;
  display: block;
  height: auto;
}

.blog-card-body { width: 100%; }

.also-read {
  font-size: .8em;
  font-weight: 500;
  margin: 0;
  padding: 0 0 1em 1em;
  position: relative;
}
.also-read:before {
  content: '》';
  left: 0;
  position: absolute;
  top: 0;
}

.blog-card h4 {
  display: inline-block;
  font-size: 1em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.blog-card .blog-card-sentence {
  font-size: .8em;
  margin: .5em 0 0;
  padding: 0;
}

.blog-card-body .reference-url {
  bottom: 1.1em;
  font-size: .8em;
  margin: 1em 0 0;
  position: absolute;
  right: 1.1em;
}

.section-relation {
  margin: 4em auto 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.section-relation {
  margin: 4em 0 0;
  width: 100%;
}
}

.section-relation-headline {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.section-relation-headline { font-size: 18px; }
}

.relation-contents {
  align-items: flex-start;
  border-bottom: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.relation-contents { flex-direction: unset; }
}

.relation-contents:last-child { border-bottom: none; }

.relation-contents-figure {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.relation-contents-figure { width: 30%; }
}

.relation-contents-picture {
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.relation-contents-picture { transition: .3s; }
.relation-contents-picture:hover { transform: scale(1.1); }
}

.relation-contents-body {
  padding: 10px 0 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.relation-contents-body { width: 67%; }
}

.relation-contents-headline {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
}
@media screen and (min-width: 1367px) {
.relation-contents-headline { font-size: 15px; }
}

.relation-contents-sentence {
  font-size: 12px;
  line-height: 1.5;
  margin: 1em 0 0;
}
@media screen and (min-width: 1367px) {
.relation-contents-sentence {
  font-size: 14px;
  line-height: 1.7;
}
}

.relation-contents-link {
  font-size: 12px;
  line-height: 1.5;
  margin: 1em 0 0;
  text-align: right;
}
@media screen and (min-width: 1367px) {
.relation-contents-link {
  font-size: 14px;
  line-height: 1.7;
}
}

.writer-info {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 1367px) {
.writer-info {
  flex-wrap: nowrap;
  justify-content: space-between;
}
}

.writer-info div {
  margin: 0 0 1em 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.writer-info div {
  margin: 0 1em 0 0;
  width: 5em;
}
}

.writer-info dt {
  background-color: #fff;
  border-radius: 3em;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  width: 4.47em;
}

.writer-info img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

.writer-info dd {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.entry-data {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 1em;
  text-align: right;
}
@media screen and (min-width: 1367px) {
.entry-data { font-size: 13px; }
}

.entry-data-time {
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.share-wrap {
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  margin: 50px auto 0;
  padding: 50px 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.share-wrap { width: 700px; }
}

.share-wrap_inner {
  align-items: center;
  display: flex;
  gap: 1.5em;
}

.share-wrap p {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.sns-share {
  display: flex;
  gap: .5em;
  justify-content: flex-start;
}

.share-list {
  cursor: pointer;
  width: 36px;
}
@media screen and (min-width: 1367px) {
.share-list { transition: .3s; }
.share-list:hover { opacity: .6; }
}

.share-link { display: block; }

.share-figure {
  display: block;
  height: auto;
  width: 100%;
}

.relation-tag {
  margin: 50px auto 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.relation-tag { width: 700px; }
}

.relation-tag .archive_list_label_wrap { margin-top: 0; }

.relation-tag .archive_list_label a {
  background-color: #eee;
  color: #000;
  font-weight: 600;
}
@media screen and (min-width: 1367px) {
.relation-tag .archive_list_label a:hover {
  background-color: #333;
  color: #fff;
}
}

.editors-note {
  align-items: flex-start;
  border: 3px solid #eee;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 50px auto;
  padding: 20px;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.editors-note {
  flex-wrap: nowrap;
  width: 700px;
}
}

.editors-note figure,
.editors-note > img {
  border-radius: 40px;
  height: 80px;
  margin: 0 auto;
  overflow: hidden;
  width: 80px;
}
@media screen and (min-width: 768px) {
.editors-note figure,
.editors-note > img { margin: 0; }
}

.editors-note figure img {
  display: block;
  height: auto;
  width: 100%;
}

.editors-note-contents {
  padding: 10px 0 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.editors-note-contents {
  padding-left: 20px;
  width: 85%;
}
}

.no-avatar .editors-note-contents { width: 100%; }

.editors-note-headline {
  font-size: 18px;
  font-weight: bold;
  padding: 1.5em 0 0;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 768px) {
.editors-note-headline { text-align: left; }
}

.editors-note-headline:before {
  content: 'この記事を書いた人';
  display: block;
  font-size: 12px;
  left: 50%;
  line-height: 1.4;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.editors-note-headline:before {
  left: 0;
  transform: translateX(0);
}
}

.editors-note-sentence {
  font-size: 15px;
  line-height: 1.8;
  margin-top: 1em;
}

.related_archive_contents {
  background-color: var(--skyblue-light);
  margin: 50px auto 0;
  padding: 30px 20px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
.related_archive_contents {
  border-radius: 20px;
  margin-bottom: 100px;
  width: 90%;
}
}
@media screen and (min-width: 1367px) {
.related_archive_contents {
  border-radius: 20px;
  margin: 100px auto 300px;
  padding: 50px 30px;
  width: 1200px;
}
}

.related_archive_contents .archive_wrap.page_column { gap: 30px; }
@media screen and (min-width: 768px) and (max-width: 1366px) {
.related_archive_contents .archive_wrap.page_column { justify-content: space-between; }
}
@media screen and (min-width: 1367px) {
.related_archive_contents .archive_wrap.page_works { gap: 1em; }
.related_archive_contents .archive_wrap.page_column {
  gap: 1em;
  justify-content: center;
  margin: 30px 0 0;
  width: 100%;
}
}

.related_archive_contents .archive_list {
  padding: 15px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
.related_archive_contents .archive_list { width: 31%; }
}
@media screen and (min-width: 1367px) {
.related_archive_contents .archive_list { width: 366px; }
}

.related_archive_contents .common-button {
  background-color: var(--navy);
  border: 1px solid var(--navy);
  color: #fff;
  margin: 30px auto 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
.related_archive_contents .common-button { width: 320px; }
}

.related_archive_contents .common-button:after {
  background-image: url(/assets/images/common/icon_arrow_white.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: '';
  display: block;
  height: 26px;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
}

@media screen and (min-width: 1367px) {
.related_archive_contents .common-button:hover {
  background-color: #fff;
  border: 1px solid var(--navy);
  color: var(--navy);
  outline-offset: -1px;
}
.related_archive_contents .common-button:hover:after { background-image: url(/assets/images/common/icon_arrow_navy.png); }
}

.point-comment { padding: 2em 0; }
@media screen and (min-width: 1367px) {
.point-comment { padding: 2em 1em; }
}

.point-comment-contents {
  display: flex;
  justify-content: flex-start;
}

.point-comment .point-comment-contents:nth-child(even) {
  flex-direction: row-reverse;
  margin-top: 1em;
}

.point-comment-dt {
  display: block;
  margin: 0 1em 0 0;
}
.point-comment .point-comment-contents:nth-child(even) .point-comment-dt { margin: 0 0 0 1em; }

.point-comment-figure {
  display: block;
  height: auto;
  max-width: 100%;
}

.point-comment-figuration {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin: .1em 0 0;
  padding: 0;
  text-align: center;
}

.point-comment-dd {
  align-items: center;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  display: flex;
  padding: 1em 1.5em;
  position: relative;
  width: 60%;
}

.eito .point-comment-dd { border-color: #5bbff6; }
.rei .point-comment-dd { border-color: #ff4b91; }

.point-comment-dd:before,
.point-comment-dd:after {
  border-bottom: 6px solid transparent;
  border-left: none;
  border-top: 6px solid transparent;
  content: '';
  display: block;
  margin-top: 0;
  position: absolute;
  top: 20%;
}

.point-comment-dd:before {
  border-right-style: solid;
  border-right-width: 10px;
  left: -.7em;
}

.eito .point-comment-dd:before { border-right-color: #5bbff6; }
.rei .point-comment-dd:before { border-right-color: #ff4b91; }

.point-comment-dd:after {
  border-right: 10px solid #fff;
  left: -.57em;
}

.point-comment .point-comment-contents:nth-child(even) .point-comment-dd:before,
.point-comment .point-comment-contents:nth-child(even) .point-comment-dd:after {
  left: auto;
  transform: rotate(-180deg);
}
.point-comment .point-comment-contents:nth-child(even) .point-comment-dd:before { right: -.7em; }
.point-comment .point-comment-contents:nth-child(even) .point-comment-dd:after { right: -.57em; }

.point-comment-dd-inner {
  font-size: 14px;
  line-height: 1.5;
}

.customer-review {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 90px;
  margin-top: 15px;
  padding: 0 0 110px 0;
}
@media screen and (min-width: 1367px) {
.customer-review {
  background-position: left 30px center;
  background-size: 120px;
  margin-top: 30px;
  padding: 0 0 110px 0;
  padding: 0 0 0 190px;
}
}

.customer-review.row-reverse {
  background-position: bottom center;
  padding: 0 0 110px 0;
}
@media screen and (min-width: 1367px) {
.customer-review.row-reverse {
  background-position: right 30px center;
  padding: 0 190px 0 0;
}
}

.customer-review-inner {
  background-color: #fff;
  border: 3px solid #5bbff6;
  border-radius: 15px;
  padding: 20px 15px;
  position: relative;
}
@media screen and (min-width: 1367px) {
.customer-review-inner { padding: 25px 30px; }
}

.customer-review-inner:before,
.customer-review-inner:after {
  border-left: none;
  content: '';
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: rotate(-90deg);
}
@media screen and (min-width: 1367px) {
.customer-review-inner:before,
.customer-review-inner:after {
  top: auto;
  transform: rotate(0);
}
}

.row-reverse .customer-review-inner:before,
.row-reverse .customer-review-inner:after { transform: rotate(90deg); }
@media screen and (min-width: 1367px) {
.row-reverse .customer-review-inner:before,
.row-reverse .customer-review-inner:after {
  border-right: none;
  transform: rotate(0);
}
}

.customer-review-inner:before {
  border-right: 15px solid #5bbff6;
  bottom: -20px;
  left: 50%;
  margin-left: -10px;
  margin-top: 0;
}
@media screen and (min-width: 1367px) {
.customer-review-inner:before {
  border-bottom: 10px solid transparent;
  border-right: 18px solid #5bbff6;
  border-top: 10px solid transparent;
  left: -21px;
  margin-top: -10px;
}
}

.row-reverse .customer-review-inner:before {
  border-left: 15px solid #5bbff6;
  left: 50%;
  right: auto;
}
@media screen and (min-width: 1367px) {
.row-reverse .customer-review-inner:before {
  border-left: 18px solid #5bbff6;
  left: auto;
  right: -21px;
}
}

.customer-review-inner:after {
  border-right: 13px solid #fff;
  bottom: -14px;
  left: 50%;
  margin-left: -9px;
  margin-top: 0;
}
@media screen and (min-width: 1367px) {
.customer-review-inner:after {
  border-bottom: 8px solid transparent;
  border-right: 15px solid #fff;
  border-top: 8px solid transparent;
  left: -15px;
  margin-top: -8px;
}
}

.row-reverse .customer-review-inner:after {
  border-left: 13px solid #fff;
  left: 50%;
  right: auto;
}
@media screen and (min-width: 1367px) {
.row-reverse .customer-review-inner:after {
  border-left: 15px solid #fff;
  left: auto;
  right: -15px;
}
}

.customer-review-headline {
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.customer-review-headline {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 1em;
}
}

.customer-review-sentence {
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 1em;
}
@media screen and (min-width: 1367px) {
.customer-review-sentence { font-size: 16px; }
}

.customer-review-sentence:last-child { padding-bottom: 0; }

.section-summary { margin-top: 40px; }
@media screen and (min-width: 1367px) {
.section-summary { margin-top: 80px; }
}

@media screen and (max-width: 767px) {
.article-thumbnail-wrap { width: 100%; }
.article-thumbnail-list {
  margin-bottom: 20px;
  width: 100%;
}
.article-thumbnail-list:last-child { margin-bottom: 0; }
.article-thumbnail-picture { width: 100%; }
.article-thumbnail-update {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.article-thumbnail-headline {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
}

.article-thumbnail-morelink {
  text-align: right;
  width: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.article-thumbnail-morelink { width: 95%; }
}

.article-thumbnail-morelink-inner {
  border-bottom: 2px solid #000;
  color: #314349;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  padding: 0 0 .5em;
}

.article-thumbnail-morelink-text {
  display: block;
  font-size: 1em;
  padding: 0 2.5em 0 0;
  position: relative;
}

.article-thumbnail-morelink-text:after {
  content: '\f060';
  font-family: 'Font Awesome 5 Free';
  font-size: 1.2em;
  font-weight: 900;
  position: absolute;
  right: .5em;
  top: 0;
}

.article-thumbnail-morelink-inner:hover { border-bottom: none; }
.article-thumbnail-morelink-inner:hover .article-thumbnail-morelink-text,
.article-thumbnail-morelink-inner:hover .article-thumbnail-morelink-text:after { color: #5bbff6; }

.table-scroll-wrap {
  margin: 20px auto 1em;
  overflow-x: auto;
  width: 100%;
}

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

.article-table-caption {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

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

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

.article-td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  font-size: 13px;
  padding: 10px 1%;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}
@media screen and (min-width: 1367px) {
.article-td {
  font-size: 1em;
  vertical-align: middle;
}
}

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

.article-contents-footer {
  max-width: 100%;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.article-contents-footer {
  max-width: 1200px;
  width: 95%;
}
}

.sdgs-icon {
  border: 1px dotted #ccc;
  margin: 1.5em 0 0;
  padding: 10px;
}

.sdgs-icon-list {
  align-items: center;
  display: flex;
  height: 90px;
  width: 100%;
}

.sdgs-icon-list:nth-of-type(n+2) { margin: 1em 0 0; }

.sdgs-icon-list-figure {
  display: block;
  margin-right: 10px;
  width: 90px;
}

.sdgs-icon-list-body { width: 768px; }

.sdgs-icon-list-headline {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 0.5em;
}

.sdgs-icon-list-sentence {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.figure-flex-right:after {
  clear: both;
  content: '';
  display: block;
}

.figure-flex-right-picture {
  float: right;
  margin: 0 0 10px 10px;
  width: 30%;
}
@media screen and (min-width: 1367px) {
.figure-flex-right-picture { margin: 0 0 15px 15px; }
}

.figure-flex-sentence {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 1em;
}
@media screen and (min-width: 1367px) {
.figure-flex-sentence {
  font-size: 16px;
  line-height: 1.8;
}
}

.phoro-album-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.phoro-album-wrap{ width: 800px; }
}

.photo-album {
  margin-top: 20px;
  width: 50%;
}
@media screen and (min-width: 1367px) {
.photo-album{
  margin-top: 30px;
  width: 400px;
}
}

.photo-album-picture {
  display: block;
  height: auto;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.photo-album-picture{ max-width: 400px; }
}

.product-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.product-wrap {
  padding-top: 30px;
  width: 900px;
}
}

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

.product-list {
  align-items: flex-start;
  border-bottom: 1px dotted #ddd;
  display: flex;
  margin: 0;
  padding: 15px 15px 15px 0;
  width: 100%;
}
.product-list:last-child { border-bottom: none; }
@media screen and (min-width: 1367px) {
.product-list {
  background-color: #fff;
  display: block;
  margin: 0 0 0 5%;
  padding: 0 0 40px;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 30%;
}
}

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

.product-list:before {
  border: 1px solid #ccc;
  content: '';
  display: block;
  height: 50px;
  left: 0;
  position: absolute;
  top: 15px;
  width: 50px;
}
@media screen and (min-width: 1367px) {
.product-list:before {
  height: 100%;
  max-height: 268px;
  max-width: 268px;
  top: 0;
  width: 100%;
}
}
@media only screen and (min-width: 668px) and (max-width: 768px) {
.product-list:before {
  height: 204px;
  width: 204px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1366px) {
.product-list:before {
  height: 265px;
  width: 265px;
}
}

.product-list:hover:before { border: 1px solid #5bbff6; }
@media screen and (max-width: 767px) {
.product-list:after {
  color: #5bbff6;
  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(3n+1) { margin-left: 0; }
.product-list-picture {
  display: block;
  height: 50px;
  max-height: 100%;
  max-width: 100%;
  width: 50px;
}
@media screen and (min-width: 1367px) {
.product-list-picture {
  height: auto;
  width: auto;
}
}

.product-list-description {
  color: #314349;
  font-weight: 500;
  margin: 0;
  padding: 0 0 0 4%;
  width: 80%;
}
@media screen and (min-width: 1367px) {
.product-list-description {
  padding: 0;
  width: auto;
}
}

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

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

.product-list:hover .product-list-item-name { color: #5bbff6; }

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

.thumbnail-commentary {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-between;
  padding: 0;
  width: 98%;
}
@media screen and (min-width: 1367px) {
.thumbnail-commentary {
  padding: 1em 0;
  width: 100%;
}
}

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

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

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

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

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

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

.thumbnail-commentary-sentence {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  padding: 0 0 1em;
}
@media screen and (min-width: 1367px) {
.thumbnail-commentary-sentence {
  font-size: 16px;
  line-height: 1.75;
}
}

.thumbnail-commentary-sentence:last-child { padding-bottom: 0; }

.section-column-figure-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
}

.section-column-figure { padding-bottom: 30px; }

.section-column-figure.rows2,
.section-column-figure.rows3,
.section-column-figure.rows4 {
  margin-left: 0;
  width: 49%;
}
@media screen and (min-width: 1367px) {
.section-column-figure.rows2 {
  margin-left: 4%;
  width: 48%;
}
.section-column-figure.rows3 {
  margin-left: 2%;
  width: 32%;
}
.section-column-figure.rows4 {
  margin-left: 2%;
  width: 23.5%;
}
}

.section-column-figure-wrap .section-column-figure.rows2:first-child,
.section-column-figure-wrap .section-column-figure.rows2:nth-child(2n+1),
.section-column-figure-wrap .section-column-figure.rows3:first-child,
.section-column-figure-wrap .section-column-figure.rows3:nth-child(3n+1),
.section-column-figure-wrap .section-column-figure.rows4:first-child,
.section-column-figure-wrap .section-column-figure.rows4:nth-child(4n+1) { margin-left: 0; }

.section-column-figuration {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 1em;
  text-align: center;
}
@media screen and (min-width: 1367px) {
.section-column-figuration { font-size: 14px; }
}

.article-new-icon {
  animation: flash 1.2s linear infinite;
  background-color: #f00;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5em;
  margin: 0;
  padding: 0 .5em;
}
@media screen and (min-width: 1367px) {
.article-new-icon { font-size: .8em; }
}
@keyframes flash {
0% { opacity: 1; }
50% { opacity: .5; }
100% { opacity: 1; }
}

.article-button-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1em 0 0;
}

.article-button-wrap div {
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.article-button-wrap div { width: 65%; }
}

.article-button-wrap div.size-large { width: 100%; }
.article-button-wrap div:nth-child(n+2) { margin: 1em 0 0 0; }
@media screen and (min-width: 1367px) {
.article-button-wrap div.size-large { width: 65%; }
.article-button-wrap div:nth-child(n+2) { margin: 0 0 0 2%; }
}

.article-button-caption {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.article-button {
  align-items: center;
  background-color: #fcec28;
  border-radius: 10px;
  display: flex;
  margin: 0;
  padding: 1em 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  width: 100%;
}

.article-button.color-oshiken {
  background-color: #ff4b91;
  color: #fff;
}

.article-button:after {
  content: '\f054';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
}

.article-button:hover { opacity: .7; }

.article-button-inner {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.article-button-inner { font-size: 16px; }
}

.section-common-button {
  align-items: center;
  border-radius: 10px;
  display: flex;
  margin: 10px auto 0;
  padding: 1em 0;
  text-align: center;
  text-decoration: none;
  transition: .3s;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-common-button {
  margin-top: 20px;
  width: 450px;
}
}

.section-common-button:hover { opacity: .7; }

.section-common-button-inner {
  display: block;
  font-size: 126px;
  font-weight: 600;
  line-height: 1.3;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.section-common-button-inner { font-size: 16px; }
}

.section-quote {
  background-color: #eee;
  margin-bottom: 20px;
  padding: 30px 20px;
  position: relative;
}
@media screen and (min-width: 768px) {
.section-quote { padding: 50px 50px 40px; }
}


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

.section-quote:before {
  content: '\f10d';
  left: 10px;
  top: 10px;
}
@media screen and (min-width: 1367px) {
.section-quote:before {
  left: 20px;
  top: 20px;
}
}

.section-quote:after {
  content: '\f10e';
  bottom: 10px;
  right: 10px;
}
@media screen and (min-width: 1367px) {
.section-quote:after {
  bottom: 20px;
  right: 20px;
}
}

.section-quote .sentence {
  color: #314349;
  font-size: 14px;
}
@media screen and (min-width: 1367px) {
.section-quote .sentence {
  font-size: 16px;
  line-height: 1.5;
}
}

.column-banner-thumbnail {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.column-banner-thumbnail-list {
  margin: 0 auto 10px;
  width: 70%;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.column-banner-thumbnail-list {
  margin: 0 2% 30px 0;
  width: 32%;
}
}
@media screen and (min-width: 1367px) {
.column-banner-thumbnail-list {
  margin: 0 10px 30px 0;
  width: 220px;
}
}

.column-banner-thumbnail-list:nth-of-type(3n) { margin-right: auto; }
@media screen and (min-width: 1367px) {
.column-banner-thumbnail-list:nth-of-type(3n) { margin-right: 0; }
}

.column-banner-thumbnail-list-image {
  display: block;
  width: 100%;
}

.related-set-heading {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding: 1em 0;
  text-align: left;
}
@media screen and (min-width: 1367px) {
.related-set-heading {
  font-size: 16px;
  text-align: center;
}
}

.related-set-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-between;
  padding: 0 0 2em;
  width: 100%;
}

.related-set-list {
  display: block;
  margin: 0;
  padding-bottom: 1em;
  transition: .3s;
  width: 48%;
}
@media screen and (min-width: 1367px) {
.related-set-list {
  margin: 0 2% 0 0;
  position: relative;
  width: 32%;
}
}

.related-set-wrap .related-set-list:nth-of-type(3n) { margin-right: 0; }
.related-set-list:hover { opacity: .7; }
.related-set-figure { width: 100%; }

.section-oshiken-column-archive {
  margin: 4em auto 0;
  width: 100%;
}

.categorized-column-archive-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5em 0 0;
}

.categorized-column-archive-list {
  display: block;
  margin-right: 0;
  padding: 0 0 1.5em;
  position: relative;
  width: 50%;
}
@media screen and (min-width: 1367px) {
.categorized-column-archive-list {
  margin-right: 2%;
  transition: .3s;
  width: 32%;
}
}

@media screen and (min-width: 1367px) {
.categorized-column-archive-list:nth-child(3n) { margin-right: 0; }
}

@media screen and (max-width: 767px) {
.categorized-column-archive-wrap .categorized-column-archive-list:nth-child(even):before {
  background-color: #ccc;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 1px;
}
}

.categorized-column-archive-list:hover { opacity: .7; }
.categorized-column-archive-figure { width: 100%; }
.categorized-column-archive-picture {
  display: block;
  max-width: 100%;
}

.categorized-column-archive-headline {
  font-size: 12px;
  line-height: 1.5;
  margin: 1em 0 0;
  padding: 0 .5em;
}
@media screen and (min-width: 1367px) {
.categorized-column-archive-headline {
  font-size: 13px;
  padding: 0;
}
}

video {
  margin: 0 auto;
  max-width: 50%;
  padding-bottom: 2em;
  width: 95%;
}
@media screen and (min-width: 1367px) {
video { max-width: 100%; }
}

.column-cta,
.column-cta_unique {
  margin: 50px 0 0;
  padding: 0 0 2em;
  text-align: center;
}

.column-cta-caption {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1367px) {
.column-cta-caption { font-size: 14px; }
}

.column-cta-button {
  align-items: center;
  background-color: var(--navy);
  border-radius: 15px;
  color: #fff;
  display: flex;
  height: 80px;
  margin: .5em auto 0;
  padding: 1em 0;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 90%;
}
@media screen and (min-width: 768px) {
.column-cta-button { width: 450px; }
}

.column-cta-button:after {
  background-image: url(/assets/images/common/icon_arrow_white.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: '';
  display: block;
  height: 26px;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
}
@media screen and (min-width: 1367px) {
.column-cta-button:after { right: 1em; }
}

.column-cta-button:hover { opacity: .7; }

.column-cta-button span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.column-cta-button span { font-size: 16px; }
}

.column-cta-common {
  margin: 2em 0 0;
  padding: 0 0 2em;
  text-align: center;
}

.column-cta-common-caption {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width: 1367px) {
.column-cta-caption-common { font-size: 14px; }
}

.column-cta-common-button {
  align-items: center;
  background-color: var(--navy);
  border-radius: 10px;
  color: #fff;
  display: flex;
  height: 80px;
  margin: .5em auto 0;
  padding: 1em 0;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.column-cta-common-button { width: 450px; }
}

.column-cta-common-button:after {
  background-image: url(/assets/images/common/icon_arrow_white.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: '';
  display: block;
  height: 26px;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
}
@media screen and (min-width: 1367px) {
.column-cta-common-button:after { right: 1em; }
}

.column-cta-common-button:hover { opacity: .7; }

.column-cta-common-button span {
  display: block;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  width: 100%;
}
@media screen and (min-width: 1367px) {
.column-cta-common-button span { font-size: 16px; }
}

.article-cta { background-color: #f5f5f5; }

.relation-column {
  margin: 50px auto 0;
  width: 90%;
}
@media screen and (min-width: 1367px) {
.relation-column { width: 100%; }
}