@charset "utf-8";

.page-color { color: #fb4737; }
.contents-header .headline { color: #fb4737; }
.headline_border-left-bottom {
  border-bottom-color: #fb4737;
  border-left-color: #fb4737;
  color: #000;
}

.ul {
  margin: 1em 0 0;
  list-style: none;
}
.ul .li {
  position: relative;
  padding: 0 0 0.2em 1.2em;
}
.ul .li:before {
/*  content: "\f111";*/
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.ol {
  margin: 1em 0 0;
  list-style: none;
}
.ol .li {
  position: relative;
  padding: 0 0 1em 1.2em;
}
.ol .li:before {
  position: absolute;
  left: 0;
  top: 0;
}

.ol .li:nth-child(1):before { content: "1."; }
.ol .li:nth-child(2):before { content: "2."; }
.ol .li:nth-child(3):before { content: "3."; }

.dl .dt {
  position: relative;
  padding-left: 1.2em;
}
.dl .dt:before {
  content: "\f111";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.section:nth-of-type(1) .subheading .headline {
  background-color: #fb4737;
  padding: 0.5em 1em;
  color: #fff;
}
@media only screen and (max-width: 768px) {
.subheading .headline { font-size: 14px; }
}
.tts-originalecobag {
  margin: 20px 0 0;
}
.tts-originalecobag .link-text {
  color: #0068b7 !important;
}
.tts-originalecobag .link-block { display: block; }
.tts-originalecobag .picture { display: block; }
@media only screen and (max-width: 768px) {
.tts-originalecobag .picture { width: 100%; }
}
.tts-originalecobag .sentence { margin: 10px 0 0; }
.summary_list { color: #fb4737; }

.profile-box {
  background-color: #ebf4ff;
  margin-top: 6.25em;
}
@media only screen and (max-width: 768px) {
.profile-box { margin-top: 50px; }
}

.figuration {
  text-align: center;
  font-size: 14px;
}
@media only screen and (max-width: 768px) {
.figuration {
  text-align: left;
  font-size: 11px;
}
}

.gazo_commentary .link {
  padding: 1em 0;
  text-align: right;
}

.fas { line-height: 1.5; }

.subpage-content-width {
  width: 1200px;
  max-width: 1200px;
}

.table-of-contents {
  background-color: #ffdad6;
  margin: 20px 0 0;
  padding: 1.25em 2em;
}
@media only screen and (max-width: 768px) {
.table-of-contents {
  padding: 1em;
}
}
.table-of-contents .ul { margin: 10px 0 0; }
.table-of-contents .ul .li:before { display: none; }
.table-of-contents .ul .li { padding: 0 0 1em 1em; }
.table-of-contents .ul .li .strong { font-size: 0.9em; }

.ul-sub { margin: 0 0 0 1.5em; }

.subheading-wrap {
  margin: 70px 0 0;
  padding: 0 0.5em;
}
@media only screen and (max-width: 768px) {
.subheading-wrap { margin: 40px 0 0; }
}

.section_inner .subheading-wrap:first-child { margin: 20px 0 0; }

.subheading-wrap > .headline {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #fb4737;
}
@media only screen and (max-width: 768px) {
.subheading-wrap > .headline {
  font-size: 15px;
  line-height: 1.2;
}
}

.subheading-wrap > .sentence { margin: 1em 0 0; }

.sp-2column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 70px 0 0;
}
@media only screen and (max-width: 768px) {
.sp-2column { margin: 30px 0 0; }
}

.sp-2column_list { width: 45%; }
@media only screen and (max-width: 768px) {
.sp-2column_list { width: 49%; }
}

.vertical-box .headline {
  display: table;
  width: 100%;
}

.vertical-box .headline .headline_inner {
  position: relative;
  display: table-cell;
  vertical-align: top;
  height: 2.5em;
  padding-left: 1.5em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
@media only screen and (max-width: 768px) {
.vertical-box .headline .headline_inner {
  height: 4.5em;
  padding-left: 1em;
  font-size: 13px;
}
}

.vertical-box .headline .headline_inner:before {
  position: absolute;
  top: 1px;
  left: 0;
  font-size: 20px;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
.vertical-box .headline .headline_inner:before { font-size: 14px; }
}

.vertical-box .headline .headline_inner.number01:before { content: "①"; }
.vertical-box .headline .headline_inner.number02:before { content: "②"; }
.vertical-box .headline .headline_inner.number03:before { content: "③"; }
.vertical-box .headline .headline_inner.number04:before { content: "④"; }
.vertical-box .headline .headline_inner.number05:before { content: "⑤"; }

.vertical-box .figure { width: 100%; }

.vertical-box .commentary { padding: 20px 0 50px; }
@media only screen and (max-width: 768px) {
.vertical-box .commentary { padding: 20px 10px 30px; }
}

.vertical-box .commentary .sentence { padding: 0 0 1em; }
@media only screen and (max-width: 768px) {
.vertical-box .commentary .sentence { font-size: 13px; }
}

.relation-column-title {
  padding-bottom: 0.5em;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1;
  color: #fb4737;
}

.figure-left {
  display: table;
  width: 100%;
  padding: 0 0 30px;
}
@media only screen and (max-width: 768px) {
.figure-left { display: block; }
}

.figure-left .figure {
  display: table-cell;
  vertical-align: middle;
  width: 387px;
  height: 243px;
  padding-right: 23px;
}
@media only screen and (max-width: 768px) {
.figure-left .figure {
  display: block;
  width: 100%;
  height: auto;
  padding-right: 0;
}
}

.figure-left .figure .picture { width: 387px; }
@media only screen and (max-width: 768px) {
.figure-left .figure .picture { width: 100%; }
}

.figure-left .commentary {
  display: table-cell;
  vertical-align: middle;
  width: 490px;
  height: 243px;
}
@media only screen and (max-width: 768px) {
.figure-left .commentary {
  display: block;
  width: 100%;
  height: auto;
  margin: 1em 0 0;
}
}

.figure-left .commentary .headline {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}
@media only screen and (max-width: 768px) {
.figure-left .commentary .headline { font-size: 16px; }
}

.figure-left .commentary .subheading {
  margin: 1em 0 0;
  text-indent: -0.6em;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}
@media only screen and (max-width: 768px) {
.figure-left .commentary .subheading { font-size: 15px; }
}

.figure-left .commentary .sentence { margin: 1.5em 0 0; }
@media only screen and (max-width: 768px) {
.figure-left .commentary .sentence { margin: 1em 0 0; }
}

.figure-left .commentary .link {
  margin: 1.5em 0 0;
  text-align: right;
  font-size: 14px;
}

.target-blank {
  text-indent: 1.2em;
  word-break: break-all;
}
@media only screen and (max-width: 768px) {
.target-blank {
  margin: 0.2em 0 0;
  text-indent: 0;
}
}

.my-sns {
  display: inline-block;
  margin: 0 0 0 1.5em;
  line-height: 1.5;
}

.sentence.align-right { text-align: right; }
@media only screen and (max-width: 768px) {
.sentence.align-right { text-align: left; }
}

.spec-table {
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  width: 100%;
  margin: 20px 0 0;
  box-sizing: border-box;
  table-layout: fixed;
}

.spec-table th {
  background-color: #d9e2f3;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  width: 28%;
  text-align: left;
  vertical-align: top;
  padding: 10px 1%;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
.spec-table th { white-space: normal; }
}

.spec-table td {
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  width: 68%;
  text-align: left;
  vertical-align: top;
  padding: 10px 1%;
}

.spec-table .product-name {
  font-size: 1.2em;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
.spec-table .product-name { font-size: 1.05em; }
}

.spec-table dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.spec-table dt {
  display: inline-block;
  width: 20%;
}
@media only screen and (max-width: 768px) {
.spec-table dt {
  display: block;
  width: 100%;
  font-size: 0.9em;
  font-weight: bold;
}
}

.spec-table dd {
  position: relative;
  width: 76%;
  padding-left: 3%;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.spec-table dd {
  width: 100%;
  padding-left: 0;
}
}

.spec-table dd:before {
  content: "：";
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (max-width: 768px) {
.spec-table dd:before { display: none; }
}

.spec-table li {
  position: relative;
  padding-left: 1em;
}

.spec-table li:before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}


/* FIGURE SMALL THUMBNAIL LIST
============================================ */
.figure-small-thumbnail_list {
  border-bottom: 1px dashed #ccc;
  display: flex;
  width: 100%;
  padding: 20px 0;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list { flex-direction: column; }
}

.figure-small-thumbnail_list:last-child { border-bottom: none; }

.figure-small-thumbnail_list .figure {
  width: 255px;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .figure { width: 100%; }
}

.figure-small-thumbnail_list .figure .figure_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure-small-thumbnail_list .figure .figure_inner .picture {
  border: 1px solid #ccc;
  display: block;
  width: 248px;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .figure .figure_inner .picture { width: 100%; }
}

.figure-small-thumbnail_list .description {
  display: flex;
  align-items: center;
  width: 600px;
  padding: 0 10px;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .description {
  align-items: flex-start;
  width: 100%;
  padding: 10px 0;
}
}

.figure-small-thumbnail_list .description .description_inner { width: 100%; }

.figure-small-thumbnail_list .description .headline {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .description .headline {
  font-size: 15px;
  line-height: 1.2;
}
}

.figure-small-thumbnail_list .description .sentence {
  margin: 0.5em 0 0;
  font-size: 14px;
  line-height: 1.7;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .description .sentence {
  font-size: 12px;
  line-height: 1.5;
}
}

.figure-small-thumbnail_list .description .reference-url {
  margin: 1.5em 0 0;
  text-align: right;
  font-size: 12px;
  line-height: 1.2;
  color: #666;
}
@media only screen and (max-width: 768px) {
.figure-small-thumbnail_list .description .reference-url {
  margin: 1.5em 0 0;
  text-align: left;
  font-size: 10px;
}
}

.picture.auto-width {
  display: block;
  margin: 0 auto;
  max-width: 900px;
  width: auto;
}
@media only screen and (max-width: 768px) {
.picture.auto-width {
  max-width: auto;
  width: 100%;
}
}

.memo-box {
  background-color: #ebf4ff;
  margin-top: 1em;
}

.supplement {
  color: #666;
  font-size: 0.8em;
}