@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

:root {
  --color-purple:#51007a;
  --color-purplehover:#c16ac0;
  --color-yellow:#ff0;
  --color-back:#EAEAEA;
  --margin-s:10px;
  --margin-m:20px;
  --margin-l:50px;
}
/*-------------------------------------
　基本設定（htmlタグ、id指定）
---------------------------------------*/
html{
  scroll-behavior: smooth;
}
#container {
  margin: 0 auto;
  width:100%;
  text-align:center;
}
#lp_page {
  margin: 0 auto;
  padding:0;
  line-height: 1.75;
  position: relative;
  font-family: 'Noto Sans JP';
  width:100%;
  color:#000;
}
#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 !important;
  display: block;
  font-size: 12px;
  line-height: 1.5em;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  #lp_page {
    font-size: 3.6vw;
    margin: 0 auto;
    position: relative;
    width: 100%;
  }
  #lp_page img {
    max-width: 100%;
    height: auto;
  }
  #pagetop {
    right: 2%;
  }
}

.liner {
  background:linear-gradient(transparent 60%, var(--color-yellow) 60%);
}

/*-------------------------------------
　コンテナ
---------------------------------------*/
.contents_inner {
  margin: 0 auto;
  width: calc(100% - 30px);
  max-width: 1050px;
}
@media screen and (max-width: 767px) {
  .contents_inner {
    width: calc(100% - 30px);
  }
}


/*-------------------------------------
　ボタン
---------------------------------------*/
.btn-link {
  margin-top:auto;
}
.btn-link a {
  display: block;
  margin: 0 auto;
  color: #fff !important;
  background: var(--color-purple);
  text-decoration: none;
  position: relative;
  width: 70%;
  box-sizing: border-box;
  text-align: center;
  transition: background .3s, color .3s;
}
.btn-link a:hover {
  background: #c16ac0;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

.btn-link a::after{
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  width: 20px;    
  height: 20px; 
  border-top: 4px solid #fff; 
  border-right: 4px solid #fff; 
  transform: rotate(45deg); 
}

.btn-link.btn_sizeL a {
  border-radius:20px;
  padding: 10px 0;
  font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2.125rem);
}
.btn-link.btn_sizeM a {
  border-radius:15px;
  padding: 5px 0;
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
}
@media screen and (max-width: 767px) {
  .btn-link a {
  border-radius:15px;
  width: 80%;
  }
  .btn-link a::after{
  right: 20px;
  width: 10px;    
  height: 10px; 
  border-top: 2px solid #fff; 
  border-right: 2px solid #fff; 
  }
}



/*-------------------------------------
　パンくず
---------------------------------------*/
.bread_crumb_top_wrapper {
  margin:0;
}
.breadCrumb {
  margin: 0 auto;
  width: calc(100% - 30px);
  max-width: 1050px;
  padding-top:10px;
}
@media screen and (max-width: 767px) {
  .bread_crumb_top_wrapper {
    display:none;
  }
}

/*-------------------------------------
　キービジュアル
---------------------------------------*/
.kv-image {
  position: relative;
  width: 100%;
}
.kv-image .kv-image_inner {
  margin: 0 auto;
}
.kv-image .kv-image_inner img {
  width: 100%;
}

/*-------------------------------------
　各セクション
---------------------------------------*/
#lp_page section{
    margin-bottom:var(--margin-l);
}
.contents_inner h1{
    margin-bottom:var(--margin-m);
    font-size: clamp(2.25rem, 1.932rem + 1.59vw, 3.125rem);
    font-weight: 900;
    text-align: center;
}
.contents_inner h1 span {
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2em;
    line-height: 1.4;
    transform: skewX(-14deg);
}
.contents_inner h1 span::before,
.contents_inner h1 span::after {
    margin-left:15px;
    margin-right:15px;
    content: "";
    width: 90px;
    border-top: 1px solid #000;
}
@media screen and (max-width: 767px) {
  .contents_inner h1 span::before,
  .contents_inner h1 span::after {
    margin-left:10px;
    margin-right:10px;
    width: 20px;
  }
}

.contents_inner h2{
  margin-bottom:var(--margin-m);
  font-size: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);
  font-weight: 900;
  text-align: left;
}
.contents_inner h3{
  margin-bottom:var(--margin-s);
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: 900;
  text-align: left;
}

.content_box{
  margin-bottom:var(--margin-l);
}

