@charset "utf-8";

html{
  scroll-behavior: smooth;
}

:root {
  --gap-l: clamp(40px, 1.591rem + 4.55vw, 80px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-ss: clamp(5px, 0.199rem + 0.57vw, 10px);

  --font-ss:clamp(10px, 0.534rem + 0.45vw, 14px);
  --font-s:clamp(12px, 0.659rem + 0.45vw, 16px);
  --font-m:clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-ml:clamp(16px, 0.818rem + 0.91vw, 24px);
  --font-l:clamp(18px, 0.898rem + 1.14vw, 28px);
  --font-ll:clamp(20px, 0.795rem + 2.27vw, 40px);

  --color-blue: #004da1;
  --color-l-blue: #00a2e6;
  --color-gray: #ccc;
  --color-bg-gray: #f6f6f6;
  --color-bg-blue: #e2f5fb;
}

.cts_bto{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
  line-height:1.2;
}
.cts_bto img{
  width:100%;
  object-fit: contain;
}
.cts_bto .c-button{
  width:100%;
}

/*--------------------------------
ページトップボタン
--------------------------------*/
#pagetop {
  opacity: 1;
  position: fixed;
  bottom: 30px;
  right: 55px;
  transition: opacity .5s;
  z-index: 2;
}

#pagetop a {
  background-color: rgba(51, 51, 51, .8);
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 1.5em;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #pagetop {
    right: 10px;
    bottom: 10px;
  }
}

/*--------------------------------
レイアウト
--------------------------------*/
.sec-contents{
  position:relative;
  padding:var(--gap-l) 0;
  margin:0;
  text-align:center;
  width:100%;
  overflow: hidden;
}
.sec-contents:nth-child(even){
  background:var(--color-bg-gray);
}
.sec-contents section + section{
  margin-top:var(--gap-m) ;
  padding-top:var(--gap-m) ;
  border-top:1px dashed #ccc;
}

.contents-inner{
  position:relative;
  padding:0;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
  text-align:left;
}

.-bg-gray{
 background:var(--color-bg-gray);
}

/*--------------------------------
KV
--------------------------------*/
.kv-wrap{
  background: var(--color-l-blue) url(../images/kv-bg-pc.webp) no-repeat top center / cover;
  padding:var(--gap-l);
}
.kv-wrap h1{
  text-align:center;
  font-size:var(--font-l);
  font-weight:700;
  -webkit-text-fill-color: #fff;
  paint-order: stroke fill;
  -webkit-text-stroke: 10px var(--color-l-blue);
  letter-spacing:0.1em;
}
.kv-wrap h1 strong{
  display:block;
  font-size:clamp(24px, 0.955rem + 2.73vw, 48px);
}

@media screen and (max-width: 767px) {
  .kv-wrap{
    background: var(--color-l-blue) url(../images/kv-bg-sp.webp) no-repeat top center / cover;
  }
}

/*--------------------------------
公開日・更新日
date-wrap
--------------------------------*/
.date-wrap{
  padding:var(--gap-s) 0;
}
.date-wrap p{
  font-size:var(--font-s);
  white-space:nowrap;
  width:fit-content;
}
.date-wrap .contents-inner{
  display:flex;
  justify-content: space-between;
  gap:10px;
}
.date-wrap .date-contents{
  display:flex;
  align-items: center;
}
.date-wrap .date-contents p:first-child:after{
  content:'　|　';
}

@media screen and (max-width: 767px) {
  .date-wrap .contents-inner{
    flex-direction: column;
  }
}

/*--------------------------------
もくじ
date-wrap
--------------------------------*/
.index-wrap{
  padding:var(--gap-m) 0;
}
.index-wrap .ttl{
  font-size:var(--font-m);
  font-weight:700;
  margin-bottom:var(--gap-s);
  text-align:center;
}
.index-list {
  width:100%;
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:var(--gap-s);
  font-size:var(--font-s);
}
.index-list a{
  display:block;
  position:relative;
  padding:0.5em 1em 0.5em 2.3em;
  color:var(--color-l-blue);
  background:#fff;
  border-radius:var(--gap-s);
  width:100%;
}

