@charset "UTF-8";

/* KV */
.pc-all__kv {
  background: #fff url(../../general-desk/images/bg-kv.webp) no-repeat top left / cover;
}
.pc-all__kv .kv-title {
  width: 100%;
  margin: auto;
  text-align: left;
  display: block;
  gap: 0;
}
.pc-all__kv .kv-txt {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1em;
  text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.6);
}
@media screen and (max-width: 767px) {
  .pc-all__kv .kv-title {
    padding: 0 1em;
  }
  .pc-all__kv .kv-txt {
  flex-direction: column;
  gap: 0.2em;
  }
}

/* キーワード */
@media screen and (max-width: 767px) {
  .p-all-model__pickup-keyword {
      padding-top: 1em;
      flex-wrap: nowrap;
  }
  .p-all-model__pickup-keyword::before {
    width: auto;
    white-space: nowrap;
  }
  .p-all-model__pickup-keyword a {
      white-space: nowrap;
  }
  .section-inner-sp {
    overflow-x: auto;
    position: relative;
  }
}

/* ブランドから選ぶ */
.select-from-brand__list-top img.logo {
  width: 50%;
}
.select-from-brand__list-top img.bland {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .select-from-brand__list-top img.logo {
    width: 70%;
  }
}

/* スペックから選ぶ */
.select-from-spec-wrap2 {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.select-from-spec-wrap2 ul {
  width: 80%;
  display: grid;
  gap: var(--section-sub-gap);
  grid-template-columns: repeat(3, 1fr);
}
.select-from-spec-wrap2 ul .c-button--primary-white {
  width: 100%;
  font-weight: 500;
  font-size: clamp(14px, 0.784rem + 0.45vw, 18px);
  border-color: #a3a3a3;
  border-radius: 8px;
  display: flex;
  color: #004da1;
}
.select-from-spec__list-top {
  margin-top: 0;
}
.select-from-spec__list-top>li summary {
  display: block;
  width: 100%;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
}

.select-from-spec-wrap2 .accordion-button {
  width: 100%;
}
.select-from-spec__list-top details ul {
  display: block;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 5;
  width: 100%;
  transition: all 0.3s;
  opacity: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
  background:#fff;
}
.select-from-spec__list-top .c-button--primary-white {
  width: 100%;
  font-size: clamp(14px, 0.739rem + 0.68vw, 20px);
  border-color: #a3a3a3;
  border-radius: 8px;
  display:flex;
}
.select-from-spec__list-top details[open] ul {
  opacity: 1;
}
.select-from-spec__list-top ul li .c-button--primary-white {
  width: 100%;
  color: #001e60;
  font-size: clamp(14px, 0.739rem + 0.68vw, 20px);
  border-radius: 0;
  display:flex;
  justify-content: flex-start;
  padding-left: 1em;
  font-weight: 500;
}
.select-from-spec__list-top details[open] ul li .c-button--primary-white{
  border: none;
  border-radius: 0;
}
.select-from-spec__list-top details[open] ul li:nth-child(even) .c-button--primary-white {
  background: #f6f6f6;
}
.select-from-spec__list-top .c-button--primary-white::after{
  border-color:#a3a3a3;
}
.select-from-spec__list-top details summary.c-button--primary-white::after{
  transform: rotate(45deg);
  transition: 0.3s all;
}
.select-from-spec__list-top details[open] summary.c-button--primary-white::after{
  transform: rotate(-135deg);
}

@media screen and (max-width: 767px) {
  .select-from-spec-wrap2 {
    flex-direction: column;
    gap: 10px;
  }
  .select-from-spec-wrap2 ul {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }
  .select-from-spec__list-top .c-button--primary-white::after{
    right: 10px;
  }
}

/* 通販スタッフおすすめ・ランキング */
/* .reccomend-ranking input[type="radio"] {
  display: none;
}
.ranking-block{
  width:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:1em;
  width:100%;
  flex-wrap: wrap;
}
.tab-ranking-label {
  width: calc((100% - 2em) / 3);
  display: block;
  padding: 1em;
  color:#484848;
  cursor: pointer;
  font-weight:700;
  text-align:center;
  border-radius: 1em;
  background: #fff;
  position: relative;
}
#ranking-tab-01:checked + label,
#ranking-tab-02:checked + label,
#ranking-tab-03:checked + label {
  background: #666;
  color: #fff;
}
#ranking-tab-01:checked + label::after,
#ranking-tab-02:checked + label::after,
#ranking-tab-03:checked + label::after{
  content: '';
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
  width: 20px;
  height: 10px;
  background: #666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tab-ranking-content {
  width:100%;
  display: none;
}
#ranking-tab-01:checked ~ .ranking-content1,
#ranking-tab-02:checked ~ .ranking-content2,
#ranking-tab-03:checked ~ .ranking-content3 {
  display: block;
}
.recommend-tab-category {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .tab-ranking-label {
    width: calc((100% - 3em) / 3);
    font-size: 70%;
  }
  .hd-catch::before {
    left: 2px;
  }
} */

.reccomend-ranking input[type="radio"] {
  display: none;
}
.ranking-block{
  width:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  gap:0.2em;
  width:100%;
  flex-wrap: wrap;
}
.tab-ranking-label {
  width: calc((100% - 0.4em) / 3);
  display: block;
  padding: 1em;
  color:#666;
  cursor: pointer;
  font-weight:normal;
  text-align:center;
  border-radius: 1.5em 1.5em 0 0;
  background: #ddd;
  position: relative;
}
#ranking-tab-01:checked + label,
#ranking-tab-02:checked + label,
#ranking-tab-03:checked + label {
  background: #f1fafe;
  color: #00a2e6;
  font-weight: 700;
  font-size: 1.1em;
  padding: 1em 1em 0.8em;
}
#ranking-tab-01:checked + label::after,
#ranking-tab-02:checked + label::after,
#ranking-tab-03:checked + label::after{
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #f1fafe;
  clip-path: none;
}
.tab-ranking-content {
  width:100%;
  display: none;
}
#ranking-tab-01:checked ~ .ranking-content1,
#ranking-tab-02:checked ~ .ranking-content2,
#ranking-tab-03:checked ~ .ranking-content3 {
  display: block;
  background: #f1fafe;
  padding: 1em 1em 2em;
  border-radius: 0 0 1.5em 1.5em;
}
.recommend-tab-category {
  margin-top: 10px;
}

