/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 62.5%;
}

@media screen and (min-width: 821px) and (max-width: 1536px) {
  html {
    font-size: 0.65vw;
  }
}

@media screen and (max-width: 820px) {
  html {
    font-size: 1.3vw;
  }
}

.lp_style * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.lp_style {
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
  line-height: 1;
  letter-spacing: .05em;
  list-style: none;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  overflow: hidden;
  font-weight: 400;
}

.lp_style button {
  background: transparent;
  padding: 0;
  margin: 0;
}

.lp_style ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lp_style img {
  max-width: 100%;
}

.lp_style a {
  text-decoration: none;
}

.sp_only {
  display: none !important;
}

@media screen and (min-width:821px),
print {
  .pc_only {
    display: block !important;
  }
}

@media screen and (max-width:820px),
print {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block !important;
  }
}

.lp_style .content {
  display: block;
}

@media screen and (min-width:821px),
print {
  .lp_style .content {
    display: block;
  }
}

.content {
  display: block;
  padding: 10rem 0;
}

.txtBlock {
  display: inline-block;
}


._inner {
  padding: 0 4%;
}

@media screen and (min-width:821px),
print {
  ._inner {
    width: 120rem;
    padding: 0;
    margin: 0 auto;
  }
}

/* ---------------------------------------------- 
  Mainvisual
---------------------------------------------- */
.Mainvisual img {
  max-width: 100%;
  width: 100%;
  height: auto;
  line-height: 1;
}

/* ---------------------------------------------- 
  Introduction
---------------------------------------------- */
.Introduction {
  padding: 8rem 3rem;
  background: #746866;
}

@media screen and (min-width:821px),
print {
  .Introduction {
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    height: 180px;
  }
}

.Introduction .__text {
  font-size: 3rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  .Introduction .__text {
    font-size: 2rem;
    line-height: 2;
  }
}


/* ---------------------------------------------- 
  NavigationArea
---------------------------------------------- */
.NavigationArea {
  background: #faf9f6;
}

.NavigationArea {
  padding: 6rem 0 8rem;
}

@media screen and (min-width:821px),
print {
  .NavigationArea {
    padding: 6rem 0 8rem;
  }
}

.NavigationArea .__title {
  text-align: center;
  margin-bottom: 4rem;
}

@media screen and (min-width:821px),
print {
  .NavigationArea .__title {
    text-align: center;
    margin-bottom: 4rem;
  }
}

.NavigationArea .__title img {
  width: 7.5rem;
}

.Navigation ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0 3rem;
}

.Navigation ul li {
  width: calc((100% / 3) - 1.5rem);
}

.Navigation ul li:not(:nth-of-type(3n+1)) {
  margin-left: 1.5rem;
}

.Navigation ul li:nth-of-type(n+4) {
  margin-top: 1.5rem;
}

@media screen and (min-width:821px),
print {
  .Navigation ul {
    padding: 0;
  }

  .Navigation ul li:not(:nth-of-type(3n+1)) {
    margin-left: 0;
  }

  .Navigation ul li:nth-of-type(n+4) {
    margin-top: 0;
  }

  .Navigation ul li:not(:first-of-type) {
    margin-left: 1.5rem;
  }

  .Navigation ul li {
    width: 19rem;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }

  .Navigation ul li:hover {
    opacity: .8;
  }
}



/* ---------------------------------------------- 
  content
---------------------------------------------- */
.content:nth-of-type(odd) {
  background: #f8f3e6;
}

.content:nth-of-type(even) {
  background: #faf9f6;
}

/*  */
.th.allseason {
  background: #eeeeee;
}

.th.spring-summer {
  background: #edd8e8;
}

.th.autumn-winter {
  background: #ebd5d0;
}

.season-table {
  border-radius: 1rem;
  overflow: hidden;
  -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
          box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
}

.season-table .__column .tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.season-table .__column .data-natural-fiber {
  border-bottom: 1px dashed #746866;
}

.season-table .__column .top {
  border-bottom: 1px solid #746866;
}

.season-table .__column .top .th,
.season-table .__column .top .td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 3.2rem;
  font-weight: bold;
  color: #453b3a;
  height: 6rem;
}

@media screen and (min-width:821px),
print {
  .season-table .__column .top .th,
  .season-table .__column .top .td {
    font-size: 2.6rem;
  }
}

.season-table .__column .tr .td.null {
  background: #fff;
  border-right: 1px solid #746866;
}

.season-table .__column .tr > .th,
.season-table .__column .tr > .td {
  width: 8rem;
  line-height: 8rem;
}

