@charset "utf-8";

/*-----------------------------------
全体
-----------------------------------*/
:root{
  --gap-ss: clamp(5px, 0.199rem + 0.57vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-ms: clamp(15px, 0.597rem + 1.7vw, 30px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(40px, 1.591rem + 4.55vw, 80px);

  --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(14px, 0.739rem + 0.68vw, 20px);
  --font-l: clamp(16px, 0.818rem + 0.91vw, 24px);

  --color-black:#000;
  --color-dgray:#444;
  --color-lgray:#f6f6f6;
  --color-blue:#004da1;
  --color-dblue:#001e60;
}

.thirdwave-pc {
  position:relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
  text-align:center;
  color:var(--color-dgray);
  font-size:var(--font-s);
  line-height:1.8;
}

.thirdwave-pc img{
  width:100%;
  object-fit: contain;
}

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

/*-----------------------------------
共通
-----------------------------------*/
.sec-contents{
  position:relative;
  width:100%;
  padding:var(--gap-l) 0;
}

.sec-contents section + section{
  margin-top:var(--gap-l);
}

.sec-sub-contents{
  position:relative;
  width:100%;
  padding:var(--gap-m) 0;
}

.sec-btm-contents{
  position:relative;
  width:100%;
  padding-bottom:var(--gap-m) ;
}

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

.bkg-lgray{
  background:var(--color-lgray);
}
.bkg-blue{
  background:var(--color-blue);
}
.bkg-lgray{
  background:var(--color-lgray);
}

.bkg-shadow{
  box-shadow: 
  inset 0 10px 15px -10px rgba(0, 0, 0, 0.3), /* 上 */
  inset 0 -10px 15px -10px rgba(0, 0, 0, 0.3);  /* 下 */
}

.sec-ttl{
  font-size:clamp(18px, 0.716rem + 2.05vw, 36px);
  font-weight:800;
  background: linear-gradient(90deg, var(--color-black) 0%, var(--color-dgray) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height:1.25;
  margin-bottom:var(--gap-m);
  text-align:left;
}
.sec-sub-ttl{
  font-size:var(--font-l);
  font-weight:700;
  color:var(--color-dgray);
  line-height:1.25;
  margin-bottom:var(--gap-ms);
  text-align:left;
}

.bkg-blue .sec-sub-ttl,
.bkg-dgray .sec-sub-ttl{
  color:#fff;
}

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

.sec-ttl + .lead-txt{
  margin-top:calc(var(--gap-s) * -1);
}

/*-----------------------------------
h1
-----------------------------------*/
.page-ttl{
  width:100%;
  background:#fff;
  padding:10px 0;
}
.page-ttl h1{
  width: calc(100% - 30px);
  max-width:1140px;
  text-align:left;
  font-weight:700;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  letter-spacing:0.05em;
  margin:auto;
}

/*-----------------------------------
KV
-----------------------------------*/
.kv-swiper-wrapper {
  overflow: hidden;
}
.kv-swiper {
  width: 100%;
  margin: 0 auto var(--gap-l);
  position: relative;
  overflow: visible;
}
.kv-swiper img{
  width: 100%;
  object-fit: contain;
  transform: translateZ(0);
}
.kv-swiper .swiper-slide {
  width: auto;
  height: auto;
  aspect-ratio: 1344/600;
  border-radius:5px;
  transform: scale(0.9);
  opacity: 0.5;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
  backface-visibility: hidden;
}
.kv-swiper .swiper-slide a:hover{
  cursor: default;
}

/* 前後スライド */
.kv-swiper .swiper-slide-prev img{
  margin-right:-11%;
}
.kv-swiper .swiper-slide-next img{
  margin-left:-11%;
}

/* 中央（アクティブ） */
.kv-swiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.8);
  transition: all 0.4s ease;
}
.kv-swiper .swiper-slide-active:hover{
  transform: scale(1.1);
}
.kv-swiper .swiper-slide-active a:hover{
  cursor: pointer !important;
}

/* ボタン・インジケーター */
.kv-swiper-indicator-outer{
  position: relative;
  width:calc(100% - 30px);
  max-width:1140px;
  margin:20px auto;
  text-align:center;
  font-size:clamp(10px, 0.58rem + 0.23vw, 12px);
  line-height:1.2;
}
.kv-swiper-button {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: rgba(98, 98, 98, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  backdrop-filter: blur(5px);
  position: absolute;
  top: 50%;
}
.kv-swiper-button::after {
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}
.kv-swiper-next {
  right: 0;
  transform: translateY(-50%) rotate(45deg);
}
.kv-swiper-prev {
  left: 0;
  transform: translateY(-50%) rotate(-135deg);
}
.kv-swiper-button.swiper-button-disabled {
  background: rgba(220, 220, 220, 0.5);
  cursor: default;
}
.kv-swiper-button:hover{
  opacity: 0.7;
  cursor: pointer;
}
.kv-swiper-indicator {
  position: relative;
  margin:auto;
  display: flex;
  gap: 1em;
  z-index: 2;
  width:70%;
  justify-content: center;
}
.kv-swiper-indicator > p {
  border-radius: 100vw;
  background: #fff;
  border:1px solid #666;
  color: #484848;
  cursor: pointer;
  white-space: nowrap;
  font-weight:500;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:0.5em;
  width:calc((100% - 4em) / 5);
  transition: all 0.4s ease;
}
.kv-swiper-indicator > p.active {
  background: #666;
  color: #fff;
}
.kv-swiper-indicator > p:hover{
  opacity: 0.7;
  background: #666;
  cursor: pointer;
  transform: translateY(5px);
}
@media screen and (max-width: 767px) {
  .kv-swiper-indicator {
    gap: 0.5em;
    width:calc(100% - 7em);
  }
} 
@media screen and (max-width: 590px) {
  .kv-swiper-indicator > p {
    width: 1em;
    height: 1em;
    padding: 0;
    border-radius: 50%;
  }
  .kv-swiper-indicator > p > span{
    display:none;
  }
}


/*------------------------------------------
形状・タイプ別から選ぶ
sec-select
------------------------------------------*/
.select-list{
  width:100%;
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(6,1fr);
}
.select-list li a{
  background:#fff;
  border-radius: 10px;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  padding:10px;
  text-align:center;
}
.select-list li a:hover{
  cursor: pointer;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
}

.select-list .select-txt{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap:10px;
}

.select-list .select-ttl{
  font-size:var(--font-m);
  font-weight:700;
  line-height:1.25;
  color:var(--color-dgray);
}
.select-list .select-cap{
  font-size:var(--font-ss);
  font-weight:700;
  line-height:1.25;
  color:var(--color-black);
}

@media screen and (max-width: 1139px) {
  .select-list .select-ttl{
    font-size:var(--font-s);
  }
}
@media screen and (max-width: 767px) {
  .select-list{
    grid-template-columns: repeat(3,1fr);
  }
}

/*------------------------------------------
THIRDWAVE（サードウェーブ）パソコンの強み
sec-select
------------------------------------------*/
.sec-select{
  overflow: hidden;
}
.point-slider{
  width: calc(100% - 30px); 
  max-width: 1140px;
  margin: var(--gap-m) auto 0 auto;
}
.point-slider .swiper-container{
  width: 100%;
  margin: 0 auto 80px;
  position: relative;
  overflow: visible;
}
.point-slider .swiper-slide{
  width: 500px;
  height: auto;
  background: #fff;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.2));
  overflow: hidden;
}
.point-img{
  width:100%;
  aspect-ratio: 14 / 13;
}
.point-body{
  position:relative;
  width:100%;
  height: 100%;
  background-image: linear-gradient(180deg, var(--color-dgray), var(--color-black));
  color:#fff;
  overflow: hidden;
  padding:var(--gap-ms);
  text-align:left;
}
.point-body::before{
  position:absolute;
  content:'';
  top: -3%;
  left: -3%;
  width: 27%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:#fff;
  opacity: 0.1;
  z-index:1;
}
.point-ttl{
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.point-num{
  width:12%;
  text-align:center;
  line-height:1.2;
}

.point-num span{
  display:block;
  font-size:clamp(24px, 0.955rem + 2.73vw, 48px);
  font-weight:800;
  font-family: 'Roboto';
}


.point-strengths{
  width:83%;
  font-size:var(--font-l);
  font-weight:700;
  line-height:1.4;
}
.point-strengths strong{
  font-size:1.25em;
}
.point-txt{
  margin-top:var(--gap-ms);
}

/*ボタン*/
.point-slider-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(98, 98, 98, 0.5);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  backdrop-filter: blur(5px);
  position: absolute;
  bottom: -80px;
}
.point-slider-button::after {
  content: '';
  width: 30%;
  height: 30%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-12.5%, 12.5%);
}
.point-slider-button--next {
  right: 0;
  transform: rotate(45deg);
}
.point-slider-button--prev {
  right: 80px;
  transform: rotate(-135deg);
}
.point-slider-button.swiper-button-disabled {
  background: rgba(220, 220, 220, 0.5);
  cursor: default;
}



/*------------------------------------------
高品質のものづくり
sec-quality
------------------------------------------*/
.company-list li{
  display:flex;
  margin-bottom:var(--gap-m);
  align-items: center;
  justify-content: space-between;
}

.company-img{
  width:15%;
}
.company-body{
  width:80%;
}
.company-body p{
  font-size:var(--font-m);
  line-height:1.6;
}


@media screen and (max-width: 767px) {
  .company-list li{
    flex-direction: column; 
    gap:var(--gap-s);
  }
  .company-img{
    width:40%;
    margin:auto;
  }
  .company-body{
    width:100%;
  }
}
/*-----------------*/
.about-tw{
  width:100%;
  background: #f2f6fa;
  padding:var(--gap-m);
  display: flex;
  flex-direction: column;
  gap:var(--gap-s);
  border-radius: 5px;
}

.about-logo{
  width: 240px;
}

.about-contents{
  display: flex;
  justify-content: space-between;
}
.about-contents > div{
  width:48%;
}
.about-ttl{
  font-size:var(--font-ml);
  font-weight:600;
  line-height:1.25;
  color:var(--color-blue);
  margin-bottom:var(--gap-s);
}
.about-img-list{
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(3, 1fr);
}

.related-link {
  text-align: right;
}
.c-link--external::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 8px;
  background: no-repeat url(../images/icon-external.svg) center / contain;
}