@media screen and (max-width: 767px) {
  .tab-ranking-label {
    width: calc((100% - 0.6em) / 3);
    font-size: 70%;
  }
  #ranking-tab-01:checked + label,
  #ranking-tab-02:checked + label,
  #ranking-tab-03:checked + label {
    font-size: 70%;
    padding: 1em 0.5em;
  }
  .hd-catch::before {
    left: 2px;
  }
  .recommend-tab-category {
    margin-top: 0px;
  }
}

/* ノートパソコンの選び方ガイド */
.p-all-pc__recommend-title-select {
  font-weight: 700;
  font-size: clamp(16px, 0.682rem + 1.59vw, 30px);
  text-align: left;
  margin-bottom: 30px;
}
.select-wrapper {
  position: relative;
  margin-bottom: 2em;
}
.select-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 190px;
  background-color: #d6dce5;
  z-index: -1;
}

.select-wrapper .select-title {
  background: url(../note-all/select-point-main-pc.webp?$staticlink$260416-01) no-repeat center bottom / contain;    
  aspect-ratio: 1140 / 350;
  position: relative;
}
.select-wrapper .select-title .select-txt {
  position: absolute;
  top: 50%;
}
@media screen and (max-width: 890px) {
  .select-wrapper .select-title .select-txt {
    top: 40%;
  }
}
@media screen and (max-width: 767px) {
  .select-wrapper .select-title {
    background: url(../note-all/select-point-main-sp.webp?$staticlink$) no-repeat center bottom / contain;    
    aspect-ratio: 4 / 5;
  }
  .select-wrapper .select-title .select-txt {
    top: 3em;
  }
}
@media screen and (max-width: 478px) {
  .select-wrapper .select-title .select-txt {
    top: 1em;
  }
}
.txt-lead {
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .section-wrapper {
    overflow-x: auto;
  }
  .section-wrapper .point-size {
    width: 800px;
  }
}

.pc-contents-section {
  padding: 2em 0;
}
.select-inner {
  display: flex;
  gap: 2em;
}
.select-contents-inner + .select-contents-inner {
  margin-top: 2em;
}
.select-inner .select-contents-inner,
.select-inner .select-contents-wrapper {
  width: 100%;
}
.select-inner .select-contents-title {
  width: 160px;
  background: #ebecee;
  border-radius: 1em;
  padding: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.select-inner .select-contents-li {
  display: flex;
}
.select-inner .select-contents-li .steps {
  position: relative;
  flex: 1;
  padding-top: 2em;
}

.select-inner .select-contents-li .steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2em;
  background: #c8efff;
}