@media screen and (min-width:821px),
print {
  .season-table .__column .tr > .th,
  .season-table .__column .tr > .td {
    width: 19rem;
    font-size: 2.6rem;
  } 
}

.season-table .__column .__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: calc(100% - 8rem);
}

@media screen and (min-width:821px),
print {
  .season-table .__column .__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: calc(100% - 19rem);
  }
}

.season-table .__column .__box .td:not(:last-of-type) {
  border-right: 1px dashed #746866 ;
}

.season-table .__column .__box .th ,
.season-table .__column .__box .td  {
  width: calc(100% / 3);
}

@media screen and (min-width:821px),
print {
  .season-table .__column .__box .th ,
  .season-table .__column .__box .td  {
    width: 42.2rem;
  }
  .season-table .__column .__box .th:nth-of-type(2), .season-table .__column .__box .td:nth-of-type(2) {
    width: 16.8rem;
  }

}

.season-table .__column .__box .td {
  padding: 2.5rem 1.2rem;
}

.season-table .__column .__box .td .group {
  text-align: center;
}

.data-natural-fiber .table-natural-fiber ,
.data-chemical-fiber .table-chemical-fiber {
  display: block;
  font-size: 3.2rem;
  font-weight: bold;
  color: #453b3a;
  letter-spacing: .04em;
  border-right: 1px solid #746866;
}

@media screen and (min-width:821px),
print {
  .data-natural-fiber .table-natural-fiber ,
  .data-chemical-fiber .table-chemical-fiber {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.data-natural-fiber .table-natural-fiber {
  background: #f0e9c5;
  border-bottom: 1px dashed #746866;
}

.data-chemical-fiber .table-chemical-fiber {
  background: #ccd9ed;
}

.table-data ,.season-table .__column .td.data-null {
  background: #fff;
}
/*  */

.tag {
  min-width: 12rem;
  display: inline-block;
  padding: .8rem 1.2rem;
  border-radius: 2rem;
  border: #b2b2b2 1px solid;
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: -.04em;
  margin: 0 auto;
  cursor: pointer;
  color: #453b3a !important;
}

@media screen and (min-width:821px),
print {
  .tag {
    min-width: 12rem;
    max-width: 17rem;
    padding: .9rem 0;
    border-radius: 1.75rem;
    border: #b2b2b2 1px solid;
    font-size: 2rem;
  }

  .tag-l {
    min-width: 17rem;
  }
}

@media screen and (min-width:821px),
print {
  .season-table .group {
    text-align: center;
  }

  .season-table .group-l {
    text-align: left !important;
    margin-left: 3.5rem !important;
  }
}

.season-table .group:nth-of-type(n+2),
.tag:nth-of-type(n+2) {
  margin: 1rem auto 0;
}

@media screen and (min-width:821px),
print {

  .season-table .group:nth-of-type(n+2),
  .tag:nth-of-type(n+2) {
    margin: 0;
  }

  .season-table .group:nth-of-type(n+2) {
    margin-top: 1rem;
  }
}

.fiber_table {
  -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
          box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;
}

.fiber_table .__type {
  font-size: 4rem;
  padding: 2rem 0;
  color: #453b3a;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #746866;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__type {
    font-size: 3.2rem;
    padding: 2rem 0;
  }
}

.fiber_table.natural-fiber .__type,
.fiber_table.natural-fiber .__category {
  background: #f0e9c5;
}

.fiber_table.chemical-fiber .__type,
.fiber_table.chemical-fiber .__category {
  background: #ccd9ed;
}

.fiber_table.chemical-fiber {
  margin: 3.4rem auto 0;
}

@media screen and (min-width:821px),
print {
  .fiber_table.chemical-fiber {
    margin: 4rem auto 0;
  }
}

.fiber_table .__category {
  position: relative;
  width: 8rem;
  line-height: 8rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  border-right: 1px solid #746866;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__category {
    width: 100%;
    border-right: hidden;
  }
}

@media screen and (min-width:821px),
print {
  .fiber_table.natural-fiber .__name:hover{
    background: #f0e9c5;
  }
  .fiber_table.chemical-fiber .__name:hover {
    background: #ccd9ed;
  }
}

.fiber_table .__category .__name {
  display: block;
  font-size: 3.2rem;
  font-weight: bold;
  color: #453b3a;
  line-height: 1;
  text-align: center;
}