@media screen and (max-width: 767px) {
  .about-contents{
    flex-direction: column;
    gap:20px;
  }
  .about-contents > div{
    width:100%;
  }
}

.p-registered{
  margin-top:var(--gap-s);
  padding:0;
}
@media screen and (max-width: 767px) {
  .p-registered__list,
  .p-registered__list--wide {
      padding:0;
  }
}


/*------------------------------------------
よくある質問
sec-faq
------------------------------------------*/
.faq-list{
  border-top:2px dotted #cacaca;
  counter-reset: faq-counter;
}
.faq-list-item{
  width:100%;
  border-bottom:2px dotted #cacaca;
}
.faq-list-item summary{
  position:relative;
  padding:20px 10px;
  display:flex;
  align-items: center;
  cursor:pointer;
}
.faq-list-item 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-list-item 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-list-item details[open] summary::after{
  transform: rotate(90deg);
  transition: 0.3s all;
}

.faq-list-item summary > p{
  position:relative;
  padding-left:3em;
  padding-right:60px;
  line-height:1.4;
  font-size:var(--font-m);
  font-weight:700;
  counter-increment: faq-counter;
}
.faq-list-item summary > p::before{
  font-size:1.2em;
  position:absolute;
  left:0;
  top:-0.2em;
  content: "Q."counter(faq-counter) ;
}

