@charset "utf-8";

:root {
  --gap-ss: clamp(5px, 0.17rem + 0.61vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.989rem + 5.68vw, 60px);
  --gap-ll: clamp(60px, 2.898rem + 3.64vw, 90px);
  --gap-spark:clamp(15px, 0.511rem + 1.82vw, 30px);

  --color-yellow: #b7ff43;
  --color-green: #76b900;
  --color-dark-green: #517e03;
  --color-pale-green: #c3de96;
  --color-dark: #222;

  --color-gray:#c4c4c4;
  --color-beige:#ded8c0;

  --color-white:rgba(255,255,255,0.5);
  --color-pale-white:rgba(255,255,255,0.1);

  --font-ll:clamp(20px, 0.966rem + 1.21vw, 30px);
  --font-l:clamp(18px, 0.955rem + 0.73vw, 24px);
  --font-m:clamp(14px, 0.761rem + 0.48vw, 18px);
  --font-s:clamp(12px, 0.693rem + 0.24vw, 14px);
  --font-ss:clamp(10px, 0.568rem + 0.24vw, 12px);
  
  --color-white-line: rgba(255,255,255,0.5);
  --color-white-bkg:linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .02));

  --filter-dark:brightness(0) saturate(100%) invert(10%) sepia(19%) saturate(14%) hue-rotate(345deg) brightness(98%) contrast(92%);

}

/*-------------------------------------
ページトップ
---------------------------------------*/
#pagetop a{
  position: fixed;
  border-radius: 50%;
  min-width: 44px;
  min-height: 44px;
  max-width: 60px;
  max-height: 60px;
  background: var(--color-green);
  right:30px;
  bottom: 30px;
  z-index: 100;
  width: 12.5vw;
  height: 12.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
  opacity: 0.9;
}

#pagetop a::after {
  position: absolute;
  content: '';
  width: 30%;
  height: 30%;
  top: 40%;
  border-top: 2px solid var(--color-dark);
  border-right: 2px solid var(--color-dark);
  transform: translate(-12.5%, 12.5%);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#pagetop a:hover{
  background: var(--color-dark-green);
  transform: translateY(-5px);
}

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

/*------------------------------------------
基本レイアウト
------------------------------------------*/
html {
  scroll-behavior: smooth;
}

.spark-proart{
  position:relative;
  width:100%;
  text-align:center;
  font-size:clamp(12px, 0.636rem + 0.48vw, 16px);
}

.spark-proart img{
  width:100%;
  object-fit: contain;
  margin-inline: auto;
}

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


/*------------------------------------------
ボタン
------------------------------------------*/
.spark-proart .c-button{
  width:100%;
  padding-left: 1.5em;
  padding-right: 2.5em;
  border-radius: 100vw;
  font-weight:700;
}
.spark-proart .c-button::after {
  right: 15px;
}
.spark-proart .c-button,
.spark-proart .c-button span,
.spark-proart .c-button p{
  letter-spacing: 0;
  line-height:1.25;
  font-size:clamp(12px, 0.636rem + 0.48vw, 16px);
}

@media screen and (max-width: 767px) {
  .spark-proart .c-button{
    height:40px;
  }
}

/*ボタン色*/
.c-button-spark{
  background:var(--color-green);
  color:var(--color-dark);
  border:none;
}
.c-button-spark::before{
  background:#fff;
  opacity: 0.4;
}
.c-button-spark::after{
  border-color:var(--color-dark);
}
.c-button-spark.--anchor::after{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*リンクボタン*/
.c-button-spark-link{
  background:var(--color-pale-white);
  color:var(--color-green);
  border-color:var(--color-green);
}
.c-button-spark-link::before{
  background:#fff;
  opacity: 0.5;
}
.c-button-spark-link::after{
  border-color:var(--color-green);
}

.area-contents .c-button-spark-link{
  background:var(--color-white);
  color:var(--color-dark-green);
  border-color:var(--color-dark-green);
}
.area-contents .c-button-spark-link::before{
  background:#fff;
  opacity: 0.9;
}
.area-contents .c-button-spark-link::after{
  border-color:var(--color-dark-green);
}

/*------------------------------------------
共通レイアウト
------------------------------------------*/
.lead-txt {
  line-height: 1.6;
}

.lead-txt + .lead-txt{
  margin-top:var(--gap-s);
}

/*注意事項
-------------*/
.caution-list li + li{
  margin-top:0.5em;
}

.caution-list li{
  position:relative;
  padding-left:1.2em;
  font-size:var(--font-ss);
  line-height:1.2;
}

.caution-list li::before{
  position:absolute;
  top:0;
  left:0;
  content:'※';
}

/*------------
イントロエリア
area-intro
-------------*/
.spark-proart .area-intro{
  background:#333;
  color:#fff;
  box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.8);
  padding-bottom: var(--gap-ll);
}

