@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);

  --color-green: #76b900;
  --color-dark-green: #436902;
  --color-yellow: #b7ff43;
  --color-dark: #222;

  --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;
}

.palit-model{
  position:relative;
  width:100%;
  text-align:center;
  background:var(--color-dark);
  color:#ddd;
  font-size: clamp(12px, 0.636rem + 0.48vw, 16px);
}

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

.c-palit{
  color:var(--color-green);
}

/*------------------------------------------
共通レイアウト
------------------------------------------*/
.cont-section {
  padding-block: var(--gap-l);
}

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

.cont-section section{
  margin-top: var(--gap-m);
}

/*------------------------------------------
ボタン
------------------------------------------*/
.palit-model .c-button{
  width:100%;
  padding-right: 16px;
  border-radius: 100vw;
}
.palit-model .c-button::after {
  right: 15px;
}
.palit-model .c-button,
.palit-model .c-button span,
.palit-model .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) {
  .palit-model .c-button{
    height:40px;
  }
}

/*商品詳細リンクボタン*/
.palit-model .c-button-palit{
  font-weight:700;
  background:var(--color-green);
  color:var(--color-dark);
  border:none;
}
.palit-model .c-button-palit::before{
  background:#fff;
  opacity: 0.4;
}
.palit-model .c-button-palit::after{
  border-color:var(--color-dark);
}

/*別ページリンクボタン*/
.palit-model .c-button-palit-link{
  font-weight:700;
  background:var(--color-dark-green);
  color:#fff;
  border:none;
}
.palit-model .c-button-palit-link::before{
  background:#fff;
  opacity: 0.4;
}
.palit-model .c-button-palit-link::after{
  border-color:#fff;
}

/*------------------------------------------
共通ヘッダ・テキスト
------------------------------------------*/
.sec-ttl {
  margin-bottom: var(--gap-s);
  font-weight: 900;
  font-size: clamp(24px, 0.818rem + 2.91vw, 48px);
  color: #fff;
  line-height: 1.2;
}

.cont-section .lead-txt {
  line-height: 1.6;
}

.cont-section > .lead-txt {
  margin-bottom:var(--gap-s);
  font-size: var(--font-m);
}

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

.caution{
  position:relative;
  padding-left:1em;
  font-size:var(--font-ss);
}
.caution::before{
  position:absolute;
  top:0;
  left:0;
  content:'※';
}

/*補足ブロック
-------------*/
.block-note{
  border-radius:var(--gap-s);
  margin-top:var(--gap-s);
  padding:var(--gap-s);
  background: rgba(41, 229, 164, .065);
  display:flex;
  flex-direction: column;
  gap:10px;
}

/*補足テキスト
-------------*/
.note-txt{
  font-size:var(--font-ss);
}

/*------------------------------------------
KV
------------------------------------------*/
.cont-kv{
  width:100%;
  position:relative;
}

/*------------------------------------------
ナビ
------------------------------------------*/
.nav-box {
  height: 80px;
  background: #000;
  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-line);
  border-right: 1px solid var(--color-white-line);
}

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

.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: #fff;
}

.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;
  }
}

/*------------------------------------------
9つのメリットで理解するPalit
#anchor-merit
------------------------------------------*/
.sec-merit{
  margin-top:var(--gap-s);
  padding:var(--gap-m);
  border:1px solid var(--color-white-line);
  background:var(--color-white-bkg);
  border-radius:var(--gap-s);
}

.sec-merit h3{
  margin-bottom:var(--gap-ss);
  font-weight:700;
  font-size:var(--font-ll);
  color: #fff;
  line-height: 1.2;
}

.sec-merit .catch-txt{
  margin-bottom:var(--gap-ss);
  font-weight:700;
  font-size:var(--font-m);
  color:var(--color-yellow);
  line-height: 1.2;
  letter-spacing: 0.1em;
}

.sec-merit > .lead-txt{
  margin-bottom:var(--gap-m);
}

.merit-list{
  margin-top:var(--gap-m);
  width:100%;
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: 18% 1fr;
  align-items: center;
}