.faq-list-item details[open] summary > p{
  color:var(--color-black);
}


.faq-list-item-body{
  background:#f6f6f6;
  border-radius: var(--gap-s);
  padding:var(--gap-m);
  margin-bottom:30px;
}

@media screen and (max-width:767px){
  .faq-list-item-body{
    margin-bottom:20px;
  }
  .faq-list-item summary{
    padding:20px 0;
  }
  .faq-list-item summary::before{
    right: 4px;
  }
  .faq-list-item summary::after {
    right: 10px;
  }
  .faq-list-item summary > p{
    padding-right:30px;
  }
}

/*--中身--*/
.faq-list-item-body p + ul,
.faq-list-item-body ul + p{
  margin-top:10px;
}

.faq-list-item-body strong{
  color:var(--color-dblue);
  font-weight:700;
}
.faq-list-item-body strong{
  color:var(--color-dblue);
  font-weight:700;
}

.faq-list-item-body .check-list{
  color:var(--color-dblue);
}

.faq-list-item-body dl{
  margin-top:10px;
}
.faq-list-item-body dt {
  color:var(--color-dblue);
}
.faq-list-item-body dd {
  margin-left:1em;
}
.faq-list-item-body table{
  margin-top:var(--gap-s);
  width:100%;
}
.faq-list-item-body th,
.faq-list-item-body td{
  border:1px solid #ccc;
  padding:5px;
  margin-top:var(--font-s);
  vertical-align:middle;
  text-align:center;
}
.faq-list-item-body thead th,
.faq-list-item-body thead td{
  background:#e2f5fb;
  font-weight:700;
}
.faq-list-item-body tbody th{
  background:#eee;
}
.faq-list-item-body tbody td{
  background:#fff;
}

/*------------------------------------------------------------------ボトム----*/
/*-----------------------------------
お役立ちコンテンツ
sec-useful
-----------------------------------*/

.p-top-useful__inner {
  padding-bottom: 0 !important;
  text-align:left;
}

@media screen and (min-width: 768px) {
  .p-top-useful__inner {
    text-align:center;
  }
  .p-top-useful__slide.swiper-slide > a > .useful_ico {
    margin: auto !important;
  }
  .p-top-useful__wrapper{
    gap: 20px;
    display:flex;
    width:100%;
    padding-bottom:5px;
  }
  .p-top-useful__slide{
    flex:1;
    height: auto !important;
    margin: 0 !important;
  }
  .p-top-useful__slide > a{
    height:100%;
    padding: 20px !important;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .p-top-useful__slide > a > .useful_ico{
    margin: 0;
  }
}

@media screen and (max-width:767px){
  .p-top-useful__slide{
    height: auto;
    width: auto;
  }
}

/*-----------------------------------
受賞履歴
sec-award
-----------------------------------*/
.sec-award {
  text-align:left;
}
.awards_received_wrap {
  margin-bottom: 0 !important;
}

.awards_received_wrap h2{
  font-size:var(--font-m) !important;
  font-weight:700;
}

/*-----------------------------------
注目記事
sec-articles
-----------------------------------*/
.sec-articles{
  text-align:left;
}
.article_list_wrap h2 {
  font-size:var(--font-m) !important;
}