@charset "utf-8";

:root {
	/* base */
	--cts-width: 1050px;
  --cts-gutter: clamp(30px,4vw,60px);

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/
  
  --dp-font-size: clamp(14px,4.27vw,16px);
	--dp-h3-size: clamp(24px,6.4vw,36px);
  --dp-spec-size: clamp(12px,3.2vw,18px);/*スペック*/
	--dp-price-size: clamp(24px,6.4vw,36px);/* 価格 */
	--dp-price-tax-size: clamp(18px,4.8vw,24px);/* 円・税 */

	--cts-font-size: clamp(14px,3.73vw,18px);
	--cts-font-ls: .02em;/*letter-spacing*/
	--cts-font-ls-02: .025em;

	/* color */
	--dp-color: #004da1;
	--dp-color-price: #e43344;
	--cts-color: #484848;
	--cts-color-01: #e8eff6;
	--cts-color-02: #ffffff;
  --cts-color-03: #f6f2e3;
  --cts-color-04: #e6f8ff;
}

/* LP共通汎用
____________________*/
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
@media screen and (min-width: 480px){
.breadCrumb {
    max-width: var(--cts-width);
}
#container .breadCrumb li a {
    text-decoration: underline;
    color: #0062b0;
}
#container .breadCrumb li a:hover {
    text-decoration: none;
}
}
#container {
	width: 100%;
	margin: auto;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 10px auto 0 !important;
}
.pagetop {
	display: none;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.contentsWrap {
	width: 100%;
	color: var(--cts-color);
	font-size: var(--dp-font-size);
	overflow: hidden;
  letter-spacing: 0.1em;
}
.contentsWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}

@media (max-width: 479px) {
	#container {
		margin-bottom: 0 !important;
	}
	.leadSection.clearfix {
		display: none;
	}
}
.sp {
	display: none;
}