.intro-section {
  padding-top: var(--gap-ll);
}

.intro-section > .contents-inner > section + section{
  padding-top: var(--gap-l);
}

.intro-ttl{
  margin-bottom: var(--gap-s);
  font-size:var(--font-ll);
  font-weight:900;
  line-height: 1.2;
}

.intro-ttl.intro-ttl-wrap{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .intro-ttl.intro-ttl-wrap{
    flex-direction: column;
    gap:10px;
    align-items:flex-start;
  }
}

.ttl-catch{
  font-size:var(--font-m);
  font-weight:500;
}

.area-intro .cont-ttl {
  color:var(--color-green);
}

.area-intro h3{
  margin-bottom:var(--gap-s);
  font-weight:700;
  font-size:var(--font-l);
}
.area-intro h3.cont-sub-ttl{
  padding-bottom:10px;
  border-bottom:1px solid var(--color-white);
}


/*------------
コンテンツエリア
area-contents
-------------*/
.spark-proart .area-contents{
  background:var(--color-beige);
  color:var(--color-dark);
  box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.5);
  padding-bottom: var(--gap-ll);
}

.cont-section {
  padding-top: var(--gap-ll);
}

.cont-section > .contents-inner > section + section{
  padding-top: var(--gap-l);
}

.cont-ttl {
  margin-bottom: var(--gap-s);
  font-weight: 900;
  font-size: clamp(24px, 0.818rem + 2.91vw, 48px);
  line-height: 1.2;
}

.cont-btm-ttl {
  margin-bottom: var(--gap-s);
  font-weight: 900;
  font-size: var(--font-ll);
  line-height: 1.2;
}


/*------------------------------------------
KV
------------------------------------------*/
.cont-kv{
  padding-block:var(--gap-l);
  background: #333 url(../images/bkg-kv-dark.webp) no-repeat top center / cover;
  background-attachment: fixed;
  color:#fff;
  font-weight:700;
  line-height:1.2;
  letter-spacing: 0.1em;
}

.kv-wrapper{
  display:flex;
  align-items: center;
}

.kv-contents{
  flex:1;
  display:flex;
  flex-direction: column;
  gap:var(--gap-s);
}

.kv-lead{
  display:block;
  font-size:clamp(20px, 0.682rem + 2.42vw, 40px);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
  font-weight:900;
}
.kv-catch{
  display:block;
  font-size:clamp(20px, 0.682rem + 2.42vw, 40px);
  color:var(--color-green);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
.kv-logo{
  display:block;
  width:clamp(100px, 3.409rem + 12.12vw, 200px);
  margin-block:clamp(14px, 0.477rem + 1.7vw, 28px);
}
.kv-ttl{
  display:block;
  font-size: clamp(30px, 1.023rem + 3.64vw, 60px);
  font-weight:900;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}

.kv-img{
  width:40%;
}

@media screen and (max-width: 767px) {
  .cont-kv{
    padding-block:var(--gap-s);
  }
  .kv-wrapper{
    flex-direction: column;
  }
  .kv-img{
    width:60%;
    margin-block: auto;
  }
}

/*------------------------------------------
ナビ
------------------------------------------*/
.nav-box {
  height: 80px;
  background: rgba(0,0,0,0.9);
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
}

.nav-box-list {
  width: 100%;
  height: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  font-size:clamp(10px, 0.511rem + 0.48vw, 14px);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--color-white);
}

.nav-box-list li+li {
  border-left: 1px solid var(--color-white);
}

.nav-box-list li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25em;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  text-align: center;
  color: var(--color-yellow);
  font-weight:500;
}

.nav-box-list li a:hover {
  opacity: 0.7;
  background:linear-gradient(180deg, transparent, var(--color-dark-green));
}

.fix-anchor {
  scroll-margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .nav-box {
    height: 14vw;
  }
  .nav-box-list{
    border: none;
  }
  .fix-anchor {
    scroll-margin-top: 14vw;
  }
}