.merit-list + .merit-list{
  padding-top:var(--gap-m);
  border-top:1px dotted var(--color-white-line);
}

.merit-list .list-tag{
  width:100%;
  font-weight:500;
  font-size:var(--font-s);
  color:var(--color-green);
  margin-bottom:var(--gap-ss);
}

.merit-list .list-ttl{
  font-weight:700;
  font-size:var(--font-m);
  color:#fff;
}

.merit-list .list-ttl-img{
  width:80%;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .merit-list .list-ttl-img{
    width:50%;
  }
}

.merit-list dd p{
  font-size:var(--font-s);
  line-height:1.6;
  margin-bottom:var(--gap-ss);
}

.series-list{
  font-weight:700;
  font-size:var(--font-ss);
  display:flex;
  gap:var(--gap-ss);
  flex-wrap: wrap;
}

.series-list li{
  display:block;
  padding:0.5em 1em;
  border: 1px solid var(--color-white-line);
  background: rgba(255, 255, 255, .065);
  border-radius: 100vw;
  transition: transform 0.2s ease;
}

.series-list li.series-list-ttl{
  color:#7f958c;
  border:none;
  background:none;
  padding-left:0;
  white-space: nowrap;
}

.series-list li a{
  display:block;
  width:100%;
  height:100%;
}

.series-list li:has(a){
  color: #c9f6e5;
  border-color:rgba(41, 229, 164, .25);
  background: rgba(41, 229, 164, .065);
}

.series-list li:has(a):hover{
  opacity: 0.8;
  transform: translateY(2px);
  cursor: pointer;
}

.series-list li.--limited{
  border-color:rgba(255, 216, 74, .25);
  background: rgba(255, 216, 74, .065);
  color: #f1df9b;
}


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

/*------------------------------------------
PALITのシリーズを理解する
#anchor-understand
------------------------------------------*/
/*TABLE*/
.series-matrix-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--color-white-line);
  border-radius:var(--gap-s);
  background:var(--color-white-bkg);
}

.series-matrix{
  width:100%;
  font-size:12px;
  table-layout: fixed;
}

.series-matrix .caution{
  padding-left:0;
}
.series-matrix .caution::before{
  position:relative;
}

.series-matrix th,
.series-matrix td{
  padding:15px 5px;
  border-right:1px solid var(--color-white-line);
  line-height:1.6;
  text-align:center;
  vertical-align:middle;
}

.series-matrix th{
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  background:var(--color-dark);
}

.series-matrix thead td{
  font-size: 120%;
  font-weight: 700;
  color: var(--color-green);
  white-space: nowrap;
}

.series-matrix tbody th,
.series-matrix tbody td{
  border-top:1px solid var(--color-white-line);
}

.series-matrix tbody td:last-child{
  border-right:none;
}

.series-matrix thead th,
.series-matrix .series-row-matrix th{
  background:#333;
}

.series-matrix thead td,
.series-matrix .series-row-matrix td{
  background:rgba(255, 255, 255, .05);
}

@media screen and (max-width: 767px) {
  .series-matrix{
    width:max-content;
  }
  .series-matrix th{
    z-index:5;
    position: sticky;
    left:0;
    white-space:unset;
    width: 80px;
  }
  .series-matrix th::after{
    position: absolute;
    content:'';
    top:0;
    left:0;
    width: calc(100% + 1px);
    height:100%;
    border-right:1px solid var(--color-white-line);
  }
  .series-matrix tbody td{
    width:160px;
  }
}

/*タグ*/
.tag-series-wrap{
  width:100%;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content: center;
}

.tag-series-wrap a:hover{
  opacity: 0.8;
  transform: translateY(2px);
}

.tag-series{
  width:fit-content;
  min-width:4em;
  display:block;
  font-size:10px;
  line-height:1;
  padding:0.5em;
  border-radius:5px;
  color:var(--color-dark);
  font-weight:900;
  transition: transform 0.2s ease;
  display:flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}

.tag-series.--standard{
  background:var(--color-green);
}
.tag-series.--oc{
  background:var(--color-yellow);
}
.tag-series.--white{
  background:#fff;
}
.tag-series.--v1{
  border:1px solid #fff;
  color:#fff;
}
.tag-series.--none{
  color:#fff;
  padding-inline:0;
  min-width:auto;
}