@media screen and (min-width:821px),
print {
  .fiber_table .__category .__name {
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    transform: translate(0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 2.6rem;
    border-right: 1px solid #746866;
    text-align: center;
    height: 9rem;
  }
}

@media screen and (min-width:821px),
print {
  .fiber_table .__name {
    width: calc(100% - (50.5rem * 2));
  }

  .fiber_table .__merit,
  .fiber_table .__demerit {
    width: 50.5rem;
  }
}

/* @media screen and (min-width:821px),print {} */

.fiber_table .__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 8rem 0px 1fr;
  grid-template-columns: 8rem 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.fiber_table .__layout>div:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 3 / 2;
}

.fiber_table .__layout>div:nth-of-type(2) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 2 / 3;
}

.fiber_table .__layout>div:nth-of-type(3) {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 2 / 2 / 3 / 3;
}


.fiber_table .__layout04>div:nth-of-type(1) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 5 / 2;
}

.fiber_table .__layout04>div:nth-of-type(2) {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 2 / 3;
}

.fiber_table .__layout04>div:nth-of-type(3) {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 2 / 2 / 3 / 3;
}

.fiber_table .__layout04>div:nth-of-type(4) {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 3 / 2 / 4 / 3;
}

.fiber_table .__layout04>div:nth-of-type(5) {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 4 / 2 / 5 / 3;
}

.fiber_table .__layout05  {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  }
  
 .fiber_table .__layout05 > div:nth-of-type(1) { -ms-grid-row: 1; -ms-grid-row-span: 5; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-area: 1 / 1 / 6 / 2; }
 .fiber_table .__layout05 > div:nth-of-type(2) { -ms-grid-row: 1; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 1 / 2 / 2 / 3; }
 .fiber_table .__layout05 > div:nth-of-type(3) { -ms-grid-row: 2; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 2 / 2 / 3 / 3; }
 .fiber_table .__layout05 > div:nth-of-type(4) { -ms-grid-row: 3; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 3 / 2 / 4 / 3; }
 .fiber_table .__layout05 > div:nth-of-type(5) { -ms-grid-row: 4; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 4 / 2 / 5 / 3; }
 .fiber_table .__layout05 > div:nth-of-type(6) { -ms-grid-row: 5; -ms-grid-row-span: 1; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-area: 5 / 2 / 6 / 3; }


.fiber_table .__material {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 8rem 0px 1fr;
  grid-template-columns: 8rem 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background: #fff;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__layout {
    display: block;
  }

  .fiber_table .__layout:nth-of-type(n+2) {
    border-top: 1px solid #746866;
  }
}



@media screen and (min-width:821px),
print {
  .fiber_table .__material {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.fiber_table .__material:not(:first-of-type) {
  border-top: 1px dashed #746866;
}

.fiber_table .__material .__name {
  display: block;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  width: 8rem;
  line-height: 8rem;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1 / 1 / 3 / 2;
  border-right: 1px solid #746866;
}


@media screen and (min-width:821px),
print {
  .fiber_table .__material .__name {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
}

.fiber_table .__material .__name a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
  color: #746866 !important;
  text-align: center;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__material .__name a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media screen and (min-width:821px),
print {
  .fiber_table .__material .__name {
    position: relative;
    font-size: 2.6rem;
    width: calc(100% - (50.5rem * 2));
    border-right: 1px solid #746866;
            text-align: center;
  }
  

  .fiber_table .__material .__name::after {
    content: "";
    display: block;
    position: absolute;
    bottom: .6rem;
    right: .6rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2rem 2rem;
    border-color: transparent transparent #746866 transparent;
  }
}

.fiber_table .__unit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: space-around;
  padding: 3.8rem 3.6rem;
  font-size: 2.4rem;
  color: #453b3a;
  letter-spacing: -.04em;
  white-space: nowrap;
  text-align: left;
}

.fiber_table .__unit li {
  line-height: 1.5;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__unit {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    padding: 2.5rem .8rem;
    font-size: 1.7rem;
    height: 100%;
    white-space: inherit;
  }

  .fiber_table .__unit.center {
    text-align: left;
  }

  .fiber_table .__unit li {
    min-width: 7em;
    max-width: 14em;
  }
}

.fiber_table .__material .__merit {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 1 / 2 / 2 / 3;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__material .__merit {
    border-right: 1px dashed #746866;
  }
}

.fiber_table .__material .__demerit {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-area: 2 / 2 / 3 / 3;
}

@media screen and (min-width:821px),
print {

  .fiber_table .__material .__merit,
  .fiber_table .__material .__demerit {
    width: 50.5rem;
  }
}


.fiber_table .--icon {
  text-align: center;
  height: 9rem;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width:821px),
print {

  .fiber_table .__material .__merit .--icon,
  .fiber_table .__material .__demerit .--icon {
    display: none !important;
  }
}

.fiber_table .__merit .--icon {
  background: #fce5e3;
}

@media screen and (min-width:821px),
print {
  .fiber_table .__merit .--icon {
    border-right: 1px dashed #746866;
  }
}

.fiber_table .__merit .--icon img {
  width: 10.9rem;
}

.fiber_table .__demerit .--icon {
  background: #d7eaf1;
}

.fiber_table .__demerit .--icon img {
  width: 13.8rem;
}

.content .__title {
  margin: 0 auto;
}

.content .__title img {
  width: 100%;
}

#content01 .__title {
  width: 33rem;
}

#content02 .__title {
  width: 57.8rem;
}

