@charset "UTF-8";
/* ------------------------　↓ 追記はここから　↓ ------------------------- */
@charset "UTF-8";

html {
 scroll-behavior:smooth;
}

body {
 background:#000000;
 line-height:1;
 font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Osaka, sans-serif;
}

p,
p span {
 font-size:16px;
 line-height:normal;
}

img {
 width:100%;
 height:auto;
 max-height:100%;
}

.logoimg {
 display:block;
 margin:0 auto;
}

.logoimg img {
 width:auto;
 height:max(35px,2.5vw);
}

/*main*/
main {
 width:100%;
 max-width:1300px;
 margin:auto;
 background-color:#000000;
}

.main_cont_full {
 width:100%;
}



/*モーダルウィンドウ*/
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
 /* font-size: 0; */
}

.content {
 margin:0 auto;
 padding:40px;
}

.modal {
 display:none;
 position:fixed;
 top:0;
 right:0;
 z-index:99999;
 width:100%;
 height:100vh;
}

.modal__bg {
 position:absolute;
 width:100%;
 height:100vh;
 background:rgba(0, 0, 0, .8);
}

.modal__content {
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%, -50%);
 width:90%;
 max-width:1000px;
 padding:15px;
 background:#ffffff;
}

a.js-modal-close {
 float:right;
 width:7%;
 padding:.5rem;
 border-radius:6px;
 background-color:#2c2c2c;
 color:#ffffff;
 text-align:center;
}

/*タブ切り替え*/
.tab-group {
 display:flex;
 justify-content:center;
 background:#ffffff;
}

.tab-group .tab {
 flex-grow:1;
 list-style:none;
 padding:5px;
 border:solid 1px #cccccc;
 font-weight:bold;
 font-size:16px;
 line-height:normal;
 text-align:center;
 cursor:pointer;
}

.tab.is-active {
 background:#338a41;
 color:#ffffff;
}

.panel-group {
 height:auto;
 border-top:none;
}

.panel-group .panel {
 display:none;
 font-size:14px;
 line-height:normal;
}

.panel-group .panel.is-show {
 display:block;
}

.panel-group .tab.is-active {
 transition:all .2s ease-out;
}

/* イントロダクション */
.product-intro {
 display:flex;
 flex-direction:column;
 position:relative;
 max-width:1100px;
 margin:0 auto 20px;
 padding:3rem 0;
 border:10px solid #2697d4;
 background-color:#000000;

 gap:1rem;
}

.product-intro__header {
 position:relative;
 width:100%;
 margin-top:2rem;
 margin-bottom:-.8rem;
 color:#2697d4;
 font-size:clamp(2.2rem, 8.6vw, 7rem);
 font-family:fantasy;
 text-align:center;
}


/* Product Item Block */
.product-item {
 display:flex;
 flex-direction:column;
 align-items:center;
 padding:30px;

 gap:1rem;
}

.product-item:last-child {
 border-bottom:none;
}

.product-item__content,
.product-item__content--2 {
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 align-items:center;
 width:100%;

 gap:30px;
}

.product-item__image {
 flex-shrink:0;
 width:60%;
}

.product-item__image img {
 max-width:100%;
 height:auto;
 border-radius:8px;
}

.product-item__details {
 flex:1;
}

.product-item__title {
 margin-bottom:15px;
 color:#ffffff;
 font-weight:bold;
 font-size:clamp(1.6rem, 2vw, 2rem);
 line-height:2.5rem;
}

.product-item__description {
 margin-bottom:15px;
 color:#ffffff;
 font-size:clamp(.8rem, 1.4vw, 2rem);
 line-height:1.6;
}

.product-item__specs {
 margin-bottom:20px;
 color:#ffffff;
 font-size:clamp(.8rem, 1.6vw, 1rem);
 line-height:1.5;
}

.product-item__specs-line {
 margin-bottom:3px;
}

/* Button Block */
.btn {
 display:inline-block;
 width:clamp(10rem, 30%, 20rem);
 padding:10px 30px;
 border:2px solid #ffffff;
 background-color:transparent;
 color:#ffffff;
 font-weight:400;
 font-size:clamp(.8rem, 2vw, 2rem);
 font-family:fantasy;
 text-decoration:none;
 text-align:center;
 cursor:pointer;
 transition:all .3s ease;
}

