:root {
  --color-primary: #000;
  --color-gray: #7c8e9e;
  --color-light-gray: #eeeeee;
  --color-bg-gray: #f5f5f5;
  --color-blue: #001eff;
  --color-yellow: #fadc43;
  --color-white: #fff;
  --font-family: 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); color: var(--color-primary); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.pc-only { display: block; }
.sp-only { display: none; }
@media (width <= 768px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

/* STICKY HEADER */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95); /* 少し透け感のある白背景 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transform: translateY(-100%); /* 初期は上部に隠す */
  transition: transform 0.4s ease; /* アニメーション速度 */
}

/* JavaScriptでこのクラスが付与されると表示される */
.sticky-header.is-active {
  transform: translateY(0);
}

.sticky-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 64px;
  max-width: 1152px;
  margin: 0 auto;
}

.sticky-header__logos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.sticky-header__logos img { height: 24px; }
.sticky-header__cross { font-size: 20px; color: var(--color-primary); }

.btn-store-small {
  background: var(--color-blue);
  color: #fff;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 100px;
  border: solid 1px var(--color-blue);
  transition: 0.3s ease;
}
.btn-store-small:hover {
  background-color: #fff;
  color: var(--color-blue);
}

/* スマホ表示用 */
@media (width <= 768px) {
  .sticky-header__inner { padding: 10px 20px; }
  .sticky-header__logos { gap: 5px; }
  .sticky-header__logos img { height: 16px; }
  .btn-store-small { padding: 6px 16px; font-size: 12px; }
}




/* PAGE TOP BUTTON */
.page-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #001EFF;
  border:solid 1px #001EFF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* JavaScriptでこのクラスが付与されると表示される */
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background-color: #ffffff;
  border:solid 1px #001EFF;
  color:#001EFF;
}

/* スマホ表示用 */
@media (width <= 768px) {
  .page-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
  .page-top svg {
    width: 20px;
    height: 20px;
  }
}




/* 初期状態：透明にして少し下へ配置 */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/*
エフェクト
-------------------------------------------*/
.effect {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
	transform: translateY(20px);
	-webkit-transform: translateY(20px);  
    -moz-transform: translateY(20px); 
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}

