@charset "utf-8";
/* CSS Document */

:root{
    --gap-lp: 30px;
    --arrow-icon: 0.5em;
  }
  .lp{
    font-size: 16px;
    line-height: 1.75;
  }
  .lp img{
    max-width: 100%;
  }
  .lp h1,.lp h2,.lp h3{
    line-height: 1.25;
    font-weight: 700;
  }
  .lp h1{
    font-size: 60px;
  }
  .lp h2:not(.p-products-all-item-product__name__text){
    margin-bottom: var(--gap-lp);
    font-size: 36px;
  }
  .lp h3{
    margin-bottom: var(--gap-lp);
    font-size: 30px;
  }
  .lp hr{
    border-color: #ccc;
  }
  .toggle-icon{
    margin-bottom: 0 !important;
    position: relative;
  }
  .toggle-icon label{
    display: block;
  }
  .toggle-icon:hover{
    opacity: 0.8;
  }
  .toggle-icon::after{
    position: absolute;
    top: calc(50% - var(--arrow-icon) / 2);
    right: 1em;
    width: var(--arrow-icon);
    height: var(--arrow-icon);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 0.1em solid;
    border-bottom: 0.1em solid;
    border-color: #004da1;
    content: '';
  }
  .toggle-target{
    height: 0;
    overflow: hidden;
  }
  .toggle-trigger{
    display: none;
  }
  .toggle-trigger:checked+.toggle-wrapper .toggle-target{
    height: auto;
  }
  .toggle-trigger:checked+.toggle-wrapper .toggle-icon::after{
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  @media screen and (max-width:1440px){
    :root{
      --gap-lp: 2.08vw;
    }
    .lp{
      font-size: 1.39vw;
    }
    .lp h1{
      font-size: 4.17vw;
    }
    .lp h2:not(.p-products-all-item-product__name__text){
      font-size: 2.5vw;
    }
    .lp h3{
      font-size: 2.08vw;
    }
  }
  @media screen and (max-width:767px){
    :root{
      --gap-lp: 4vw;
    }
    .lp .u-pc-width{
      padding: 0 4vw;
    }
    .lp{
      font-size: 3.2vw;
    }
    .lp h1{
      font-size: 8vw;
    }
    .lp h2:not(.p-products-all-item-product__name__text){
      font-size: 4.8vw;
    }
    .lp h3{
      font-size: 4vw;
    }
  }
  .kv{
    padding: 0 0 calc(var(--gap-lp) * 2) 0;
    overflow: hidden;
    background: #004da1 url(../images/kv-bg.webp?$staticlink$) no-repeat 50% 50%;
    background-size: contain;
    color: #fff;
  }
  .kv h1{
    margin: calc(var(--gap-lp) * 4) 0;
    text-align: center;
  }
  .kv h1 span{
    margin-top: var(--gap-lp);
    display: block;
    font-size: 48px;
  }
  .kv__nav{
    padding: var(--gap-lp);
    display: flex;
    gap: var(--gap-lp);
    background: #000;
  }
  .kv__nav-item{
    height: 100%;
    padding: var(--gap-lp);
    flex: 1;
    background: #333;
  }
  .kv__nav-item p{
    margin-bottom: var(--gap-lp);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
  }
  .kv__nav-item ul{
    font-size: 24px;
  }
  .kv__nav-item ul li::before{
    content: ">";
    margin-right: 0.5em;
  }
  .kv__nav-item ul li a{
    text-decoration: underline;
  }
  @media screen and (max-width:1440px){
    .kv{
      background-size: 120%;
    }
    .kv h1 span{
      font-size: 3.33vw;
    }
    .kv__nav-item p{
      font-size: 2.5vw;
    }
    .kv__nav-item ul{
      font-size: 1.67vw;
    }
  }
  @media screen and (max-width:767px){
    .kv{
      background: #004da1 url(../images/kv-bg-sp.webp?$staticlink$) no-repeat 50% 0;
      background-size: 100%;
    }
    .kv h1 span{
      font-size: 6.4vw;
    }
    .kv__nav{
      flex-direction: column;
    }
    .kv__nav-item p{
      font-size: 4.8vw;
    }
    .kv__nav-item ul{
      font-size: 3.2vw;
    }
    .kv__nav-item{
      width: 100%;
    }
  }
  
  .about{
    padding: calc(var(--gap-lp) * 2) 0;
  }
  .about__contents{
    display: flex;
    gap: var(--gap-lp);
    align-items: center;
  }
  .about__contents-text,.about__contents-image{
    flex: 1;
  }
  .about__contents-image{
    text-align: right;
  }
  .about__contents-image img{
    height: 100%;
  }
  @media screen and (max-width:767px){
    .about__contents{
      flex-direction: column;
    }
  }
  
  .pros-and-cons{
    padding: calc(var(--gap-lp) * 2) 0;
    background: #d9f1fb;
  }
  .pros-and-cons__contents{
    display: flex;
    gap: var(--gap-lp);
  }
  .pros-and-cons__pros{
    padding: var(--gap-lp);
    flex: 1;
    background: #00a2e6 url(../images/pros-bg.webp?$staticlink$) no-repeat calc(100% - var(--gap-lp)) var(--gap-lp);
    background-size: 42px;
    color: #fff;
  }
  .pros-and-cons__cons{
    padding: var(--gap-lp);
    flex: 1;
    background: #fff url(../images/cons-bg.webp?$staticlink$) no-repeat calc(100% - var(--gap-lp)) var(--gap-lp);
    background-size: 42px;
  }
  .pros-and-cons dl{
    padding: calc(var(--gap-lp) / 2) 0;
    font-size: 18px;
    border-top: 1px dotted #fff;
  }
  .pros-and-cons dl:last-child{
    border-bottom: 1px dotted #fff;
  }
  .pros-and-cons dd{
    padding-left: 1em;
  }
  .pros-and-cons__cons dl{
    border-color: #ccc;
  }
  .pros-and-cons__cons dl:last-child{
    border-color: #ccc;
  }
  .pros-and-cons__pros .toggle-icon::after{
    border-color: #fff;
  }
  @media screen and (max-width:1440px){
    .pros-and-cons dl{
      font-size: 1.39vw;
    }
    .pros-and-cons__pros{
      background-size: 2.92vw;
    }
    .pros-and-cons__cons{
      background-size: 2.92vw;
    }
  }
  @media screen and (max-width:767px){
    .pros-and-cons__contents{
      flex-direction: column;
    }
    .pros-and-cons__pros,.pros-and-cons__cons{
      background-size: 6vw;
    }
    .pros-and-cons dl{
      font-size: 3.2vw;
    }
  }
  
  /* ラインアップ */
  .lineup {
    padding: calc(var(--gap-lp) * 2) 0;
    background: #fff;
  }
  .lineup__category {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-top: 20px;
  }
  @media screen and (max-width: 767px) {
    .lineup__category {
      grid-template-columns: 1fr; /* 1列 */
      grid-template-rows: repeat(4, 1fr); /* 4行 */
    }
  }
  .category-link {
    border: 1px solid #ececec;
    box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, .1);
    color: #484848;
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.96px;
    line-height: 1.63;
    padding: 16px 0;
    text-align: center;
    transition: box-shadow .2s;
  }
  @media screen and (max-width: 767px) {
    .category-link {
      font-size: 16px;
    }
  }
  .category-link:hover {
    box-shadow: 0 0 4px 0 rgb(0 162 230 / 70%);
    transform: translateY(-2px);
  }


  /* おすすめBTOパソコン */
  .recommend{
    padding: calc(var(--gap-lp) * 2) 0;
    background: #eee;
  }
  .recommend__category{
    padding: 0 var(--gap-lp) var(--gap-lp) var(--gap-lp);
    background: #fff;
  }
  .recommend__category+.recommend__category{
    margin-top: calc(var(--gap-lp) * 2);
  }
  .recommend h3{
    height: calc(var(--gap-lp) * 4);
    margin: 0;
    display: flex;
    align-items: center;
  }
  .recommend__search-result{
    position: relative;
  }
  .recommend__search-result .u-pc-width{
    padding: 0;
  }
  
  .productMoreGrid .p-products-all-item__item:nth-child(n+5) {
    display: none;
  }
  .p-products-all-item-product__spec__item::after {
    display: none;
  }
  .productMoreButton{
    display: none;
  }
  .p-products-all-item{
    padding-bottom: 0;
    background: #fff;
  }
  @media screen and (min-width:768px){
    .productMoreGrid {
      display: flex;
      gap: var(--gap-lp);
      flex-wrap: wrap;
    }
    .productMoreGrid .p-products-all-item__item{
      width: calc((100% - var(--gap-lp) * 3) / 4);
    }
    .p-products-all-item__results.results-include{
      max-width: 100%;
    }
    .p-products-all-item-product{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .p-products-all-item__item + .p-products-all-item__item{
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .p-products-all-item-product__image, .p-products-all-item-product__image--soldout{
      width: 100%;
      aspect-ratio: 1/1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .p-products-all-item-product__name{
      margin-bottom: auto;
      word-break: break-all;
    }
    a.p-products-all-item-product__price--box{
      width: 100%;
      display: flex;
      align-items: baseline;
    }
    .p-products-all-item-product__spec__item {
      width: 9em;
    }
    .p-products-all-item-product__buttons{
      display: block;
    }
    .p-products-all-item-product__link--cart{
      display: none;
    }
    .p-products-all-item-product__shipment, .p-products-all-item-product__shipment--red{
      margin-left: 0;
      margin-right: 0.5em;
    }
  }
  @media screen and (min-width:768px) and (max-width:1440px){
    .p-products-all-item-product__name{
      font-size: 2.08vw;
    }
    .p-products-all-item-product__number{
      font-size: 2.22vw;
    }
    .p-products-all-item-product__shipment, .p-products-all-item-product__shipment--red{
      font-size: 0.97vw;
    }
    .p-products-all-item-product__price{
      font-size: 1.39vw;
    }
    .p-products-all-item__item{
      padding: 0;
    }
    .p-products-all-item-product__spec__item{
      padding-bottom: 0;
      display: block;
    }
    .p-products-all-item-product__spec__text{
      padding-top: 0;
      display: block;
    }
  }
  @media screen and (max-width:767px){
    .p-products-all-item-product__name__text{
      font-size: 4vw;
    }
    .p-products-all-item-product__spec__item{
      width: 9em;
      margin-right: 1em;
    }
    .p-products-all-item-product__link--cart{
      display: none;
    }
  }

  .recommend__link-more{
    margin-top: 1em;
    text-align: right;
  }
  .recommend hr{
    margin-top: calc(var(--gap-lp) * 2);
    border-color: #ccc;
  }
  .recommend__category-bg-parent{
    position: relative;
  }
  .recommend__category-bg{
    width: auto;
    max-height: calc(var(--gap-lp) * 6);
    position: absolute;
    top: calc(var(--gap-lp) * -1);
    right: 0;
  }
  
  .customize{
    padding: calc(var(--gap-lp) * 2) 0;
    background: #004da1;
    color: #fff;
  }
  .customize h2 span{
    margin-left: 1em;
    font-size: 80%;
    font-weight: 400;
  }
  .customize__contents{
    padding: var(--gap-lp);
    background: #000;
  }
  .customize__category{
    display: flex;
    gap: var(--gap-lp);
    flex-wrap: wrap;
  }
  .customize__category dl{
    width: calc((100% - var(--gap-lp)) / 2);
    padding: var(--gap-lp);
    display: block;
    background-color: #333;
  }
  .customize__category dl dt{
    margin-bottom: var(--gap-lp);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
  }
  .customize__category dl dd{
    width: 60%;
  }
  .customize__category--cpu{
    background: none;
    background-size: 50%;
    background-position: 130% calc(100% - var(--gap-lp));
  }
  .customize__category--gpu{
    background: none;
    background-size: 50%;
    background-position: 130% calc(100% - var(--gap-lp));
  }
  .customize__category--memory{
    background: none;
    background-size: 50%;
    background-position: 130% calc(100% - var(--gap-lp));
  }
  .customize__category--ssd{
    background: none;
    background-size: 50%;
    background-position: 130% calc(100% - var(--gap-lp));
  }
  .customize__category--cpu.loaded,
  .customize__category--gpu.loaded,
  .customize__category--memory.loaded,
  .customize__category--ssd.loaded {
    background-repeat: no-repeat;
  }
  .customize__example{
    text-align: center;
  }
  .customize__example p{
    margin-top: calc(var(--gap-lp) * 2);
    font-size: 30px;
  }
  .customize__example-item+.customize__example-item{
    margin-top: calc(var(--gap-lp) * 2);
  }
  .customize__example h3 span{
    line-height: 1.55;
  }
  .customize__example h3 span{
    padding: 0 0.5em;
    background: #fff;
    color: #000;
  }
  @media screen and (max-width:1440px){
    .customize__category dl dt{
      font-size: 2.08vw;
    }
    .customize__example p{
      font-size: 2.08vw;
    }
  }
  @media screen and (max-width:767px){
    .customize__category{
      flex-direction: column;
    }
    .customize__category dl{
      width: 100%;
    }
    .customize__category dl dt{
      font-size: 4vw;
    }
    .customize__category dl dd{
      width: 100%;
    }
    /* .customize__category--cpu{
      background: url(../images/cpu-bg.webp?$staticlink$) no-repeat 110% -10%;
      background-size: 25%;
    }
    .customize__category--gpu{
      background: url(../images/gpu-bg.webp?$staticlink$) no-repeat 110% -10%;
      background-size: 25%;
    }
    .customize__category--memory{
      background: url(../images/memory-bg.webp?$staticlink$) no-repeat 110% -10%;
      background-size: 25%;
    }
    .customize__category--ssd{
      background: url(../images/ssd-bg.webp?$staticlink$) no-repeat 110% -10%;
      background-size: 25%;
    } */

    .customize__category--cpu{
      background-position: 110% -10%;
      background-size: 25%;
    }
    .customize__category--gpu{
      background-position: 110% -10%;
      background-size: 25%;
    }
    .customize__category--memory{
      background-position: 110% -10%;
      background-size: 25%;
    }
    .customize__category--ssd{
      background-position: 110% -10%;
      background-size: 25%;
    }
    .customize__example p{
      font-size: 4vw;
    }
  }
  
  .qa{
    padding: calc(var(--gap-lp) * 2) 0;
  }
  .qa h3{
    margin: calc(var(--gap-lp) * 2) 0;
    color: #00a2e6;
  }
  .qa__list{
    padding: var(--gap-lp);
    background: #00a2e6;
    border-radius: var(--gap-lp);
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }
  .qa__list+.qa__list{
    margin-top: var(--gap-lp);
  }
  .qa__list-q{
    max-width: calc(100% - 90px * 2 - var(--gap-lp));
    padding-left: calc(90px + var(--gap-lp));
    background: url(../images/q.webp?$staticlink$) no-repeat 0 0;
  }
  .qa__list-q dt,.qa__list-a dt{
    margin-bottom: calc(var(--gap-lp) / 3);
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
  }
  .qa__list-q dd{
    padding: var(--gap-lp);
    display: inline-block;
    background: #e6edf6;
    border-radius: 0 var(--gap-lp) var(--gap-lp) var(--gap-lp);
    font-size: 18px;
  }
  .qa__list-a{
    max-width: calc(100% - 90px * 2 - var(--gap-lp));
    margin-top: var(--gap-lp);
    margin-left: auto;
    padding-right: calc(90px + var(--gap-lp));
    background: url(../images/a.webp?$staticlink$) no-repeat 100% 0;
  }
  .qa__list-a dd{
    height: calc(1em * 1.25 + var(--gap-lp) * 2);
    padding: var(--gap-lp);
    overflow: hidden;
    display: inline-block;
    background: #def0e0;
    border-radius: var(--gap-lp) 0 0 0;
    font-size: 18px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  }
  .qa__list input{
    display: none;
  }
  .qa__list label{
    display: flex;
    align-items: center;
    gap: 0.5em;
    position: absolute;
    bottom: var(--gap-lp);
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
  }
  .qa__list label::after{
    width: var(--arrow-icon);
    height: var(--arrow-icon);
    margin-top: -0.2em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #fff;
    content: '';
  }
  .qa__list input:checked+.qa__list-a dd{
    height: auto;
    border-radius: var(--gap-lp) 0 var(--gap-lp) var(--gap-lp);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .qa__list input:checked+.qa__list-a+label{
    display: none;
  }
  @media screen and (max-width:1440px){
    .qa__list-q dt,.qa__list-a dt{
      font-size: 2.08vw;
    }
    .qa__list-q dd,.qa__list-a dd{
      font-size: 1.39vw;
    }
    .qa__list-q{
      max-width: calc(100% - 6.25vw * 2 - var(--gap-lp));
      padding-left: calc(6.25vw + var(--gap-lp));
      background-size: 6.25vw;
    }
    .qa__list-a{
      max-width: calc(100% - 6.25vw * 2 - var(--gap-lp));
      padding-right: calc(6.25vw + var(--gap-lp));
      background-size: 6.25vw;
    }
  }
  @media screen and (max-width:767px){
    .qa__list-q dt,.qa__list-a dt{
      font-size: 4vw;
    }
    .qa__list-q dd,.qa__list-a dd{
      font-size: 3.2vw;
    }
    .qa__list-q{
      max-width: 100%;
      padding-left: calc(12vw + var(--gap-lp));
      background-size: 12vw;
    }
    .qa__list-a{
      max-width: 100%;
      padding-right: calc(12vw + var(--gap-lp));
      background-size: 12vw;
    }
  }
  
  .review dl{
    padding: var(--gap-lp);
    display: inline-block;
    background: #d9f1fb;
    border-radius: 0 var(--gap-lp) var(--gap-lp) var(--gap-lp);
  }
  .review dl+dl{
    margin-top: var(--gap-lp);
  }
  .review dt{
    margin-bottom: var(--gap-lp);
    font-size: 24px;
    font-weight: 700;
  }
  .review dd{
    font-size: 18px;
  }
  @media screen and (max-width:1440px){
    .review dt{
      font-size: 2.08vw;
    }
    .review dd{
      font-size: 1.39vw;
    }
  }
  @media screen and (max-width:767px){
    .review dt{
      font-size: 4vw;
    }
    .review dd{
      font-size: 3.2vw;
    }
  }
  
  .howto-order p{
    margin-top: 1em;
  }
  
  .review .toggle-wrapper,.howto-order .toggle-wrapper,.support .toggle-wrapper{
    margin:calc(var(--gap-lp) * 2) 0;
  }
  .review .toggle-trigger:checked+.toggle-wrapper .toggle-target,.howto-order .toggle-trigger:checked+.toggle-wrapper .toggle-target,.support .toggle-trigger:checked+.toggle-wrapper .toggle-target{
    margin-top:calc(var(--gap-lp) * 2);
  }