/*------------------------------------------
商品スペック
#anchor-spec
------------------------------------------*/
.spec-wrap{
  display:flex;
  gap:var(--gap-m);
}

.spec-wrap > div{
  flex:1;
}

@media screen and (max-width: 767px) {
  .spec-wrap{
    flex-direction: column;
  }
  .spec-wrap > div{
    width:100%;
  }
}

/*------------
商品SPEC
spec-detail
-------------*/
.spec-detail h2{
  font-size:clamp(30px, 1.307rem + 2.42vw, 50px);
  font-weight:900;
  color:var(--color-green);
}

.spec-logo-wrap{
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:10px;
}

.spec-logo-wrap .spec-logo-txt{
  flex:1;
}

.spec-logo-wrap .spec-logo{
  width:30%;
}

.spec-link{
  margin-top:var(--gap-m);
  text-align:right;
  width:100%;
}
.spark-proart .spec-link .c-button{
  width:fit-content;
}

@media screen and (max-width: 767px) {
  .spec-logo-wrap{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top:var(--gap-s);
  }
  .spec-logo-wrap .spec-logo{
    padding-left:60%;
  }
  .spec-logo-wrap .spec-logo{
    width:100%;
  }
}

/*------------
spec-list
-------------*/
.spec-list{
  margin-top:var(--gap-s);
  border-top:1px solid var(--color-green);
  padding-top:0.5em;
  color:var(--color-green);
}

.spec-list li{
  margin-bottom:0.5em;
  padding-bottom:0.5em;
  border-bottom:1px solid var(--color-green);
  display:flex;
  gap:0.5em;
  align-items: center;
  justify-content: space-between;
}

.spec-list li .spec-ttl{
  white-space:nowrap;
  font-weight:700;
}

.spec-list li .spec-txt{
  text-align:right;
}

@media screen and (max-width: 767px) {
  .spec-list li{
    flex-direction: column;
    align-items: flex-start;
  }
  .spec-list li .spec-txt{
    text-align:left;
  }
}

/*------------
もっと見る
-------------*/
.more-link{
  margin-inline: auto;
  margin-top:var(--gap-s);
  display:flex;
  gap:var(--gap-s);
  align-items: center;
  justify-content: center;
}

.more-link .btn-link{
  width:fit-content;
}
.spark-proart .more-link .btn-link .c-button{
  width:fit-content;
}

@media screen and (max-width: 767px) {
  .more-link{
    flex-direction: column;
  }
  .more-link,
  .more-link .btn-link,
  .spark-proart .more-link .btn-link .c-button{
    width:100%;
  }
}

.more-link.--lineup .btn-link{
  flex:1;
}

.spark-proart .more-link.--lineup .c-button{
  width:100%;
  height:clamp(40px, 1.648rem + 3.64vw, 70px);
  border-radius:10px;
}

.more-link.--lineup .c-button strong{
  font-size:120%;
}

/*------------------------------------------
商品特長
anchor-feature
------------------------------------------*/

/*------------
搭載
------------*/
.block-exp .intro-ttl{
  color:var(--color-green);
}

.exp-wrap{
  display:flex;
  gap:var(--font-s);
  align-items: center;
}

.exp-txt{
  width:60%;
}

.exp-img{
  flex:1;
  display:flex;
  gap:var(--font-s);
  align-items: center;
}

.exp-logo{
  width:clamp(70px, 2.386rem + 8.48vw, 140px);
}

.exp-link{
  flex:1;
}



@media screen and (max-width: 767px) {
  .exp-wrap{
    flex-direction: column;
  }
  .exp-txt{
    width:100%;
  }
}

/*------------
コンセプト
------------*/

.concept-wrap{
  background:var(--color-dark-green);
  padding:var(--gap-m);
  border-radius:var(--gap-s);
  display:flex;
  gap:var(--gap-m);
  align-items:center;
}

.concept-wrap > div{
  flex:1;
}

.concept-ttl h2{
  font-size:var(--font-ll);
  font-weight:900;
  margin-bottom:var(--gap-m);
  line-height:1.6;
}

.concept-list > li{
  margin-bottom:var(--gap-s);
  padding-bottom:var(--gap-s);
  border-bottom:1px solid var(--color-green);
  display:flex;
  flex-direction: column;
  gap:var(--gap-ss);
}