#content03 .__title {
  width: 42.5rem;
}

@media screen and (min-width:821px),
print {
  #content03 .__title {
    width: 70.5rem;
  }
}

#content04 .__title {
  width: 58.2rem;
}

@media screen and (min-width:821px),
print {
  #content04 .__title {
    width: 53.6rem;
  }
}

  .content .head {
    text-align: center;
    margin-bottom: 6rem;
  }

.content .__information {
  font-size: 2.8rem;
  line-height: 1.5;
  text-align: left;
  color: #453b3a;
  letter-spacing: .06em;
}

.content .__information .txtBlock {
  display: inline;
}

@media screen and (min-width:821px),
print {
  .content .__information {
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
  }

  .content .__information .txtBlock {
    display: inline-block;
  }
}

.content .head .__title + .__information {
  margin: 3rem auto 0;
  padding: 0 3rem;
}

@media screen and (min-width:821px),
print {
  .content .head .__title+.__information {
    margin: 3rem auto 0;
    padding: 0;
  }
}

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

@media screen and (min-width:821px),
print {
  #content03 .__image {
    max-width: 100.2rem;
    margin: 0 auto;
  }
}

.content .__image img {
  width: 100%;
}

.content .__image:nth-of-type(2) {
  margin-top: 3.5rem;
}

@media screen and (min-width:821px),
print {
  .content .__image:nth-of-type(2) {
    margin-top: 4rem;
  }
}

.__subtitle {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 8rem;
  font-size: 3.6rem;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  font-weight: bold;
  text-align: center;
}

.__subtitle::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 100%);
      -ms-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 23px 19px 0 19px;
}

.__subtitle.plant_fiber {
  background: #f0e9c5;
}

.__subtitle.plant_fiber::after {
  border-color: #f0e9c5 transparent transparent transparent;
}

.__subtitle.regenerated-fiber {
  background: #ccd9ed;
}

.__subtitle.regenerated-fiber::after {
  border-color: #ccd9ed transparent transparent transparent;
}

.__visual .__photo {
  position: relative;
  width: 100%;
  height: 34rem;
}