.select-inner .select-contents-li .label {
  position: absolute;
  top: 0;
  left: 50%;
  height: 2em;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
}
.select-inner .select-contents-li .step-ai .label {
  left: 0%;
}
.select-inner .select-contents-li .step-left::before {
  background: #ddd;
  clip-path: polygon(
    0 50%,
    8% 0,
    100% 0,
    100% 100%,
    8% 100%
  );
}
.select-inner .select-contents-li .step-center::before {
  background: #bbb;
  clip-path: none;
}
.select-inner .select-contents-li .step-right::before {
  background: #999;
  clip-path: polygon(
    0 0,
    92% 0,
    100% 50%,
    92% 100%,
    0 100%
  );
}

.select-inner .select-contents-li .step-right .label {
  color: #fff;
}
.select-inner .select-contents-li .step-left .label,
.select-inner .select-contents-li .step-intel-right .label,
.select-inner .select-contents-li .step-amd-right .label {
  color: #484848;
}

.select-inner .select-contents-li .step-intel-left::before {
  background: #d1f2ff;
  clip-path: none;
}
.select-inner .select-contents-li .step-intel-center::before {
  background: #bdecff;
  clip-path: none;
}
.select-inner .select-contents-li .step-intel-right::before {
  background: #9cd4eb;
  clip-path: none;
}

.select-inner .select-contents-li .step-amd-left::before {
  background: #ffe7d1;
  clip-path: none;
}
.select-inner .select-contents-li .step-amd-center::before {
  background: #ffdbb9;
  clip-path: none;
}
.select-inner .select-contents-li .step-amd-right::before {
  background: #f5c79d;
  clip-path: none;
}


.select-contents-li-inner {
  padding: 1em 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  height: 100%;
}

.select-contents-li-ttl {
  text-align: center;
  font-weight: 600;
}
.select-contents-li-link {
  margin-top: auto;
}

.feature-li-ttl {
  font-weight: 600;
}

.select-inner .select-contents-li-column {
  display: flex;
  align-items: center;
  gap: 2em;
}
.select-inner .select-contents-li-column .hd-image {
  width: 30%;
}
.select-inner .select-contents-li-column .hd-text {
  width: calc( 70% - 2em);
}

.select-inner .select-contents-li-column .column2 {
  display: flex;
  align-items: center;
  gap: 1em;
}
.select-inner .select-contents-li-column .column2 .hd-image {
  width: 40%;
}
.select-inner .select-contents-li-column .column2 .hd-text {
  width: calc( 60% - 1em);
  padding: 1em;
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 1em;
}

.section-wrapper .icon-size {
  margin-top: 0;
}

.select-contents-li-ttl-blue,
.select-contents-li-ttl-red {
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 1em;
}
.select-contents-info-ttl {
  font-weight: 600;
}
.select-contents-info-txt {
  width: 100%;
  margin-bottom: 1em;
}
.select-contents-li-ttl-blue {
  color: #004da1;
}
.select-contents-li-ttl-red {
  color: #ce1818;
}

@media screen and (max-width: 767px) {
  .select-inner {
    display: block;
  }
  
  .select-inner .select-contents-title {
    width: 100%;
    margin-bottom: 1em;
    padding: 0.5em;
    flex-direction: row-reverse;
    align-items: center;
  }
  .feature-li-ttl {
    width: calc( 100% - 70px);
    font-size: 16px;
    text-align: left;
  }
  .no-contents {
    width: 100%;
    padding: 1em;
  }
  .section-wrapper .icon-size {
    width: 50px;
    height: auto;
  }
  .select-inner .select-contents-inner {
    overflow-x: auto;
  }
  .select-inner .select-contents-li {
    width: 740px;
  }

  .select-contents-li-inner {
    padding: 1em 1.3em;
  }

  .select-inner .select-contents-li-column {
    flex-direction: column;
    gap: 1.5em;
  }
  .select-inner .select-contents-li-column .hd-image {
    width: 60%;
  }
  .select-inner .select-contents-li-column .hd-text {
    width: 100%;
    margin-left: 0;
  }

  .select-inner .select-contents-li-column .column2 .hd-text {
    padding:0;
    align-items: flex-start;
    gap: 0.5em;
  }
  .select-contents-li-ttl-blue {
    margin-top: 0;
  }
}