/*  パソコン用CSS  */
@media screen and (min-width:601px) {
  main{
       width: 1080px;
       margin-right: auto;
       margin-left: auto;
       padding-top: 100px;
       text-align: center;
  }

  #mainvisual_ph{
       display: none;
  }

  #item1{
       margin-top: 60px;
       margin-bottom: 60px;
  }

  #item101{
       font-family: "Roboto","arial";
       font-weight: 900;
       text-align: center;
       font-size: 32px;
       letter-spacing: 0.1em;
  }

  #item102_pc{
       text-align: center;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.2em;
       margin-top: 30px;
  }

  #item102_ph{
       display: none;
  }

  #upcycle_d1_ph{
       display: none;
  }

  .upcycle_d2_ph{
       display: none;
  }

  #item2{
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 1080px;
       text-align: center;
       margin-top: 30px;
       margin-right: 20px;
       margin-left: 20px;
  }

  #item2_1{
       display: flex;
       flex-direction: row;
       align-items: top;
       width: 1080px;
       text-align: center;
       margin-top: 30px;
       margin-right: 20px;
       margin-left: 20px;
  }


  .item2_1_d{
       width: 300px;
  }

  .item2_1_d p{
       text-align: center;
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.1em;
  }

  #item2_1_d_c{
       margin-right: 70px;
       margin-left: 70px;
  }

  .upcycle_d2_ya_pc{
       margin-right: 20px;
       margin-left: 20px;
  }

  .upcycle_d2_ya_ph{
       display: none;
  }

  .description1_pc{
       text-align: center;
       font-size: 18px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.2em;
       margin-top: 60px;
       margin-bottom: 60px;
  }

  .description1_ph{
       display: none;
  }

  .item4{
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
       width: 1080px;
       text-align: center;
       margin-top: 0px;
       margin-left: 0px;
       margin-right: 0px;
       margin-bottom: 30px;
       padding: 0px;
       border: none;
  }

  .item5{
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 1080px;
       text-align: center;
       margin-top: 0px;
       margin-left: 0px;
       margin-right: 0px;
       margin-bottom: 30px;
       padding: 0px;
       border: none;
  }

  .upcycle_d3_ph{
       display: none;
  }

  .item4_d{
       text-align: center;
       width: 480px;
       height: 450px;
       margin: 0px;
       padding: 0px;
       border: none;
  }

  .item4_d_1{
       position: relative;
       display: inline-block;
       text-align: center;
       vertical-align: middle;
       width: 300px;
       height: 450px;
  }

  .item4_d_1 img{
       text-align: center;
       margin-top: 75px;
       margin-bottom: 30px;
  }

  .item4_d_1_d1{
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.1em;
  }

  .item4_d_1_d2{
       position: absolute;
       bottom: 75px;
       right: 90px;
       font-family: "Roboto","arial";
       font-size: 14px;
       font-weight: 900;
       letter-spacing: 0.2em;
       border: 2px solid;
       padding-top: 4px;
       padding-bottom: 4px;
       padding-left: 10px;
       padding-right: 10px;
  }

  .item4_d_1_d2 a{
       color: black;
  }

  .item4_d_1_d3{
       display: none;
  }

  #upcycle_reference{
       text-align: left;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       margin-top: 50px;
  }

  .ue_r_d{
       margin-top: 15px;
  }

  .ue_r_d a{
       font-family: "Roboto","arial";
       text-decoration: none;
       color: black;
  }
}


/*  スマホ用CSS  */
@media screen and (max-width:600px) {
  main{
       width: 390px;
       margin-right: auto;
       margin-left: auto;
       padding-top: 100px;
       text-align: center;
  }

  #mainvisual_pc{
       display: none;
  }

  #item1{
       text-align: center;
       width: 290px;
       margin-top: 30px;
       margin-bottom: 30px;
       margin-left: auto;
       margin-right: auto;
  }

  #item101{
       font-family: "Roboto","arial";
       font-weight: 900;
       text-align: center;
       font-size: 24px;
       margin-bottom: 20px;
  }

  #item102_pc{
       display: none;
  }

  #item102_ph{
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.2em;
  }

  #upcycle_d1_pc{
       display: none;
  }

  #item2{
       display: flex;
       flex-direction: row;
       align-items: center;
       width: 390px;
       text-align: center;
       margin-top: 30px;
       margin-right: 10px;
       margin-left: 10px;
  }

  #item2_1{
       display: flex;
       flex-direction: row;
       align-items: top;
       width: 390px;
       text-align: center;
       margin-top: 20px;
       margin-right: 10px;
       margin-left: 10px;
  }

  .item2_1_d{
       width: 100px;
  }

  .item2_1_d p{
       width: 100px;
       text-align: center;
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.1em;
  }

  #item2_1_d_c{
       margin-right: 35px;
       margin-left: 35px;
  }

  .upcycle_d2_ya_ph{
       margin-right: 10px;
       margin-left: 10px;
  }

  .upcycle_d2_ya_pc{
       display: none;
  }

  .upcycle_d2_pc{
       display: none;
  }

  .description1_pc{
       display: none;
  }

  .description1_ph{
       width: 305px;
       text-align: center;
       margin-top: 30px;
       margin-bottom: 30px;
       margin-left: auto;
       margin-right: auto;
  }

  .description1_ph p{
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 18px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.2em;
  }

  .item4{
       width: 390px;
       text-align: center;
       margin-bottom: 30px;
  }

  .item5{
       width: 390px;
       text-align: center;
       margin-bottom: 30px;
  }

  .upcycle_d3_pc{
       display: none;
  }

  .item4_d{
       width: 290px;
       text-align: center;
       display: inline-block;
  }

  .item4_d_1{
       display: inline-block;
       width: 290px;
       text-align: center;
       margin-top: 30px;
       margin-bottom: 30px;
  }

  .item4_d_1_d1{
       display: inline-block;
       width: 290px;
       text-align: justify;
       text-justify: inter-ideograph;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       letter-spacing: 0.1em;
       margin-top: 30px;
       margin-bottom: 30px;
  }

  .item4_d_1_d3{
       display: none;
  }

  .item4_d_1_d2{
       display: inline-block;
       text-align: center;
       font-family: "Roboto","arial";
       font-size: 14px;
       font-weight: 900;
       letter-spacing: 0.2em;
       border: 2px solid;
       padding-top: 4px;
       padding-bottom: 4px;
       padding-left: 10px;
       padding-right: 10px;
  }

  .item4_d_1_d2 a{
       color: black;
  }

  #upcycle_reference{
       width: 360px;
       text-align: left;
       font-size: 12px;
       font-weight: bold;
       line-height: 22px;
       margin-top: 50px;
       margin-left: 15px;
  }

  .ue_r_d{
       margin-top: 15px;
  }

  .ue_r_d a{
       font-family: "Roboto","arial";
       text-decoration: none;
       color: black;
  }
}