.list-ttl{
  font-weight:700;
  font-size:var(--font-m);
}
.list-txt{
  font-size:var(--font-s);
  line-height:1.6;
}

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

/*------------
商品特長
------------*/
.feature-list{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:var(--gap-s);
}

.feature-list > li{
  flex:1;
  padding:var(--gap-s);
  border:1px solid var(--color-dark-green);
  border-radius:var(--gap-s);
}

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

/*------------------------------------------
ラインアップ
anchor-lineup
------------------------------------------*/

/*------------
モデルリスト
------------*/

.block-model{
  width:100%;
}

.block-model .model-list{
  width:100%;
  display:flex;
  gap:10px;
}

.block-model .model-list > li{
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  gap:20px;
  justify-content: space-between;
  border:1px solid #fff;
  background:rgba(255,255,255,0.1);
  padding:var(--gap-s);
  border-radius:var(--gap-s);
}

.block-model .model-list > li .model-main{
  display:flex;
  flex-direction: column;
  gap:10px;
}

.block-model .model-list.--horizontal > li{
  display:flex;
  flex-direction:row;
  gap:20px;
  justify-content: flex-start;
}

.block-model .model-list.--horizontal > li .model-top{
  width:40%;
}
.block-model .model-list.--horizontal > li .model-main{
  flex:1;
}

@media screen and (max-width: 767px) {
  .block-model .model-list > li .model-main{
    flex-direction: column;
  }
  .block-model{
    overflow-x: auto;
  }
  .block-model .model-list{
    width:max-content;
  }
  .block-model .model-list > li{
    width:230px;
  }

  .block-model .model-list.--horizontal > li{
    flex-direction:column;
  }
  .block-model .model-list.--horizontal,
  .block-model .model-list.--horizontal > li,
  .block-model .model-list.--horizontal > li .model-top,
  .block-model .model-list.--horizontal > li .model-main{
    width:100%;
  }
}

.model-name {
  line-height: 1.4;
  font-weight: 700;
  font-size: var(--font-m);
  color:var(--color-green);
}

.model-name strong{
  font-size:120%;
}

.model-img-wrap{
  position: relative;
  width: 100%;
}

.model-img {
  margin-inline: auto;
  width: 60%;
}

/*2つあるとき*/
.model-img-wrap:has(object) .model-img:first-child{
  position:relative;
  margin: 0;
  top: 0;
  left: 5%;
  z-index:+1;
}
.model-img-wrap .model-img + .model-img{
  position:absolute;
  margin: 0;
  top: 0;
  right: 5%;
}

.model-spec{
  font-size:var(--font-s);
  padding-bottom:5px;
  border-bottom:1px dotted var(--color-white);
}
.model-spec > li{
  padding-top:5px;
  margin-top:5px;
  border-top:1px dotted var(--color-white);
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.model-price-block{
  font-weight:700;
}

.model-stkname{
  margin-bottom:5px;
}

.model-price span{
  font-size: clamp(20px, 1.108rem + 0.61vw, 25px);
  margin-right:5px;
  color:var(--color-yellow);
}

/*------------
ノートパソコンについて
------------*/
.block-note h3{
  font-weight:700;
  font-size:var(--font-l);
}


/*------------------------------------------
RTX Sparkについて
anchor-about
------------------------------------------*/
.cont-section h3{
  margin-bottom:var(--gap-s);
  font-weight:700;
  font-size:var(--font-l);
}
.cont-section h3.cont-sub-ttl{
  padding-bottom:10px;
  border-bottom:1px solid var(--color-dark);
}

.flow-list{
  margin-block: var(--gap-m);
  width:100%;
  background:#fff;
  display:flex;
  border-radius: var(--gap-s);
  overflow: hidden;
  border: 2px solid var(--color-green);
}

.flow-list > li{
  position:relative;
  padding:var(--gap-s);
}
.flow-list > li.flow-prev{
  width:calc(50% - 10px);
}
.flow-list > li.flow-next{
  flex:1;
  padding-left:calc(var(--gap-s) + 20px);
}

.flow-list > li.flow-prev::after{
  position:absolute;
  content:'';
  background:#fff;
  top:0;
  right:-20px;
  width:20px;
  height:100%;
  clip-path:polygon(0 0 , 100% 50%, 0 100%);
  z-index:+1;
}

.flow-list > li.flow-next{
  background:var(--color-pale-green);
}

.flow-list > li h4{
  font-size:var(--font-m);
  font-weight:700;
  line-height:1.6;
  margin-bottom:var(--gap-s);
}
.flow-list > li h4 strong{
  font-size:var(--font-l);
}

.about-wrap{
  width:100%;
  display:flex;
  gap:var(--gap-m);
}

.about-wrap > div{
  flex:1;
}

.about-img{
  border-radius: var(--gap-s);
  overflow: hidden;
  border: 2px solid var(--color-green);
}

@media screen and (max-width: 767px) {
  .about-wrap{
    flex-direction: column;
  }
  .flow-list{
    flex-direction: column;
  }
  .flow-list > li.flow-prev{
    width:100%;
  }
  .flow-list > li.flow-prev::after{
    position:absolute;
    content:'';
    background:#fff;
    top:auto;
    bottom:-19px;
    right:0;
    width:100%;
    height:20px;
    clip-path:polygon(0 0 , 50% 100%, 100% 0);
    z-index:+1;
  }
  .flow-list > li.flow-next{
    width:100%;
    padding-left:var(--gap-s);
    padding-top:calc(var(--gap-s) + 20px);
  }

}

/*------------------------------------------
RTX Sparkでできること
anchor-cando
------------------------------------------*/

.sec-wrap{
  display:flex;
  gap:var(--gap-m);
}

.sec-wrap > div{
  flex:1;
}

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


/*------------------------------------------
RTX Spark スーパーチップ
superchip-section
------------------------------------------*/
.superchip-section{
  margin-top:var(--gap-ll);
  width:100%;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2);
  background:var(--color-gray);
}