.index-list a::before{
  position:absolute;
  top:0.8em;
  left:1em;
  content:'';
  width:0.8em;
  height:0.696em;
  background:var(--color-l-blue);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.index-list a:hover{
  cursor: pointer;
  outline: 1px solid rgba(0, 162, 230, 0.5);
  filter: drop-shadow(5px 5px 5px rgba(0, 162, 230, 0.1));
}

@media screen and (max-width: 767px) {
  .index-list {
    grid-template-columns: repeat(1,1fr);
  }
}

/*--------------------------------
共通テキスト
--------------------------------*/
.sec-ttl{
  position:relative;
  font-size:var(--font-ll);
  font-weight:700;
  margin-bottom:var(--gap-s);
  letter-spacing:0.05em;
  padding-left:1.2em;
}
.sec-ttl::before{
  position:absolute;
  content:'';
  top:0.25em;
  left:0;
  width:0.8em;
  height:0.8em;
  border-radius:50%;
  border:8px solid var(--color-l-blue);
}
@media screen and (max-width: 767px) {
  .sec-ttl::before{
    border:4px solid var(--color-l-blue);
  }
}

.lead-txt{
  font-size:var(--font-m);
  margin-bottom:var(--gap-m);
  line-height:1.6;
}
.lead-txt + .lead-txt{
  margin-top:calc(var(--gap-s) * -1);
}
.sec-sub-ttl{
  font-size:var(--font-l);
  font-weight:700;
  color:var(--color-blue);
  letter-spacing:0.05em;
  margin-bottom:var(--gap-s);
}
.sec-sub-wrap{
  width:100%;
  display:flex;
  gap:var(--gap-m);
  align-items: center;
}
.sec-sub-wrap .sec-sub-img{
  width:30%;
  border-radius: 5px;
  overflow: hidden;
}
.sec-sub-wrap .sec-sub-txt{
  flex:1;
  display:flex;
  gap:var(--gap-ss);
  flex-direction: column;
}
.sec-sub-wrap .sec-sub-txt p{
  font-size:var(--font-m);
  line-height:1.6;
}

@media screen and (max-width: 767px) {
  .sec-sub-wrap{
    flex-direction: column;
  }
  .sec-sub-wrap .sec-sub-img{
    width:60%;
    margin:auto;
  }
}

.sec-sub-wrap .sec-sub-txt p.note,
.note{
  font-size:var(--font-ss);
}

/*もっと詳しく*/
.more-link{
  position:relative;
  font-size:var(--font-m);
  margin-top:var(--gap-s);
  line-height:1;
  font-weight:500;
  width:100%;
}
.more-link + .more-link{
  margin-top:calc(var(--gap-s) / 2);
}

.more-link a{
  display:block;
  position:relative;
  padding:0.5em 0 0.5em 140px;
  background: #fff;
  border-radius: 5px;
  width:100%;
}
.more-link a:hover{
  cursor: pointer;
  outline: 1px solid rgba(0, 162, 230, 0.5);
  filter: drop-shadow(5px 5px 5px rgba(0, 162, 230, 0.1));
}
.more-link a > span{
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-right: 1.2em;
}
.more-link a > span::after{
  position:absolute;
  content:'';
  top:calc(50% - 0.4em);
  right:0;
  width:0.696em;
  height:0.8em;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  background:var(--color-l-blue);
}
.more-link::before{
  display:flex;
  justify-content: center;
  align-items: center;
  position:absolute;
  top:0;
  left:0;
  content:'もっと詳しく';
  font-size:var(--font-s);
  background:var(--color-l-blue);
  text-align:center;
  width:120px;
  height:100%;
  color:#fff;
  border-radius:5px;
  z-index:1;
}
.more-link::after{
  position:absolute;
  top:calc(50% - 5px);
  left:119px;
  content:'';
  width:10px;
  height:10px;
  background:var(--color-l-blue);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  z-index:1;
}
.more-link + p{
  margin-top:var(--gap-s);
}
@media screen and (max-width: 767px) {
  .more-link{
    line-height:1.6;
  }
  .more-link::before {
    white-space: pre;
    content:'もっと\A詳しく';
    width: 50px;
    line-height:1.2;
  }
  .more-link::after{
    left: 49px;
  }
  .more-link a{
    padding: 0.5em 0.5em 0.5em 65px;
    width:100%;
  }
  .more-link a > span{
    width: 100%;
  }
}

/*--------------------------------
BTOとは？
sec-about
--------------------------------*/
.about-list{
  width:100%;
  display:flex;
  gap:var(--gap-m);
  align-items:center;
  justify-content:center;
}
.about-list li{
  flex:1;
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
}
.about-list li img{
  border:1px solid #666;
  border-radius:10px;
  overflow: hidden;
}
.about-list li p{
  font-size:var(--font-s);
  font-weight:500;
  text-align:center;
}

@media screen and (max-width: 767px) {
  .about-list{
    flex-direction: column;
  }
}

/*--------------------------------
BTOパソコンのメリット
sec-merit
--------------------------------*/

/*--------------------------------
ドスパラのBTOパソコンが選ばれる理由
sec-reason
--------------------------------*/
.sec-sub-img.-partner{
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
}

.cts_bto .sec-sub-img.-partner img{
  width:auto;
  height: 80px;
  margin:auto;
}
@media screen and (max-width: 767px) {
  .cts_bto .sec-sub-img.-partner img{
    height: 60px;
  }
}


/*--------------------------------
BTOパソコンのラインアップ
sec-lineup
--------------------------------*/
.lineup-list{
  width:100%;
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(4,1fr);
}
.lineup-list li a{
  width:100%;
  background:#fff;
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
  overflow: hidden;
  padding:var(--gap-s) 0;
}
.lineup-list li a:hover {
  cursor: pointer;
  outline: 1px solid rgba(0, 162, 230, 0.5);
  filter: drop-shadow(5px 5px 5px rgba(0, 162, 230, 0.1));
}
.cts_bto .lineup-list li a img{
  width:60%;
  margin:auto;
}
.lineup-list li p{
  margin:auto;
  position: relative;
  font-size:var(--font-s);
  font-weight:500;
  width:fit-content;
  padding-right:14px;
}
.lineup-list li p::after{
  position: absolute;
  top: calc(50% - 3px);
  right: 0;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #484848;
  content: '';
}

@media screen and (max-width: 767px) {
  .lineup-list{
    grid-template-columns: repeat(2,1fr);
  }
}

/*--------------------------------
BTOパソコンの基本構成と選び方
sec-composition
--------------------------------*/

.item-head{
  font-size:var(--font-m);
  font-weight:700;
  text-align:center;
  margin-bottom:var(--gap-s);
}

@media screen and (max-width: 767px) {
  .item-head{
    margin-top:var(--gap-m);
  }
}
.sec-contents table{
  width:100%;
  max-width:700px;
  margin:auto;
  font-size:var(--font-s);
}
.sec-contents table th,
.sec-contents table td{
  padding:var(--gap-ss);
  border:1px solid #ccc;
  text-align:center;
  vertical-align: middle;
}

.sec-contents table thead th,
.sec-contents table thead td{
  font-weight:700;
  background:var(--color-bg-blue);
}
.sec-contents table tbody th{
  font-weight:700;
  background:#eee;
  font-size: var(--font-ss);
}

/*--------------------------------
BTOパソコンのおすすめカスタマイズ
sec-customize
--------------------------------*/

/*--------------------------------
BTOパソコンのおすすめサービス・保証
sec-service
--------------------------------*/

.sub-lead{
  font-size:var(--font-s);
  margin-bottom:var(--gap-m);
  line-height:1.6;
}

.sec-box{
  background:var(--color-bg-gray);
  border-radius: 20px;
  padding:var(--gap-m);
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
}
.sec-box .sec-box-ttl{
  font-size:var(--font-ml);
  font-weight:700;
}

/*--------------------------------
BTOパソコンのカスタマイズ・注文方法
sec-order
--------------------------------*/
.order-list{
  width:100%;
  display:flex;
  gap:var(--gap-m);
  align-items:center;
  justify-content:center;
}
.order-list li{
  flex:1;
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
}
.order-list li img{
  border:1px solid #666;
  border-radius:10px;
  overflow: hidden;
}
.order-list li p{
  font-size:var(--font-s);
  font-weight:500;
  text-align:center;
}

@media screen and (max-width: 767px) {
  .order-list{
    flex-direction: column;
  }
}

/*------------------
イメージモーダル
-------------------*/
.modal-thumb {
  width: 100%;
  cursor: pointer;
  transition: 0.3s;
}

.modal-thumb:hover {
  opacity: 0.8;
}

.modal-image {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.modal-content {
  height: 90vh;   /* 画面の高さに合わせる */
  width: auto;    /* 横は自動（縦横比維持） */
  object-fit: contain;
}

.modal-content img{
  object-fit: contain;
}

.modal-image .modal-image-close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.modal-image-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.modal-image-nav.prev { left: 30px; }
.modal-image-nav.next { right: 30px; }

@media screen and (max-width: 767px) {
  .modal-image .modal-image-close {
    top: 0;
    right: 5px;
    font-size: 30px;
  }
  .modal-image-nav {
    font-size: 40px;
  }
  .modal-image-nav.prev { left: 0; }
  .modal-image-nav.next { right: 0; }
}

/*--------------------------------
BTOパソコンのよくあるご質問
sec-faq
--------------------------------*/
.faq-list-item{
  width:100%;
  counter-increment: my-counter;
}
.faq-list-item + .faq-list-item{
  margin-top:var(--gap-m) ;
  padding-top:var(--gap-m) ;
  border-top:1px dashed #ccc;
}
.faq-ttl{
  position:relative;
  font-size:var(--font-ml);
  color:var(--color-blue);
  margin-bottom:var(--gap-ss);
  font-weight:700;
  padding-left:2.5em;
}
.faq-ttl::before{
  position:absolute;
  content:"Q." counter(my-counter) ;
  top:0;
  left:0;
}
.faq-body{
  padding-left:2.5em;
  font-size:var(--font-s);
  line-height:1.6;
  display: flex;
  flex-direction: column;
  gap:var(--gap-ss);
}
@media screen and (max-width: 767px) {
  .faq-body{
    padding-left:0;
  }
}
/*------------------
バナー
-------------------*/
.bnr-campaign{
  width:100%;
  display: flex;
  gap:var(--gap-m);
  justify-content: center;
}
.bnr-campaign a{
  flex: 1;
  max-width:360px;
}

.bnr-campaign a:hover{
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}


/*--------------------------------
監修
sec-article-author
--------------------------------*/
@media screen and (max-width: 767px) {
  .cts-article-author-description{
    font-size:var(--font-s);
  }
  .cts-article-author-name {
    font-size: var(--font-m);
  }
｝