/* コンテンツ
____________________*/
.contentsWrap {
	background-size: contain;
  font-family: var(--dp-font-jp);
}
.contents__inner {
	width: 100%;
  max-width: var(--cts-width);
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* mv
____________________*/
.contents--mv img{
  width:100%;
}
.contents--mv--buyparts{
  background: var(--cts-color-01);
}

/* intro
--------------------*/
.contents__intro{
  padding: 120px 0;
  margin-top: -3vw;
  text-align: center;
  font-size: clamp(16px,2.08vw,24px);
}
.contents__intro--buypc{
  background: var(--cts-color-02);
}
.contents__intro--buyparts{
  background: var(--cts-color-01);
}

/* contents--item
--------------------*/
.contents__item,.contents__item--alert{
  margin-bottom: 60px;
  padding: 30px;
  display: flex;
  border-radius: clamp(10px,2.6vw,20px);
  font-size: clamp(15px,4vw,18px);
  position: relative;
  overflow: hidden;
}
.contents__item:before{
  width: 120px;
  height: 120px;
  border-top: 60px solid var(--dp-color);
  border-right: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid var(--dp-color);
  position: absolute;
  left: 0;
  top: 0;
  content: '';
}
.contents__item:after{
  counter-increment: number 1;
  content: counter(number) " ";
  position: absolute;
  left: 30px;
  top: 0;
  color: var(--cts-color-02);
  font-size: 36px;
}
.contents__item h3{
  height: 120px;
  margin: -30px 0 0 -30px;
  padding-left: 120px;
  font-size:30px;
  color: var(--dp-color);
  line-height: 1.2;
  display: flex;
  align-items: center;
}
.contents__item-text-box{
  width: 660px;
  margin-right: 30px;
}
.contents__item-text strong{
  color: red;
}
.contents__item-text--small{
  font-size: clamp(12px,3.2vw,16px);
}
.contents__item-text+.contents__item-text,.contents__item-text+.contents__item-text--small{
  margin-top: 1em;
}
.contents__item-img-box{
  flex: 1;
  text-align: center;
}
.contents__item--external-link{
  margin: 60px 0;
  display: flex;
  column-gap: 60px;
}

/* buypc
____________________*/
.contents--buypc{
  background: var(--cts-color-01);
  counter-reset: number 0;
}
.contents--buypc h2{
  padding: 120px 0;
  text-align: center;
  background: url(../images/bg_buypc.webp) no-repeat 90% 50%;
  background-size: 25%;
}
.contents--buypc .contents__item{
  background: var(--cts-color-02);
}
.contents--buypc:after{
  width: 100vw;
  height: 6.25vw;
  content: '';
  display: block;
  background: var(--cts-color-03) url(../images/bg_triangle_buypc.webp) no-repeat 0 0;
  background-size: cover;
}

/* buyparts
____________________*/
.contents--buyparts{
  background: var(--cts-color-02);
  counter-reset: number 0;
}
.contents--buyparts h2{
  padding: 120px 0;
  text-align: center;
  background: url(../images/bg_buyparts.webp) no-repeat 90% 50%;
  background-size: 25%;
}
.contents--buyparts .contents__item{
  background: var(--cts-color-01);
}
.contents--buyparts:after{
  width: 100vw;
  height: 6.25vw;
  content: '';
  display: block;
  background: var(--cts-color-03) url(../images/bg_triangle_buyparts.webp) no-repeat 0 0;
  background-size: cover;
}
/* entry
____________________*/
.contents--entry{
  background: var(--cts-color-04);
  counter-reset: number 0;
}
.contents--entry:after{
  width: 100vw;
  height: 6.25vw;
  content: '';
  display: block;
  background: var(--cts-color-03) url(../images/bg_triangle_entry.webp) no-repeat 0 0;
  background-size: cover;
}
.contents--entry h2{
  padding: 120px 0;
  text-align: center;
}
.contents--entry .contents__item{
  background: var(--cts-color-02);
}
.contents__item--alert{
  background: var(--cts-color-02);
  border: 2px solid red;
  color: red;
}
.contents__item--alert a{
  text-decoration: underline !important;
}

/* cv
____________________*/
.contents--cv{
  padding: 60px 0;
  background: var(--cts-color-03);
  text-align: center;
}
.contents--cv .contents__item-text{
  font-size: clamp(15px,4vw,24px);
}
.contents--cv .contents__item-text--large{
  font-size: clamp(24px,6.4vw,36px)
}
.contents--cv .c-button--primary-blue{
  margin: 0 auto;
  margin-top: 60px;
  width: 50%;
  color: #fff !important;
}

/* fade
____________________*/
.fade, .fadeUp, .fadeLeft, .fadeRight {
  opacity: 0;
  transition: all .8s; }

.fadeUp {
  transform: translatey(100px); }

.fadeLeft {
  transform: translatex(150px); }

.fadeRight {
  transform: translatex(-150px); }

.fade.fadeShow, .fadeUp.fadeShow, .fadeLeft.fadeShow, .fadeRight.fadeShow {
  opacity: 1;
  transform: translate(0, 0); }

/* レスポンシブ
____________________*/
@media (min-width: 768px) and (max-width: 1049px) { /*タブレット～1049pxまで*/
  .contents__inner{
    padding: 0 15px;
  }
  .contents__intro{
    margin-top: -3vw;
    padding: 60px 0;
    font-size: 2.08vw;
  }
  .contents--buypc h2,.contents--buyparts h2,.contents--entry h2{
    padding: 60px 0;
  }
   .contents--buypc h2 img,.contents--buyparts h2 img{
    width: 50vw;
  }
  .contents--entry h2 img{
    width: 60vw;
  }
  .contents__item{
    margin-bottom: 15px;
    padding: 15px;
  }
  .contents__item:before{
    width: 90px;
    height: 90px;
    border-top: 45px solid var(--dp-color);
    border-right: 45px solid transparent;
    border-bottom: 45px solid transparent;
    border-left: 45px solid var(--dp-color);
  }
  .contents__item:after{
    left: 20px;
    top: 0;
    font-size: 28px;
  }
  .contents__item h3{
    height: 90px;
    margin: -15px 0 0 -15px;
    padding-left: 90px;
    font-size:20px;
  }
  .contents__item-text-box{
    width: 66.6%;
  }
  .contents__item--external-link{
    margin: 15px 0;
    column-gap: 15px;
  }
  .contents__item--external-link a{
    width: calc((100% - 15px - 15px) / 3);
  }
  .contents__item--alert{
    margin: 15px 0;
    padding: 15px;
  }
  .contents--cv{
    padding: 30px 0;
  }
  .contents--cv .c-button--primary-blue{
    margin-top: 30px;
  }
}

@media (max-width: 767px) { /*スマホ*/
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .contents__inner{
    padding: 0 4vw;
  }
  .contents__intro{
    padding: 11vw 0 16vw 0;
    margin-top: -3vw;
    font-size: 4.27vw;
  }
  .contents--buypc h2,.contents--buyparts h2,.contents--entry h2{
    padding: 16vw 0;
  }
  .contents__item{
    margin-bottom: 4vw;
    padding: 4vw;
  }
  .contents__item:before{
    width: 24vw;
    height: 24vw;
    border-top: 12vw solid var(--dp-color);
    border-right: 12vw solid transparent;
    border-bottom: 12vw solid transparent;
    border-left: 12vw solid var(--dp-color);
  }
  .contents__item:after{
    left: 5.33vw;
    top: 0;
    font-size: 7.47vw;
  }
  .contents__item h3{
    height: 24vw;
    margin: -4vw 0 0 -4vw;
    padding-left: 24vw;
    font-size:4.8vw;
  }
  .contents__item-text-box{
    width: 100%;
    margin: 0;
  }
  .contents__item-text-box img{
    margin: 0 auto;
    margin-bottom: 4vw;
  }
  .contents__item--external-link{
    margin: 4vw 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4vw;
  }
  .contents__item--external-link a{
    width: calc((100% - 4vw) / 2);
  }
  .contents--buypc h2{
    background: url(../images/bg_buypc.webp) no-repeat 50% 50%;
    background-size: 50%;
  }
  .contents--buyparts h2{
    background: url(../images/bg_buyparts.webp) no-repeat 50% 50%;
    background-size: 50%;
  }
  .contents--cv{
    padding: 8vw 0;
  }
  .contents--cv .c-button--primary-blue{
    width: 100%;
  }
  .contents--cv:before{
    margin-bottom: 8vw;
  }
  .contents--cv .c-button--primary-blue{
    margin-top: 4vw;
  }
  .contents__item--alert{
    margin: 4vw 0;
    padding: 4vw;
  }
}