.tag-series-list{
  display:flex;
  gap:var(--gap-s);
  flex-wrap: wrap;
}

.tag-series-list li{
  display:flex;
  gap:5px;
}


@media screen and (max-width: 767px) {
  .tag-series-list{
    flex-direction: column;
  }
  .tag-series-list li{
    width:100%;
    white-space:auto;
  }
}

/*------------------------------------------
PALITのシリーズから選ぶ
#anchor-series
------------------------------------------*/
.sec-series{
  width:100%;
  margin-top:var(--gap-m);
}

.sec-series + .sec-series{
  padding-top:var(--gap-m);
  border-top:1px dotted var(--color-white-line);
}

.sec-series .ttl-img{
  width:50%;
  max-width:600px;
  min-width: 250px;
  margin-inline: auto;
}

.sec-series .catch-txt{
  margin-bottom:var(--gap-ss);
  font-weight:700;
  font-size:var(--font-m);
  color:var(--color-green);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align:center;
}

.sec-series .catch-txt + .lead-txt{
  margin-bottom:var(--gap-m);
  text-align:center;
}

.sec-series .model-wrap{
  width:100%;
  overflow-x: auto;
}

.sec-series .model-list{
  width:100%;
  display:flex;
  gap:var(--gap-s);
  justify-content: center;
}

.sec-series .model-list li{
  width:calc((100% - (var(--gap-s)*3)) / 4);
}

.sec-series .model-list li a{
  padding:var(--gap-s);
  width:100%;
  heigh:100%;
  background:#fff;
  border-radius:var(--gap-s);
  display:flex;
  flex-direction: column;
  gap:10px;
  text-align:center;
}

.sec-series .model-list li a:hover{
  border: 1px solid var(--color-yellow);
  filter: drop-shadow(0 0 5px rgba(183, 255, 67, 0.5));
}

.sec-series .model-img{
  width:70%;
  margin-inline: auto;
}

.sec-series .model-name{
  color:var(--color-dark);
  font-weight:700;
  text-align:left;
}

.sec-series .note-txt{
  color:var(--color-dark-green);
  text-align:left;
}

@media screen and (max-width: 767px) {
  .sec-series .model-list{
    width:fit-content;
    justify-content: flex-start;
  }
  .sec-series .model-list li{
    width:230px;
  }
}

/*----------------------
セット割
#series-set
-----------------------*/
.sec-set h3{
  margin-bottom:var(--gap-s);
  font-weight:700;
  font-size:var(--font-ll);
  color: #fff;
  line-height: 1.4;
  width: 100%;
  text-align: left;
  margin-inline: 0;
}

.sec-set h3 strong{
  display:block;
  position:relative;
  width:fit-content;
  padding-inline: 2em;
  font-weight:900;
  font-size:80%;
  color: var(--color-yellow);
}
.sec-set h3 strong::before,
.sec-set h3 strong::after{
  position:absolute;
  content:'';
  top:0;
  width:3px;
  height:100%;
  background: var(--color-yellow);
  clip-path: polygon(0 0 , 25% 100%, 50% 100%, 100% 0);
}
.sec-set h3 strong::before{
  left:0;
  transform: rotate(-10deg);
}
.sec-set h3 strong::after{
  right:0;
  transform: rotate(10deg);
}


/*セット*/
.set-wrap-list{
  margin-top:var(--gap-m);
  width:100%;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:var(--gap-s);
}

.set-wrap-list > li{
  width:calc((100% - var(--gap-s)) /2);
  padding:10px;
  border:1px solid var(--color-white-line);
  background:var(--color-white-bkg);
  border-radius:var(--gap-s);
  text-align:center;
  display:flex;
  flex-direction: column;
}

.set-wrap-list > li h4{
  margin-bottom:var(--gap-s);
  text-align:center;
  font-size:var(--font-l);
  font-weight:700;
  line-height:1.2;
  color:#fff;
}
.set-wrap-list > li h4 strong{
  color:var(--color-yellow);
  margin-inline: 5px;
}