.btn:hover {
 background-color:#ffffff;
 color:#000000;
}

/* Product Lineup Block */
.product-lineup {
 max-width:1200px;
 margin:6rem auto 0;
 background-color:#000000;
}

.product-lineup__item {
 padding:10px 0;
 border-bottom:1px solid #333333;
}

.product-lineup__item:last-of-type {
 margin-bottom:2rem;
 border-bottom:3px solid #ffffff;
}

.product-lineup__content {
 display:flex;
 align-items:center;

 gap:20px;
}

.product-lineup__number {
 min-width:80px;
 color:#00bfff;
 font-weight:100;
 font-size:clamp(3rem, 7vw, 9rem);
 font-family:fantasy;
 text-shadow:2px 2px 4px rgba(0, 0, 0, .5);
}

.product-lineup__info {
 display:flex;
 flex:1;
 justify-content:space-between;
 align-items:flex-end;

 gap:1rem;
}

.product-lineup__tips {
 margin-bottom:6px;
 color:#fff100;
 font-weight:bold;
 font-size:clamp(16px, 3vw, 22px);
 letter-spacing:.1rem;
}
@media (min-width:769px) {
 .product-lineup__tips {
  margin-bottom:4px;
 }
}

.product-lineup__title {
 margin-bottom:8px;
 color:#ffffff;
 font-weight:bold;
 font-size:clamp(2rem, 3vw, 3rem);
}

.product-lineup__details {
 display:flex;
 flex-direction:column;
 font-size:12px;

 gap:2px;
}

.product-lineup__store {
 font-size:clamp(.8rem, 2vw, 2rem);
}

.product-lineup__color {
 font-weight:bold;
 font-size:clamp(.8rem, 1.2vw, 1.2rem);
 text-align:end;
}   

.product-lineup__color,
.product-lineup__store {
 color:#ffffff;
}

.product-lineup__price {
 margin-top:5px;
 color:#ffffff;
 font-weight:bold;
 font-size:clamp(.8rem, 2vw, 2rem);
}

.product-lineup__tax {
 font-weight:bold;
 font-size:clamp(.4rem, 1vw, 1rem);
}

.slider {
 width:70%;
 margin:auto;
}

/* Responsive Design */
@media (max-width: 768px) {
 .product-item__title {
  text-align:center;
 }

 .product-item__description {
  text-align:center;
 }

 .product-lineup__info {
  flex-direction:column;
  align-items:center;
 }

 .product-lineup__details {
  display:flex;
  flex-direction:row;
  font-size:12px;

  gap:1rem;
 }

 .product-intro {
  max-width:none;
  margin:0 10px;
  padding:1rem 0;
 }

 .product-intro__header {
  padding:0 0 9px;
  font-size:clamp(1rem, 10vw, 7rem);
 }

 .product-lineup__price {
  margin-top:0;
 }

 .product-item {
  padding:20px;
 }

 .product-item__content {
  flex-direction:column;

  gap:20px;
 }

 .product-item__content--2 {
  flex-direction:column-reverse;

  gap:20px;
 }

 .product-item__image {
  align-self:center;
  width:100%;
 }

 .product-lineup {
  max-width:1000px;
  margin:20px auto;
  background-color:#000000;
 }

 .product-lineup__item {
  padding:15px 20px;
 }

 .product-lineup__content {
  flex-direction:column;
  text-align:center;

  gap:15px;
 }

 .product-lineup__number {
  font-size:36px;
 }
} 

/* フッター */

.footer {
 max-width:1200px;
 margin:4rem auto;
 background-color:#000000;
 color:#ffffff;
}

.footer__text {
 color:#ffffff;
 font-weight:bold;
 font-size:clamp(.6rem, 1.4vw, 1.8rem);
 text-align:center;
}


@media screen and (max-width:781px) {
 .sp {
  display:block;
 }

 .pc {
  display:none;
 }

 .sp_br {
  display:block;
 }
}

@media screen and (min-width:781px) {
 .sp {
  display:none;
 }

 .pc {
  display:block;
 }
}