/* ==================================================
  base
================================================== */

.pc_reuse img {
  height: auto;
}





/* ==================================================
  common
================================================== */

/* ----------------------------------------
  main_content
---------------------------------------- */

.main_content {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}



/* ----------------------------------------
  section_content
---------------------------------------- */

@media screen and (min-width: 1024px) {
  .pc_reuse .section_content[class*="mw"] {
    width: auto;
  }
  .section_content.mw1220 {
    max-width: 1220px;
  }
  .section_content.mw1400 {
    max-width: 1400px;
  }
  .section_content.mw1540 {
    max-width: 1540px;
  }
}



/* ----------------------------------------
  text
---------------------------------------- */

.pc_reuse p + p,
.pc_reuse dl + p,
.pc_reuse h3 + p,
.pc_reuse h4 + p,
.pc_reuse h5 + p,
.pc_reuse h5 + dl {
  margin-top: 20px;
}



/* ----------------------------------------
  button
---------------------------------------- */

.pc_reuse .button {
  border-radius: 5px;
}

/* primary */
.pc_reuse .button.primary {
	background: #000;
}
.pc_reuse .button.primary:hover {
	background: #5a5a5a;
}

/* critical */
.pc_reuse .button.critical {
  background: #d7410b;
}
.pc_reuse .button.critical:hover {
  background: #c14018;
}



/* ----------------------------------------
  content_area
---------------------------------------- */

.pc_reuse .content_area {
  padding: 2rem 1.6rem;
}

@media screen and (min-width: 768px) {
  .pc_reuse .content_area {
    padding: 40px 20px;
  }
}

@media screen and (min-width: 1024px) {
  .pc_reuse .content_area {
    padding: 40px 20px;
  }
}
@media screen and (min-width: 1240px) {
  .pc_reuse .content_area {
    padding: 40px 0;
  }
}



/* ----------------------------------------
  color
---------------------------------------- */

