@media screen and (max-width: 828px) {
  .commonWidth-sp {
    width: 88.40579710144928%;
    margin-right: auto;
    margin-left: auto; } }

/**
 * Fonts
 */
/*
$fonts: (
  NotoSans:  'noto-sans, sans-serif', 
  // 400 -> Regular, 500 -> Regular, 700 -> Bold, 900 -> Black
  NotoSerif: 'Noto Serif JP, serif',  
  // 400 -> Regular, 
  Oswald:    'Oswald, sans-serif',
   // 400 -> Regular
  Roboto:    'Roboto, sans-serif',
   // 400 -> Regular
);

@mixin get_webfont( $font, $weight, $style: normal ) {
  $fonts: (
    NotoSans: 'noto-sans, sans-serif', 
    // 400 -> Regular, 500 -> Regular, 700 -> Bold, 900 -> Black
    NotoSerif:'Noto Serif JP, serif',  
    // 400 -> Regular
    Oswald:   'Oswald, sans-serif',
    // 400 -> Regular
    Roboto:   'Roboto, sans-serif',
    // 400 -> Regular
  );

  font-family: unquote( map-get( $fonts, $font ) );
  font-weight: $weight;
  font-style: $style;
  @content;
}
*/
.product .pageHeader {
  background: url(../img/product/product_pageheader.png) no-repeat center center/cover; }
  @media screen and (max-width: 828px) {
    .product .pageHeader {
      background: url(../img/product/product_pageheader_sp.png) no-repeat center center/cover; } }

.product_lead_title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.18em; }
  @media screen and (max-width: 1366px) {
    .product_lead_title {
      font-size: 2.63543vw; } }
  @media screen and (max-width: 828px) {
    .product_lead_title {
      font-size: 5.7971vw; } }

.product_lead_text {
  text-align: center;
  padding-top: 24px; }
  @media screen and (max-width: 1366px) {
    .product_lead_text {
      padding-top: 1.75695vw; } }
  @media screen and (max-width: 828px) {
    .product_lead_text {
      padding-top: 5.7971vw; } }

.product_main {
  padding-top: 64px; }
  @media screen and (max-width: 1366px) {
    .product_main {
      padding-top: 4.68521vw; } }
  @media screen and (max-width: 828px) {
    .product_main {
      padding-top: 9.66184vw; } }
  .product_main_text {
    padding-top: 24px; }
    @media screen and (max-width: 1366px) {
      .product_main_text {
        padding-top: 1.75695vw; } }
    @media screen and (max-width: 828px) {
      .product_main_text {
        padding-top: 5.7971vw; } }

.product_type {
  margin-top: 64px; }
  @media screen and (max-width: 1366px) {
    .product_type {
      margin-top: 4.68521vw; } }
  @media screen and (max-width: 828px) {
    .product_type {
      margin-top: 13.52657vw; } }
  .product_type_title {
    background: #333;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    margin-bottom: 48px;
    padding: 24px;
    font-size: 2.0rem;
    font-weight: 700;
    color: #fff; }
    @media screen and (max-width: 1366px) {
      .product_type_title {
        height: 3.66032vw;
        margin-bottom: 3.51391vw;
        padding: 1.75695vw;
        font-size: 1.46413vw; } }
    @media screen and (max-width: 828px) {
      .product_type_title {
        height: 12.07729vw;
        margin-bottom: 0vw;
        padding: 5.7971vw;
        font-size: 4.83092vw; } }

.product .productList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -30px 0 0 -30px; }
  @media screen and (max-width: 1366px) {
    .product .productList {
      margin: -2.19619vw 0 0 -2.19619vw; } }
  @media screen and (max-width: 828px) {
    .product .productList {
      display: block;
      width: 90%;
      margin: 7.72947vw auto 0; } }
  .product .productList_item {
    width: 300px;
    margin: 30px 0 0 30px;
    padding-bottom: calc(60px + 24px); }
    @media screen and (max-width: 1366px) {
      .product .productList_item {
        width: 21.96193vw;
        margin: 2.19619vw 0 0 2.19619vw;
        padding-bottom: calc(vw_pc( 60 ) + vw_pc( 24 )); } }
    @media screen and (max-width: 828px) {
      .product .productList_item {
        width: 100%;
        margin: 0;
        padding-bottom: 0; }
        .product .productList_item:not(:first-child) {
          margin-top: 11.5942vw; } }
  .product .productList_title {
    margin-top: 20px;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.06em; }
    @media screen and (max-width: 1366px) {
      .product .productList_title {
        margin-top: 1.46413vw;
        font-size: 1.31772vw; } }
    @media screen and (max-width: 828px) {
      .product .productList_title {
        margin-top: 4.83092vw;
        font-size: 4.34783vw; } }
  .product .productList_text {
    margin-top: 16px;
    line-height: 2.0; }
    @media screen and (max-width: 1366px) {
      .product .productList_text {
        margin-top: 1.1713vw; } }
    @media screen and (max-width: 828px) {
      .product .productList_text {
        margin-top: 3.86473vw; } }
  .product .productList_button {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; }
    @media screen and (max-width: 828px) {
      .product .productList_button {
        position: relative;
        margin-top: 5.7971vw; } }
    .product .productList_button .commonButton {
      width: 100%; }

.recycle_wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  margin-top: 64px; }
  .recycle_wrapper::after {
    content: "";
    position: absolute; }

.recycle_list {
  max-width: 350px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative; }
  .recycle_list::before {
    content: "";
    position: absolute;
    z-index: -1;
    background: #E4D8E6;
    width: 30px;
    height: 100%;
    top: 82px;
    left: calc( ( 100% - 30px ) / 2); }
  .recycle_list:last-child {
    margin-left: 80px; }
  .recycle_list_title {
    width: 100%;
    max-width: 250px;
    display: inline-block;
    background-color: #51005B;
    border-radius: 50px;
    padding: 5px;
    color: #fff;
    text-align: center;
    font-size: 2.4rem; }

.recycle_item {
  padding: 16px;
  margin-top: 32px;
  border: solid #51005B 1px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .recycle_item_title {
    font-size: 2.4rem;
    margin-bottom: 16px; }
  .recycle_item_image {
    width: 100%;
    margin-bottom: 16px; }
  .recycle_item_text {
    font-size: 1.4rem; }
    .recycle_item_text span {
      font-size: 1.6rem;
      display: block;
      text-align: center; }