.effect.start {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	transform: translateY(0px);
	-webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);    
}
/* Common */
/* h2, h3, h4, p { word-break: auto-phrase; }/* 

/* HERO */
.hero {
  position: relative;
  background-image: url('img/brand_bg.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 876px;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero__logos {
  display: flex;
  align-items: center;
  gap: 46px;
}
.hero__logos img { height: 48px; }
.hero__cross { font-size: 40px; color: #fff; font-weight: normal; }
.hero__copy { font-size: 20px; font-weight: 500; color: #fff; letter-spacing: 6px;}

/* TOP */
.top-sec {
  padding: 64px;
}
.top-sec__inner {
  max-width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: stretch;
}
.top-sec__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 1152px;
  align-items: flex-start;
}
.top-sec__titles h2 { font-size: 46px; color: var(--color-gray); margin-bottom: 40px; line-height: 1.3; }
.top-sec__titles .en { font-size: 20px; color: var(--color-gray); }
.top-sec__text { font-size: 20px; font-weight: 700; line-height: 1.8; width: 340px; }
.top-sec__img img { width: 100%; }

/* REASON */
.reason {
  background-color: var(--color-light-gray);
  padding: 120px 0;
}
.reason__inner {
  max-width: 916px;
  margin: 0 auto;
  align-items: center;
  gap: 30px;
}
.reason__text-box { flex: 1; display: flex; flex-direction: row; gap: 10px;align-items: flex-start; }
.reason__text-box h3 { width: 50%;font-size: 30px; font-weight: 700; margin-bottom: 30px; line-height: 1.4; }
.reason__desc p { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.reason__graf { width: 100%; margin: 40px 0 0 0; }
.reason__desc { width: 50%; /* 幅を半分にする（お好みで調整） */
}

/* BRAND */
.brand {
  padding: 120px 64px;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin:0 auto;
  display:flex;
}
.brand__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 1152px;
    align-items: flex-start;
}
.brand__title-box h2 { font-size: 46px; color: var(--color-gray); line-height: 1.3; }
.brand__desc { font-size: 20px; font-weight: 700; line-height: 1.6; max-width: 325px; }
.brand__cards {
  display: flex;
  gap: 64px;
  max-width:1152px;
  width: 100%;
}
.brand-card {
  width: 544px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.brand-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}
.brand-card__tag { padding: 5px 15px; border-left: 1px solid #000; border-right: 1px solid #000; font-size: 16px; font-weight: 500; }
.brand-card__logo { height: 48px; }
.brand-card__pin { display: flex; align-items: center; gap: 5px; color: #7C8E9E; padding: 4px 16px; border-radius: 4px; font-size: 14px; border: solid 1px #7C8E9E; }
.brand-card__pin img { width: 20px; display: inline-block; vertical-align: middle; }
.brand-card__footer { width: 424px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.brand-card__footer p { font-size: 16px; font-weight: 700; margin-bottom: 10px; text-align: left; }
.brand-card__footer a { color: var(--color-blue); font-size: 16px; font-weight: 700; }





/* IMG BANNER */
.img-banner {
  padding: 0;
  margin: 0 auto;
}

/* QUALITY */
.quality {
  background-color: var(--color-gray);
  padding: 100px 64px 60px;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin:0 auto;
  display:flex;
}
.quality__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 1152px;
    align-items: flex-start;
}
.en-title { font-size: 20px; color: var(--color-white);text-decoration: underline; }
.quality__header h2 { font-size: 38px; color: var(--color-white); }
.quality__content {
  display: flex;
  width: 100%;
  background: var(--color-white);
  padding: 30px;
  max-width: 1152px;
}
.quality__text-box {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  width:50%;
}
.quality__tag { background: var(--color-gray); color: #fff; padding: 6px 20px; font-size: 20px; font-weight: 700; }
.quality__text-box h3 { font-size: 24px; color: var(--color-gray); }
.quality__text-box p { font-size: 16px; font-weight: 700; }
.quality__img { width: 50%; }

/* FIT */
.fit {
  background-color: var(--color-gray);
  padding: 0 64px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fit__inner {
  display: flex;
  width: 100%;
  background: var(--color-white);
  padding: 30px;
  max-width: 1152px;
}
.fit__text-box {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
  width:50%;
}
.fit__tag { background: var(--color-gray); color: #fff; padding: 6px 20px; font-size: 20px; font-weight: 700; }
.fit__text-box h3 { font-size: 24px; color: var(--color-gray); }
.fit__text-box p { font-size: 16px; font-weight: 700; }
.fit__img { width: 50%; }

/* DESIGN */
/* ==============================
   ベーススタイル (主にPC向け)
   ============================== */
.design {
  padding: 100px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: hidden; 
}

.design__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  max-width: 1152px;
  align-items: flex-start;
}

.design__header h2 { 
  font-size: 38px; 
  color: #7C8E9E; 
  line-height: 1.4;
  margin: 0;
}

.design__header .en-title { 
  color: #7C8E9E; 
  font-weight: normal;
  text-decoration: underline;
}

.design__text {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 1152px;
}

.design__text p { 
  flex: 1; 
  font-size: 16px; 
  font-weight: 700; 
  color: #000; 
  line-height: 1.6;
  margin: 0;
}

/* ==============================
   スライダー用スタイル (JS制御対応)
   ============================== */
.design__slider-wrapper {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* ドラッグ時のカーソル設定 */
  cursor: grab;
  /* 文字選択などを防ぐ */
  user-select: none;
  -webkit-user-select: none;
}

.design__slider-wrapper:active {
  cursor: grabbing;
}

.design__models {
  display: flex;
  gap: 20px;
  width: max-content;
  /* CSSアニメーションはJSで制御するため削除し、transformを初期化 */
  transform: translateX(0px); 
  /* スワイプ中のカクツキを防ぐためwill-changeを設定 */
  will-change: transform;
}

.design__models img { 
  height: 507px; 
  width: auto; 
  object-fit: cover; 
  /* 画像のドラッグによるブラウザのデフォルト動作を防ぐ */
  pointer-events: none;
}

/* PC/SP 画像切り替え */
.is-mobile {
  display: none; 
}

/* ==============================
   レスポンシブスタイル (スマホ・タブレット向け)
   ============================== */
@media screen and (max-width: 768px) {
  .design {
    padding: 60px 20px; 
    gap: 30px;
  }
  .design__header {
    flex-direction: column; 
    gap: 16px;
  }
  .design__header h2 { 
    font-size: 24px; 
  }
  .design__text {
    width: 100%; 
    flex-direction: column; 
    gap: 20px;
  }
  .design__models img { 
    height: 300px; 
  }
  .is-desktop {
    display: none; 
  }
  .is-mobile {
    display: block; 
  }
}





/* ITEM */
.item {
  display: flex;
  justify-content: space-between;
  padding: 100px 64px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 60px;
}
.item__info {
  width: 389px;
  display: flex;
  flex-direction: column;
  gap: 10px;
	position: sticky;
	padding-top: 50px;
  top: 60px; /* ブラウザ上部で止まる位置（ヘッダーがある場合はその高さを考慮してください） */
  align-self: flex-start; /* フレックスコンテナ内で要素が縦に伸びるのを防ぐために重要です */
}
.item__tags { display: flex; gap: 10px; }
.item__tags span { background: var(--color-gray); color: #fff; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.item h3 { font-size: 30px; font-weight: 700; }
.item h4 { font-size: 16px; font-weight: 700; line-height: 1.4; }
.item__price { font-size: 16px; font-weight: 700; }
.item__specs { border-top: 1px solid #CAD5DF; margin-top: 20px;color:#7C8E9E; }
.item__specs li { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid #CAD5DF; font-size: 16px; font-weight: 500; }
.btn-store { display: flex; justify-content: space-between; align-items: center; background: var(--color-blue); color: #fff; padding: 10px 20px; font-size: 18px; font-weight: 500; margin-top: 20px;border-radius: 100px;transition: 0.3s;border:solid 1px #001EFF; }
.item__images { width: 743px; }
.item__images img { padding-bottom:10px }
.item--2{border-top:solid 1px #000000;}
.btn-store:hover {
            background-color: #ffffff;
	color:#001EFF;
	border:solid 1px #001EFF;
            transition: 0.3s ease;
        }


@media screen and (max-width: 768px) {
  .item {
    flex-direction: column; /* スマホでは情報と画像を縦に並べる */
    padding: 40px 20px; /* スマホ用に余白を狭くする */
  }
  .item__info,
  .item__images {
    width: 100%; /* スマホでは横幅を100%にする */
  }
  .item__info {
    position: static; /* sticky解除 */
    align-self: auto; /* リセット */
  }
}



/* LINK SEC */
.link-sec {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.link-bg-top { width: 100%; display: block; }
.link-bg-bottom { width: 100%; display: block; }
.link-sec__content {
  width: 100%;
  padding: 64px;
  display: flex;
  justify-content: center;
}
.link-sec__box {
  background: #6c879f;
  padding: 100px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.link-sec__tag { border:solid 1px var(--color-yellow); color: #FADC43; padding: 5px 20px; font-size: 26px; font-weight: 700; }
.link-sec__logos { display: flex; align-items: center; gap: 40px; }
.link-sec__logos img { height: 48px; }
.link-sec__copy { font-size: 24px; font-weight: 700; color: #fff; }
.btn-buy { background-color: #001EFF;
	border:solid 1px #001EFF;
	color: #ffffff;
    padding: 25px 60px;
    font-size: 34px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    transition: 0.3s ease;
    border-radius: 100px;
line-height: 1; }
.btn-buy:hover{
	            transition: 0.3s ease;
            background-color:#ffffff;
	color:#001EFF;
		border:solid 2px #001EFF;

}
.link-sec__date { text-align: center; color: #fff;
   border-top: solid 1px #ffffff;
    border-bottom: solid 1px #ffffff;
    padding: 10px 20px;
    display: flex;
    gap: 20px; }
.date { font-size: 20px; font-weight: 700; }
.date-sub { font-size: 20px; font-weight: 700; }
.link-sec__note { font-size: 14px; color: #fff; }

/* FOOTER */
.footer {
  padding: 60px 64px;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1152px;
  margin: 0 auto;
}
.footer__logo { height: 33px; }

/* SP Responsive */
@media (width <= 768px) {
  .hero { height: 100vh; height: 100svh;background-size: cover; padding: 40px; align-items: flex-end;background-image: url('img/brand_bg_sp.jpg'); }
  .hero__logos { flex-direction: column; gap: 0; }
  .hero__logos img { width: 100%; height: auto; }
  .hero__cross { font-size: 30px; }
  .hero__inner {gap:30px;}
  .hero__copy {font-size: 3vw;}

  .top-sec { padding: 60px 20px; }
  .top-sec__content { flex-direction: column; gap: 20px; width: 100%; }
  .top-sec__titles {margin: 0 auto;}
  .top-sec__titles h2 { font-size: 30px; text-align: center; margin:0 0 20px 0;}
  .top-sec__text { width: 100%; font-size: 16px; text-align: center; }
  .top-sec__titles .en {text-align: center;font-size: 14px;}

  .reason {padding:60px 0;}
  .reason__inner { flex-direction: column; padding: 0 30px; }
  .reason__text-box{display: block;}
  .reason__text-box h3 { font-size: 20px;width:100%; }
  .reason__graf { width: 100%; }
  .reason__desc {width:100%;}

  .brand{padding:60px 30px;}
  .brand__header { flex-direction: column; width: 100%; gap: 20px; }
  .brand__title-box{width: 100%;}
  .brand__title-box h2 { font-size: 26px;text-align: center; }
  .brand__cards { flex-direction: column; gap: 40px; padding: 0 20px; }
  .brand-card { width: 100%; }
  .brand-card__footer { width: 100%; }
  .brand-card__footer p{font-size:14px;}
  .brand__desc{font-size:16px; text-align: center;margin: 0 auto;}
  .brand__cards .brand-card:nth-child(2) { border-top: solid 1px #cccccc; padding-top: 40px; /* 境界線と下の要素（2つ目のカード）の間の余白 */}


  .quality { padding: 60px 30px 30px; gap:30px; }
  .quality__header { flex-direction: column; width: 100%; gap: 10px; }
  .quality__header h2 { font-size: 24px; }
  .quality__content { flex-direction: column; width: 100%; padding: 10px; }
  .quality__text-box { padding: 20px; width:100%;}
  .quality__text-box p { font-size: 16px;}
  .quality__text-box h3 { font-size: 20px; }
  .quality__img { width: 100%; }
  .en-title {font-size: 14px;}

  .fit { padding: 0 30px 60px; }
  .fit__inner { flex-direction: column-reverse; width: 100%; padding: 10px; }
  .fit__text-box { padding: 20px; width:100%;}
  .fit__text-box h3 { font-size: 20px; }
  .fit__text-box p { font-size: 16px;}
  .fit__img { width: 100%; }

  .design { padding: 60px 30px; }
  .design__header { flex-direction: column-reverse; width: 100%; gap: 10px; }
  .design__header h2 { font-size: 24px; }
  .design__text { flex-direction: column; width: 100%; }
  .design__models img { height: 300px; width: auto; }
  .design__text p{font-size: 16px;}

  .item { flex-direction: column; padding: 40px 20px; gap: 30px; }
  .item__info { width: 100%;	padding-top: 0; }
  .item__images { width: 100%; }

  .link-sec__content { padding: 20px 20px; }
  .link-sec__box { width: 100%; padding: 60px 30px; }
  .link-sec__logos { flex-direction: column; gap: 0; }
  .link-sec__tag { font-size: 18px; }
  .link-sec__copy { font-size: 16px; text-align: center; }
  .link-sec__logos img{height:38px;}
  .link-sec__note{text-align: center;}
  .link-sec__date{display:block;}
  .btn-buy { font-size: 20px; padding: 20px 30px; text-align: center; }

  .footer{padding:10px 30px 30px;}
  .footer__inner { flex-direction: column; gap: 20px; }
  .footer__logo {width: 100%;height:auto;}
}