.content_box img{
  margin-bottom:var(--margin-m);
  width:100%;
  border:1px solid #000;
}
.detail_text {
  font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  letter-spacing: .015em;
  font-weight: 300;
  text-align:left;
}
.detail_text p{
  margin-bottom:var(--margin-m);
}
.detail_text p:last-child{
  margin-bottom:0;
}

/*-------------------------------------
　ポイント
---------------------------------------*/
.contents_point{
  padding-top:var(--margin-l);
  padding-bottom:var(--margin-l);
  background:var(--color-back);
  background: linear-gradient(-30deg, rgba(150, 150, 150, 0.5) 0%, rgba(234, 234, 234, 1) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(234, 234, 234, 1) 60%, rgba(150, 150, 150, 0.5) 100%);
}
.contents_point h3{
  font-size:clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  color:var(--color-purple);
  text-align: center;
}
.point_list{
  display:flex;
  flex-wrap:wrap;
  width:100%;
}
.point_list dl{
  border-radius:20px;
  background: #fff;
  border:2px solid var(--color-purple);
  margin:10px;
  width:calc(50% - 20px);
  box-sizing:border-box;
  font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  overflow: hidden;
}
.point_list dt{
  background: var(--color-purple);
  padding:5px;
  color:#fff;
}
.point_list dd{
  padding:10px;
}


#pc-case .contents_point h3{
  font-size:clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
  color:var(--color-purple);
  text-align: center;
}
#pc-case .point_list dl{
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
}

@media screen and (max-width: 767px) {
  .contents_point{
    padding-top:var(--margin-m);
    padding-bottom:var(--margin-m);
  }
  .point_list{
    display:block;
  }
  .point_list dl{
    margin:10px auto;
    width:90%;
    box-sizing:border-box;
  }
  .point-list dd{
    text-align:left;
  }
  
}

/*-------------------------------------
　クーラー・ケースファン・電源・マイク
---------------------------------------*/
.lead-txt{
  padding:var(--margin-l) 0;
  font-size:clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  color:var(--color-purple);
  text-align: center;
  font-weight:900;
}

.product-box_list{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  justify-content:space-between;
}
.product-box_list .product_box{
  margin-top:var(--margin-m);
  margin-bottom:var(--margin-m);
  width:calc(50% - 40px);
  box-sizing:border-box;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 767px) {
  .lead-txt{
    padding:0 0 var(--margin-m) 0;
  }
  .product-box_list{
    display:block;
  }
  .product-box_list .product_box{
    margin-top:0;
    margin-bottom:var(--margin-l);
    width:100%;
  }
}

.product-box_list .product_box img{
  margin-bottom:var(--margin-m);
  width:100%;
  border:1px solid #000;
}

.product-box_list .product_box .btn-link a {
  margin-top:var(--margin-m);
}
@media screen and (min-width: 768px) {
  .product-box_list .product_box .btn-link a {
    width: 100%;
  }
}


/*-------------------------------------
　デザインの統一感
---------------------------------------*/
.unit-text{
  background:#fff;
  padding:20px;
  border:2px solid var(--color-purple);
  color:var(--color-purple);
  border-radius:20px;
  font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
  letter-spacing: .015em;
  font-weight: 600;
  text-align:center;
}

.unit-image{
  padding-top:var(--margin-l);
  padding-bottom: var(--margin-l);
  display:flex;
  justify-content:space-between;
}
.unit-image li{
  width:49%;
  border-radius:10px;
  overflow:hidden;
}
.unit-image li img{
  width:100%;
}

@media screen and (max-width: 767px) {
  .unit-text{
    text-align:left;
  }
  .unit-image{
    padding-top:var(--margin-m);
    padding-bottom: var(--margin-m);
  }
}


/*-------------------------------------
　youtube埋め込み
---------------------------------------*/
.movie-box {
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 4%;
  margin: 0 auto 80px;
}
.movie-title {
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 10px;
}
.movie-wrap {
  width: 735px;
  min-width: 300px;
  aspect-ratio: 16/9;
}
/* 2スパン用 */
/* .movie-wrap {
  width: calc((100% - 40px) /2);
  aspect-ratio: 16/9;
} */
.movie-wrap iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1024px) {
  .movie-title {
  font-size: 25px;
}
  .movie-wrap {
    width: 70%;
  }
}

@media screen and (max-width: 767px) {
  .movie-title {
    font-size: 18px;
  }
  .movie-box {
    flex-direction: column;
    gap: 20px;
    margin: 0 auto 40px;
  }
  .movie-wrap {
    width: 100%;
  }
}