.set-wrap-list .category{
  flex:1;
  padding:10px;
  background:#fff;
  border-radius:var(--gap-ss);
}

.set-wrap-list .category > div{
  display:flex;
  flex-direction: column;
  height: 100%;
}

.set-wrap-list .set-list{
  flex:1;
  width:100%;
  display:flex;
  gap:10px;
}

.set-wrap-list .set-list > li{
  flex:1;
}

.set-wrap-list .set-list p{
  text-align:left;
}

.palit-model .set-list img{
  width:60%;
}

.set-wrap-list .category .set-price{
  font-size:var(--font-m);
  color:#8c0dc7;
  font-weight:700;
  letter-spacing:0.02em;
  margin-block: 10px;
  text-align:center;
}

.set-wrap-list .category:has(.cartin-button[disabled]) .set-price{
  color:#ddd;
}

.set-wrap-list .category .set-price span{
  font-size:120%;
  font-weight:900;
}

.cartin-button{
  width:100%;
}

@media screen and (max-width: 767px) {
  .set-wrap-list{
    justify-content:flex-start;
    flex-direction: column;
  }

  .set-wrap-list > li{
    width:100%;
  }
}

/*カートボタン*/
.parts_box__button{
  width:100%;
  padding-right: 16px;
  border-radius: 100vw;
  cursor:pointer;
}
.parts_box__button{
  font-weight:700;
  background:var(--color-green);
  color:var(--color-dark);
  border:none;
}
.parts_box__button::before{
  background:#fff;
  opacity: 0.4;
}
.parts_box__button::after{
  border-color:var(--color-dark);
}

.palit-model .parts_box__button .ico{
  width: 18px;
  filter: var(--filter-dark);
  margin-inline: unset;
  margin-right:5px;
}

@media screen and (max-width: 767px) {
  .parts_box__button{
    height:40px;
  }
}
.cartin-button[disabled] .parts_box__button {
  background-color: #bbb;
  cursor: default;
}
.cartin-button[disabled] .parts_box__button::before {
  display: none;
}


/*もっと見るリンク*/
.more-link{
  margin-top:var(--gap-m);
  width:100%;
  max-width:600px;
  margin-inline: auto;
}

/*------------------------------------------
PALITをもっと楽しむ
#anchor-fun
------------------------------------------*/
.sec-fun{
  margin-top:var(--gap-s);
  border:1px solid var(--color-white-line);
  background:var(--color-white-bkg);
  border-radius:var(--gap-s);
  display:flex;
  align-items: center;
}

.sec-fun-wrap .sec-fun:nth-child(odd) {
  .fun-img{
    order:1;
  }
  .fun-txt{
    order:2;
  }
}
.sec-fun-wrap .sec-fun:nth-child(even){
  .fun-img{
    order:2;
  }
  .fun-txt{
    order:1;
  }
}

.sec-fun .fun-img{
  width:40%;
  padding:var(--gap-ss);
}
.sec-fun .fun-img img{
  border-radius:var(--gap-ss);
  overflow: hidden;
}

.sec-fun .fun-txt{
  flex:1;
  padding:var(--gap-m);
  display:flex;
  flex-direction: column;
  gap:10px;
}

.sec-fun .fun-txt p{
  line-height:1.6;
}

.sec-fun .catch-txt{
  color:var(--color-green);
  font-weight:700;
  font-size:var(--font-s);
  letter-spacing: 0.1em;
}

.sec-fun h3{
  font-weight:700;
  font-size:var(--font-ll);
  color:#fff;
}

@media screen and (max-width: 767px) {
  .sec-fun{
    flex-direction: column;
  }
  .sec-fun .fun-img,
  .sec-fun .fun-txt{
    width:100%;
  }
  .sec-fun-wrap .sec-fun:nth-child(odd),
  .sec-fun-wrap .sec-fun:nth-child(even) {
    .fun-img{
      order:1;
    }
    .fun-txt{
      order:2;
    }
  }
}

/*------------------------------------------
補足注意
additional-info
------------------------------------------*/
#additional-info{
  background:var(--color-dark-green);
  color:#fff;
}