#plant_fiber {
  background: url(./../images/sp/plant_fiber-sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#animal_fiber {
  background: url(./../images/sp/animal_fiber-sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#regenerated-fiber {
  background: url(./../images/sp/regenerated-fiber_sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media screen and (min-width:821px),
print {
  .__visual .__photo {
    position: relative;
    width: 100%;
    height: 34rem;
  }

  #plant_fiber {
    background: url(./../images/pc/plant_fiber-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  #animal_fiber {
    background: url(./../images/pc/animal_fiber-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  #regenerated-fiber {
    background: url(./../images/pc/regenerated-fiber_pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

.__visual .__photo .--icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 22rem;
  height: auto;
}

@media screen and (min-width:821px),
print {
  .__visual .__photo .--icon {
    width: 22rem;
    height: auto;
  }
}

.sub--content .__title {
  position: relative;
}

@media screen and (min-width:821px),
print {
  .sub--content .__title {
    text-align: center;
  }
}

.__content.merit {
  background: #fce5e3;
}

.__content.demerit {
  background: #d7eaf1;
}

.__content.trivia {
  background: #f8e9d7;
}

.merit-color {
  color: #d25264;
}

.demerit-color {
  color: #3c94bb;
}

.subUnit {
  margin-bottom: 10rem;
}

@media screen and (min-width:821px),
print {
  .subUnit {
    margin-bottom: 12rem;
  }
}

.sub--content {
  margin: 8rem auto 0;
}

@media screen and (min-width:821px),
print {
  .sub--content {
    margin: 6rem auto 0;
  }
}

.sub--content .__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4.2rem 0;
}

@media screen and (min-width:821px),
print {
  .sub--content .__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2.8rem 0;
  }
}

.sub--content .__content.hair {
  display: block;
  margin: 8rem auto 6rem;
  padding: 4rem 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: url(./../images/sp/hair-bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1rem;
}

@media screen and (min-width:821px),
print {
  .sub--content .__content.hair {
    display: block;
    margin: 8rem auto 6rem;
    padding: 4rem 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: url(./../images/pc/hair-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 1rem;
  }
}

.sub--content .__content.hair .__title {
  width: 16.3rem !important;
  margin-bottom: 3rem;
}

@media screen and (min-width:821px),
print {
  .sub--content .__content.hair .__title {
    margin-bottom: 3rem ;
  }
}

.sub--content .__content.hair .paragraph {
  font-size: 2.4rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
          box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
  letter-spacing: .04em;
  padding: 0 3rem;
}

.sub--content .__content.hair .paragraph .txtBlock {
  display: block;
}

@media screen and (min-width:821px),
print {
  .sub--content .__content.hair .paragraph {
    font-size: 1.8rem;
    line-height: 1.5;
    text-align: center;
    -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
            box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
    padding: 0;
  }

  .sub--content .__content.hair .paragraph .txtBlock {
    display: block;
  }
}

.sub--content .__title {
  margin: 0 auto 4rem;
  text-align: center;
  position: relative;
}

.sub--content .__title .--en {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  font-size: 6rem;
  font-weight: bold;
  color: #ebe7de;
  z-index: 1;
  letter-spacing: .04em;
}

.sub--content .__title .--ja {
  position: relative;
  line-height: 1;
  z-index: 2;
  font-size: 3.6rem;
  color: #453b3a;
  font-weight: bold;
}

.sub--content .__title .--ja .--kana {
  display: block;
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  margin-bottom: .8rem;
}

.sub--content .__content {
  border-radius: 1rem;
  -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
          box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
}

@media screen and (min-width:821px),
print {
  .sub--content .__content {
    border-radius: 1rem;
    -webkit-box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
            box-shadow: 1px 1.732px 1px 0px rgba(116, 104, 102, 0.13);
  }
}

.sub--content .__content:not(:first-of-type) {
  margin: 2rem auto 0;
}

@media screen and (min-width:821px),
print {
  .sub--content .__content:not(:first-of-type) {
    margin: 1rem auto 0;
  }
}

.__content .__icon {
  width: 19rem;
  text-align: center;
}

.merit .__icon img {
  width: 11rem;
}

@media screen and (min-width:821px),
print {
.merit .__icon img {
  width: 9.6rem;
}
}

.demerit .__icon img {
  width: 14rem;
}
@media screen and (min-width:821px),
print {
  .demerit .__icon img {
    width: 12.2rem;
  }
}

.trivia .__icon img {
  width: 9.6rem;
}

@media screen and (min-width:821px),
print {
  .trivia .__icon img {
    width: 8.4rem;
  } 
}

@media screen and (min-width:821px),
print {
  .__content .__icon {
    width: 24rem;
    text-align: center;
  }
}

.__content .__feature {
  width: calc(100% - 19rem);
  padding-right: 2.8rem;
}

@media screen and (min-width:821px),
print {
  .__content .__feature {
    width: calc(100% - 24rem);
    padding-right: 0;
  }
}

.__content .__feature .paragraph {
  font-size: 2.4rem;
  line-height: 1.5;
}

@media screen and (min-width:821px),
print {
  .__content .__feature .paragraph {
    max-width: 90rem;
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

.color-r {
  font-weight: bold;
  color:#d25264 ;
}
.color-b {
  font-weight: bold;
  color: #3c94bb;
}



@media screen and (min-width:821px),
print {
  .fiber_table .__category.bd-top{
    border-top: none;
  }
}


.season-table .__column .tr > .th span, .season-table .__column .tr > .td span,
.fiber_table .__category .__name span ,
.fiber_table .__material .__name span {
  text-align: center;
  font-weight: bold;
}

@media screen and (max-width:820px),print {
.season-table .__column .tr > .th span, .season-table .__column .tr > .td span,
.fiber_table .__category .__name span ,
.fiber_table .__material .__name span {
  display: block;
  line-height: 1;
}
}

.vertical-txt {
  transform: rotate(90deg);
}

@media screen and (min-width:821px),
print {
  .vertical-txt {
    transform: rotate(0);
  }
}

@media screen and (max-width:820px),print {
.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  height: 100%;  
}
}