.superchip-section-wrap{
  width:100%;
  margin-inline: auto;
  max-width:1600px;
  padding-bottom:var(--gap-l);
  background: transparent url(../images/spark-bkg-pc-trans.webp) no-repeat top center / 100% auto;
}

.superchip-section .caution-list{
  margin-top:var(--gap-s);
}

.superchip-ttl{
  position:relative;
  width:100%;
  aspect-ratio: 1350/181;
  padding-top:clamp(30px, 0.17rem + 7.27vw, 90px);
}

.superchip-ttl h2{
  font-weight:700;
  font-size:clamp(20px, 0.682rem + 2.42vw, 40px);
}

.superchip-ttl-img{
  position:relative;
  content:'';
  width:100%;
  aspect-ratio: 1350/200;
}

.superchip-list{
  margin-top:var(--gap-spark);
  max-width:100%;
  margin-inline: auto;
  display:grid;
  gap:var(--gap-spark);
}

.superchip-list.--upper{
  grid-template-columns: repeat(4,1fr);
}
.superchip-list.--lower{
  grid-template-columns: repeat(3,1fr);
}

.superchip-list > li{
  background:#fff;
  padding-block: clamp(20px, 0.966rem + 1.21vw, 30px);
  padding-inline:var(--gap-s);
  border-radius: 2px;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
  display:flex;
  gap:var(--gap-ss);
}

.superchip-list.--upper > li{
  align-items: center;
}

.superchip-img{
  width:55px;
}

.superchip-txt{
  flex:1;
  display:flex;
  gap:clamp(5px, 0.17rem + 0.61vw, 10px);
  flex-direction: column;
}

.superchip-list > li p{
  font-size:clamp(14px, 0.818rem + 0.24vw, 16px);
}

.superchip-list > li .list-txt{
  font-size:clamp(14px, 0.818rem + 0.24vw, 16px);
}

.superchip-list.--upper > li .list-ttl{
  font-size:clamp(18px, 0.955rem + 0.73vw, 24px);
  font-weight:700;
}
.superchip-list.--lower > li .list-ttl{
  font-size:clamp(18px, 1.068rem + 0.24vw, 20px);
  font-weight:700;
}

@media screen and (max-width: 767px) {
  .superchip-section-wrap{
    background: var(--color-gray) url(../images/spark-bkg-sp.webp) no-repeat top center / 100% auto;
  }
  .superchip-ttl{
    aspect-ratio: 640/121;
    padding-top:30px;
  }
  .superchip-ttl-img{
    aspect-ratio: 640/144;
  }

  .superchip-list.--upper{
    grid-template-columns: repeat(2,1fr);
  }
  .superchip-list.--lower{
    grid-template-columns: repeat(1,1fr);
  }

  .superchip-list.--upper .superchip-img{
    width:40px;
  }
}