.bgfff9e6 { background-color: #fff9e6 !important; }
.bgdef8e4 { background-color: #def8e4 !important; }
.bgf2f8de { background-color: #f2f8de !important; }
.bg0e9503 { background-color: #0e9503 !important; }
.bgebfdff { background-color: #ebfdff !important; }
.bgf0ffef { background-color: #f0ffef !important; }

.fc0e9503 {color: #0e9503 !important;}
.fc00d072 {color: #00d072 !important;}
.fc005762 {color: #005762 !important;}
.fcfbe047 {color: #fbe047 !important;}



/* ----------------------------------------
  link
---------------------------------------- */

a.underline {
  text-decoration: underline;
}
a.underline:hover {
  text-decoration: none;
}



/* ----------------------------------------
  box
---------------------------------------- */

.box {
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 1rem;
}
.box.line {
  border: 2px solid #0e9503;
}

@media screen and (min-width: 768px){
  .box {
    padding: 2rem;
  }
}



/* ----------------------------------------
  arrow
---------------------------------------- */

.arrow {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 2px;
  margin: 0px 0 5px 8px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform: rotate(-45deg);
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 11px;
  height: 2px;
  border-radius: 9999px;
  background-color: #ffffff;
  transform-origin: calc(100% - 0px) 50%;
}
.arrow::before {
  transform: rotate(45deg);
}
.arrow::after {
  transform: rotate(-45deg);
}



/* ----------------------------------------
  title
---------------------------------------- */

.title.h3 {
  border-bottom: 2px solid #000;
}

@media screen and (min-width: 1024px){
  .title.h3 {
    border-bottom: 2px solid #000;
    font-size: 23px!important;
    text-align: center;
    padding-bottom: 1rem;
    font-weight: normal;
  }
}





/* ==================================================
  main_ttl
================================================== */

@media screen and (max-width: 1023px) {
  .main_ttl img {
    width: 100%;
  }
}

@media screen and (min-width: 1240px) {
  .main_ttl {
    padding: 2rem 0;
  }
}





/* ==================================================
  local_navi
================================================== */

.local_navi {
  background-color: #ebfdff;
}
.local_navi a.form_link {
  background-color: #005762;
  color: #fff;
  border-radius: .5rem;
}

@media screen and (max-width: 1023px) {
  .local_navi_trigger {
    background: #005762;
    color: #fff;
  }
  .local_navi_trigger::before,
  .local_navi_level2_trigger::after {
    color: #fff;
  }
  /* ヘッダーの固定を解除 */
  .p_header.fixed {
    position: static;
  }
}

@media screen and (min-width: 1024px) {
  .local_navi {
    /* width: 1220px;*/
    display: flex;
    justify-content: end;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  .local_navi_menu_level1 {
    display: flex;
  }
  .local_navi_menu_level1 li {
    margin-left: 1.5rem;
  }
  .local_navi_fixed {
    position:static
  }
  .local_navi_menu a:hover {
    text-decoration: underline !important;
  }
  .local_navi a.form_link {
    padding: .5rem 1rem;
  }
}

@media screen and (min-width: 1240px) {
  .local_navi {
    width: 1220px;
  }
}





/* ==================================================
  about
================================================== */

#about {
  text-align: center;
}
#about .slider {
  display: none;
}
#about .slider.slick-initialized {
  display: block;
}





/* ==================================================
  買取価格
================================================== */

.price_list {
  width: 100%;
  overflow: hidden;
  border: 1px solid #ccc;
  border-bottom: 5px solid #e7e7e7;
  border-right: 5px solid #e8e8e8;
}
.price_list > div {
  border-bottom: 4px solid #ffffff;
}
.price_list .left {
  padding: 1rem;
}
.price_list .left.head {
  border-right: 1px solid #fff;
}
.price_list .right {
  margin-top: 0!important;
  border-bottom: 1px solid #ccc;
  padding: 2rem;
}

@media screen and (min-width: 1024px) {
  .price_list > div {
    display: flex;
    flex-wrap: wrap;
  }
  .price_list .left {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
    flex-grow: 1;
    padding: 2rem;
  }
  .price_list .right {
    width: 400px;
  }
  .price_list h4,.price_list p {
    font-size: 18px!important;
  }
}



/* ----------------------------------------
  modal - 各CPUの対象世代の見分け方
---------------------------------------- */

#modal_target_generation ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
}
#modal_target_generation ol li {
  position: relative;
  padding-left: 40px;
  line-height: 1.5em;
}
#modal_target_generation ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #005762;
  color: white;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top:0;
}





/* ==================================================
  flow
================================================== */

.flow .img_area {
  border-bottom: 1px solid #cccccc;
  padding: 1.5rem 0;
  background-color: #f5f5f5;
  border-radius: 1rem 1rem 0 0;
}
.flow .text_area {
  padding: 1.5rem;
}
.flow .text_area h3{
  color: #005762;
}
.flow .text_area .eco_point{
  background-color: #f0ffef;
    color: #0e9503;
    padding: 1rem;
    border-radius: .5rem;
    display: block;
    margin-top: 1rem;
    border: 1px solid #0e9503;
}



/* ----------------------------------------
  slick
---------------------------------------- */

.flow .slick-dots li button:hover:before,
.flow .slick-dots li button:focus:before,
.flow .slick-dots li.slick-active button:before {
  background: #005762;
}
.flow .slick-track {
  display: flex;
  padding-top: 3.5rem;
}
.flow .slick-slide {
  height: auto !important;
  border: 1px solid #ccc;
  border-radius: 1rem;
  margin: 0 15px;
  position: relative;

}
.flow .slick-slide::after {
  position: absolute;
  left: calc(50% - 25px);
  top: -35px;
  width: 50px;
  height: 50px;
  background-color: #005762;
  border-radius: 50%;
  color: #ffffff;
  padding-top: 13px;
}
.flow .slick-slide:nth-of-type(1):after {
  content: "01";
}
.flow .slick-slide:nth-of-type(2):after {
  content: "02";
}
.flow .slick-slide:nth-of-type(3):after {
  content: "03";
}
.flow .slick-slide:nth-of-type(4):after {
  content: "04";
}
.flow .slick-slide:nth-of-type(5):after {
  content: "05";
}
.flow .slick-slide:nth-of-type(6):after {
  content: "06";
}
.flow .slick-slide:nth-of-type(7):after {
  content: "07";
}
.flow .slick-slide img {
  width: auto;
}
.flow ul.slick-dots {
  left: 0;
}
.flow .slick-prev,
.flow .slick-next {
  transition: .2s;
  width: 30px;
  height: 30px;
  text-align: center;
  background: rgba(0,0,0,.4);
  border-radius: 50%;
  z-index: 1;
}
.flow .slick-prev {
  left: 0px;
}
.flow .slick-next {
  right: 0px;
}
.flow .slick-prev:hover,
.flow .slick-next:hover {
  background: rgba(0,0,0,.6);
}
.flow .slick-prev::before,
.flow .slick-next::before {
  display: inline-block;
  content: "\E90c";
  position: absolute;
  top: 0;
  font-family: HPIcons;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  opacity: 1;
}
.flow .slick-prev::before {
  transform: rotate(90deg);
  right: 8px;
}
.flow .slick-next::before {
  transform: rotate(270deg);
  left: 8px;
}

@media screen and (min-width: 1024px){
  .flow .slick-dotted.slick-slider {
    padding: 0 100px;
  }
  .flow .slick-prev {
    left: 10px;
  }
  .flow .slick-next {
    right: 10px;
  }
}





/* ==================================================
  link_button_area
================================================== */

.link_button_area {
  background-color: #0e9503;
  text-align: center;
}
.link_button_area .button {
  border-radius: 1rem;
}
.link_button_area a.button:hover,
.link_button_area a.button:focus{
  color: #0e9503!important;
  background-color: #f0ffef!important;
  opacity: 1!important;
}
.link_button_area a.button:hover span,
.link_button_area a.button:focus span,
.link_button_area a.button:hover span::before,
.link_button_area a.button:hover span::after,
.link_button_area a.button:focus span::before,
.link_button_area a.button:focus span::after{
  background-color: #0e9503!important;
}

@media screen and (min-width: 1024px) {
  .link_button_area .button {
    padding: 30px 250px;
  }
  .link_button_area .button {
    font-size: 25px!important;
  }
}





/* ==================================================
  よくあるお問い合わせ
================================================== */

.faq__list {
  counter-reset: num;
  margin-top: -15px;
}
.faq__list dt {
  position: relative;
  margin-top: 15px;
  padding-left: 45px;
}
.faq__list dt::before {
  counter-increment: num;
  content: "Q" counter(num) ".";
  position: absolute;
  left: 0;
}
.faq__list dd {
  margin-top: 5px;
  padding: 0 0 15px 45px;
  border-bottom: 1px solid #000;
}

@media screen and (min-width: 768px) {
  .content_area.faq h3.title{
    text-align: center;
  }
}



/* ----------------------------------------
  accordion
---------------------------------------- */

.acco_basic {
  border-top: none;
}
.acco_basic .acco_trigger:hover,
.acco_basic .acco_open {
  background: #fff;
}
.acco_basic .acco_trigger {
  padding: .8em 50px .8em 40px;
}



/* ----------------------------------------
  tab
---------------------------------------- */

#faq .tab_trigger {
  display: flex;
}
#faq .tab_trigger li {
  padding: 2rem;
  background-color: #f5f5f5;
  border-top: 2px solid #005762;
  border-right: 1px solid #005762;
  width: calc(100% / 3);
}
#faq .tab_trigger li a {
  color: #000;
}
#faq .tab_trigger li.tab_current {
  background-color: #005762;
}
#faq .tab_trigger li.tab_current a {
  color: #fff;
}
#faq .tab_content_area {
  border: 1px solid #ccc;
  border-radius: 0 0 1rem 1rem;
  background-color: #f5f5f5;
  border-top: 5px solid #005762;
}
#faq .acco_basic .acco_trigger {
  background-color: #f5f5f5;
}
#faq .acco_basic .acco_content,
#faq .acco_cyan .acco_content {
  background: #f5f5f5;
}





