@charset "utf-8";

/*-------------------------------------
　基本設定
---------------------------------------*/
.pc-btm-area__section{
  width:100%;
  text-align:center;
  display:block;
  position:relative;
  padding:60px 0;
}
.pc-btm-area__section.sec-gray{
  background:#f6f6f6;
}
.pc-btm-area__inner{
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
  text-align:left;
}


@media screen and (max-width: 767px){
  .pc-btm-area__section{
    padding:30px 0;
  }
}

/*-------------------
 タイトル
---------------------*/
.pc-btm-area__title{
  margin-bottom: 30px;
  text-align: left;
  line-height: 1.2;
}

.pc-btm-area__title .l-title{
  margin-bottom: 10px;
  font-size: 30px;
  color: #001e60;
  line-height: 1;
  font-weight: 700;
  letter-spacing: calc((60 * 1em) / 1000);
}

.pc-btm-area__title h2{
  position:relative;
  display:inline-block;
  font-size: clamp(18px, 1.08rem + 0.23vw, 20px);
  color: #001e60;
  font-weight: 700;
  letter-spacing: calc((60 * 1em) / 1000);
  width:fit-content;
}

.pc-btm-area__title h2 small{
  font-size: clamp(14px, 0.784rem + 0.45vw, 18px);
  width:fit-content;
}

.pc-btm-area__title h2 a:hover{
  text-decoration: underline;
}

.pc-btm-area__title h2 a::after{
  position:relative;
  display:inline-block;
  margin-left:0.5em;
  content:'';
  width:1em;
  height:1em;
  background: url(../images/gamingnote-pc/icon-arrow-open.webp) no-repeat 50% 50% / cover;
}

.pc-btm-area__title h2 + p{
  margin-top:10px;
}

.pc-btm-area__title .lead{
  font-weight:700;
}

@media screen and (max-width: 767px) {
  .pc-btm-area__title .l-title{
    font-size: 28px;
  }
  .pc-btm-area__title .lead{
    font-size:12px;
  }
}

/*-------------------------------------
　FAQ
---------------------------------------*/
.faq-wrap{
  border-top:2px dotted #cacaca;
}
.faq-menu{
  width:100%;
}
.faq-menu{
  border-bottom:2px dotted #cacaca;
}
.faq-menu summary{
  position:relative;
  padding:15px 0;
  display:flex;
  align-items: center;
  cursor:pointer;
}
.faq-menu summary::before{
  position: absolute;
  content: '';
  width: 14px;
  height: 2px;
  top: calc(50% - 1px);
  right: 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #6d6d6d;
}
.faq-menu summary::after {
  position: absolute;
  content: '';
  width: 2px;
  height: 14px;
  top: calc(50% - 7px);
  right: 20px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: #6d6d6d;
}

.faq-wrap details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}
.faq-menu summary .faq-num{
  width:50px;
  color:#484848;
  font-weight:bold;
  font-size:24px;
}
.faq-menu summary p{
  width:calc(100% - 80px);
  font-weight:700;
  line-height:1.4;
}

.faq-content{
  background:#f6f6f6;
  border-radius: 20px;
  padding:20px;
  margin-bottom:30px;
}
.faq-content p{
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  font-weight:400;
  line-height:1.6;
}

.faq-table caption{
  font-weight:700;
  margin-bottom:10px;
  color:#2f9494;
}
.faq-table{
  margin:20px;
  width:calc(100% - 40px);
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px);
  font-weight: 400;
  line-height: 1.6;
}
.faq-table th{
  padding:10px;
  border:1px solid #ccc;
  background:var(--color-green);
  width:30%;
  text-align:center;
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px)!important;
  font-weight: 400;
  line-height: 1.6;
}
.faq-table td{
  padding:10px;
  border:1px solid #ccc;
  background:#fff;
  font-weight:400;
  width:70%;
  font-size: clamp(12px, 0.659rem + 0.45vw, 16px)!important;
  font-weight: 400;
  line-height: 1.6;
}


@media screen and (max-width:767px){
  .faq-content{
    padding:15px 10px;
    margin-bottom:20px;
  }
  .faq-menu summary{
    padding:20px 10px;
  }
  .faq-menu summary::before{
    right: 4px;
  }
  .faq-menu summary::after {
    right: 10px;
  }
  .faq-menu summary .icon{
    width:40px;
  }
  .faq-menu summary p{
    width:calc(100% - 70px);
    font-size:13px;
  }
}

/*-------------------------------------
　購入者様レビュー
---------------------------------------*/

.user-review-wrap{
  width:100%;
  display:flex;
  gap:30px;
  flex-wrap:wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.user-review-wrap ul{
  width:calc(50% - 15px);
  display:flex;
  gap:20px;
  flex-direction: column;
}
.user-review-wrap li{
  position:relative;
  width:100%;
  background:#fff;
  border-radius: 20px;
  padding:20px;
}
.user-review-wrap .review-user{
  position:relative;
  padding-left:50px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.user-review-wrap .review-user::before{
  position:absolute;
  content:'';
  top:0;
  left:0;
  width:40px;
  height:40px;
  background: url(../images/gamingnote-pc/icon-review-user.svg) no-repeat 50% 50% / cover;
}

.user-review-wrap .review-model{
  width:100%;
  font-weight:700;
}
.user-review-wrap .review-purchaser{
  width:50%;
}
.user-review-wrap .review-content{
  position:relative;
  padding-top:20px;
  width:100%;
  background:#f6f6f6;
  padding:20px;
  border-radius: 20px;
  line-height:1.7;
  weight 500;
  font-size:16px;
}
.user-review-wrap .review-content::before{
  position:absolute;
  content:'';
  top:-19px;
  left:20px;
  width:20px;
  height:20px;
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
  background-color: #f6f6f6;
}

@media screen and (max-width: 767px){
  .user-review-wrap{
    flex-direction: column;
    gap: 0;
    width: calc(100% + 30px);
    margin-left: -15px;
  }
  .user-review-wrap ul{
    width:100%;
    gap:0;
  }
  .user-review-wrap li{
    border-radius: 0;
  }
  .user-review-wrap .review-purchaser {
    font-size: 12px;
  }
  .user-review-wrap .review-content{
    font-size:14px;
  }
}
/*-------------------------------------
　スタッフレビュー
---------------------------------------*/

#staff-start-content .pc-btm-area__inner{
  width:100%;
  max-width:1140px;
}

#staff-start-content.pc-btm-area__section {
  margin: 0 auto;
}
.staff-reviews-list-wrapper,
.staff-reviews-products-list-wrapper {
  background: #fff;
}
.staff-review-itemname {
  margin-bottom: 1rem;
}

#staff-reviews .c-button--secondaryB-white {
  border-color: #a3a3a3;
  color: #484848;
  border-radius: 25px;
}