/*------------------------------------------
TABLE
------------------------------------------*/
.spark-proart table{
  width:100%;
  table-layout: auto;
  background:#eee;
  color:var(--color-dark);
  margin-bottom:var(--gap-s);
}
.spark-proart table th,
.spark-proart table td{
  padding:0.5em;
  border:1px solid var(--color-dark);
  text-align:center;
  vertical-align:middle;
}

.spark-proart table thead th,
.spark-proart table thead td{
  background:var(--color-dark);
  font-weight:500;
  color:#fff;
}

.spark-proart table tbody th{
  background:#ccc;
}

.spark-proart table .row-spark th,
.spark-proart table .row-spark td{
  background:var(--color-pale-green);
}

.spark-proart table.table-comparison tbody th,
.spark-proart table.table-comparison tbody td{
  text-align:left;
}

.spark-proart table.table-comparison th{
  width:20%;
  white-space:nowrap;
}

.spark-proart table.table-comparison thead th.spark,
.spark-proart table.table-comparison thead td.spark{
  background:var(--color-dark-green);
}

.spark-proart table tbody td.spark{
  background:var(--color-pale-green);
}

/*------------------------------------------
購入前のご確認
anchor-check
------------------------------------------*/
.cont-btm-ttl{
  margin-bottom:var(--gap-s);
  font-weight:700;
  font-size:var(--font-ll);
}


.check-list{
  margin-top:var(--gap-m);
  margin-bottom:var(--gap-s);
  gap:var(--gap-s);
  display:grid;
  grid-template-columns: repeat(2,1fr);
}

.check-list > li{
  background:var(--color-white);
  padding:var(--gap-s);
  border-radius: var(--gap-s);
}

.check-list > li .list-ttl{
  font-size:var(--font-m);
  margin-bottom:var(--gap-ss);
  font-weight:700;
  border-radius: var(--gap-s);
}

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

/*------------------------------------------
よくあるご質問
anchor-faq
------------------------------------------*/

.faq-list{
  width:100%;
  counter-reset: faq-counter; 
}

.faq-list > li {
  counter-increment: faq-counter; 
  border-bottom:1px dotted var(--color-white);
}
.faq-list > li:first-child{
  border-top:1px dotted var(--color-white);
}

.faq-list > li details[open]{
  padding-bottom:var(--gap-s);
}

.faq-list > li summary {
  list-style: none;
  display: block;
  position:relative;
  padding:var(--gap-s) 3em var(--gap-s) 0;
  font-weight:700;
  cursor:pointer;
}
.faq-list > li details[open] summary {
  padding-bottom:calc(var(--gap-s) / 2);
}

.faq-list > li summary::-webkit-details-marker {
  display:none;
}
.faq-list > li summary::before{
  position:absolute;
  content:'';
  top:calc(50% - 1px);
  right:0;
  background:var(--color-dark-green);
  width:1em;
  height:2px;
}
.faq-list > li summary::after{
  position:absolute;
  content:'';
  top:calc(50% - 0.5em);
  right:calc(0.5em - 1px);
  background:var(--color-dark-green);
  width:2px;
  height:1em;
  transition: all 0.3s;
}
.faq-list > li details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}

.faq-list > li summary p {
  position:relative;
  padding-left:3em;
}

.faq-list > li summary p::before {
  position:absolute;
  left:0;
  top:0;
  color:var(--color-dark);
  font-weight:700;
  content: "Q." counter(faq-counter); 
}

.faq-cont{
  background: var(--color-white);
  border-radius: 10px;
  padding:var(--gap-s);
  line-height:1.6;
}

/*------------------------------------------
関連コンテンツ
anchor-related
------------------------------------------*/
.related-list{
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(2,1fr);
}

.related-list > li a{
  width:100%;
  background:var(--color-white);
  display:flex;
  gap:var(--gap-s);
  align-items: center;
  border-radius:10px;
  overflow: hidden;
  border:1px solid var(--color-dark-green);
  padding:10px;
}
.related-list > li a:hover{
  border: 1px solid var(--color-green);
  box-shadow:0 0 5px var(--color-green);
}

.related-list > li a .related-img{
  width:30%;
  border-radius:5px;
  overflow: hidden;
}

.related-list > li a .related-txt{
  flex:1;
  padding:var(--gap-s);
  text-align:center;
  font-size:var(--font-m);
  font-weight:700;
}

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