/* ==================================================
  お問い合わせ
================================================== */

.contact_head .image img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
.contact_bottom {
  background-color: #8edca2;
}
.contact_bottom > div:first-of-type {
  border-bottom: 1px solid #000;
}
.contact_head .message{
  color: #fff;
  background-color: #000;
}

@media screen and (min-width: 768px){
  .contact_head {
    position: relative;
    height: 254px;
    background-image: url(/content/dam/jp-ext-hp-com/jp/ja/ec/campaign/business/others/pc_reuse/images/sustainable_impact_w1240.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .contact_head .message{
    position: absolute;
    left: 50%;
    top: 5%;
    z-index: 2;
    background-color: transparent;
  }
  .contact_head .image{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .contact_bottom > div:first-of-type {
    border-right: 1px solid #000;
    border-bottom: none;
  }
}

@media screen and (min-width: 1024px){
  .contact_head {
    height: 396px;
  }
  .contact_head .message {
    left: 500px;
    top: 85px;
    text-align: center;
  }
  .contact h3 {
    font-size: 36px;
    font-weight: normal;
  }
  .contact h4 {
    font-size: 31px;
    font-weight: normal;
  }
}

@media screen and (min-width: 1240px){
  .contact_head {
    height: 422px;
  }
  .contact_head .message{
    left: 700px;
  }
}