html, body {
  margin: 0;
  padding: 0;

}

body {
  position: relative;
  background-color: #292F60;
}
/* body::before {
  background-image: url(../images/bg01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
} */
/* @media screen and (min-width: 1025px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url(../images/bg01.jpg);
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: 70%;
    z-index: -1 !important;
    pointer-events: none;
    display: block;
  }
} */

.bgparts{
  position:fixed;
  z-index:1;
  top:0;
  left:0;
  right:0;
  margin:0;
  text-align: center;

}

.bgparts img{
  width: 60%;
  height: auto;

}

@media screen and (max-width:768px){
  .bgparts{

  top:20%;


}
  .bgparts img{
    width:100%;
  height: auto;
  
  }
}


#al-group-global-footer2021{
  position: relative;
z-index: 2;
}




.style-options-wrapper {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
 bottom: 90px;
  z-index: 9999;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  background: transparent;
}
.style-options-wrapper.open {
  display: flex;
}
/* =========================
   Base
========================= */

.lpwrap ul,
.lpwrap a,
.lpwrap li {
  list-style: none;
  text-decoration: none;
  color: #333;
}

.lpwrap {
  font-family: "Noto Sans JP", sans-serif;
  /* padding-bottom: 100px; */
 position: relative;
  z-index: 2;
}
.jfa_item__bg{ 
  /* background: #1c2253; */
    margin: 0 auto;
    padding-bottom: 80px;
/* 
      background-color:#1c2253 ; */
  backdrop-filter: blur(2px);

  
     background:linear-gradient(110deg, #272f6a 0%, #0d112d 100%);
     background: linear-gradient(
    110deg,
    rgba(33, 40, 92, 0.3) 0%,
    rgba(6, 8, 25, 0.3) 100%
);
}
.lpwrap img {
  max-width: 100%;
}


.lpwrap #reason6 img {
  max-width: 80%;
  vertical-align:;
}

.lpwrap aside {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.lpwrap .aside_notes {
  text-align: center;
  margin-top: 8px;
  color: #656565;
  font-size: 12px;
  letter-spacing: 0.01em;
}

 /* Style選択エリア */

/* Styleボタン */
.style-selector button{
color: #fff;
background: none;
border: none;
border-style:none;
outline: none !important;
box-shadow: none !important;
cursor: pointer;
color: inherit;

}
body .style-selector button:focus{

	outline: none !important;
	box-shadow: none !important;
	cursor: pointer;
    color: inherit;
}
.style-selector {
	position: fixed;
	bottom: 20px;
	right: -8%;
	transform: translateX(-50%);
	z-index: 998;
	color: #fff;
      box-shadow:
    0 0 40px rgba(255,255,255,0.6),
    0 0 80px rgba(255,255,255,0.3),
    0 0 120px rgba(255,255,255,0.15);

  }
  
  /* ボタン自体に見た目を持たせ、全体をクリック可能に */
  .style-selector button {
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-weight: 600;
	background-color: #000000;
	padding: 13px 70px;
	border-radius: 50px;

	display: flex;
	align-items: center;
	color: #fff;
	gap: 10px;
	cursor: pointer;
	border: none;

  }
  .style-selector button {
	min-width: 262px; /* または width: 200px; にする */
  }

.style-options {
	position:relative;
    position: fixed;
   bottom: 100px;
    left: 50%;
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
    background-color: rgba(218, 218, 218, 0.8);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    width: 86%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 997;
    overflow-y: auto;
    overflow-x: hidden;

    max-height: 540px;
    transition: all 0.5s ease;
    opacity: 0;
	pointer-events: none; /* 👈 クリックできないようにする */
    height: auto; /* 開閉用 */
}

.style-options.open {
	pointer-events: auto; /* 👈 開いたときだけクリックできる */
  }
.style-selector label {
	padding: 0 20px;
}

.style-options a {
    width: 100%;
    height: auto;
	overflow: hidden;
	border-radius: 0px;

}

.style-options img {
	border-radius: 0px;
	width: 100%;

	object-fit: cover;
}

/* 展開時に付くクラス */
.style-options.open {
    height: auto; /* ここだけあなたのデザインに合わせて調整要（例: 300pxとか） */
    opacity: 1;
}

/* 非表示制御用（旧hiddenは使わない） */
.hidden {
    display: none;
}



/* =========================
   KV / About
========================= */

.lpwrap h2 {
  position: relative;
}

.lpwrap h2 .kvparts {
  position: absolute;
 top: 3vw;
  left: 1.4vw;
  right: 0;
  margin: auto;
  text-align: center;
  width: 43vw;
  animation: fade-in 3s forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lpwrap h2 .kvheart {
  position: absolute;
 top: 1.12vw;
  left: 3.2vw;
  right: 0;
  margin: auto;
  text-align: center;
  width: 34vw;
}


/* =========================
   Global Nav
========================= */

.fv_content nav ul {
    max-width: 500px;
    padding: 40px 0 80px;
    margin: 0 auto;
    display: flex
;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fv_content nav ul li {
  width: calc(100% / 4 - 20px);
  margin-bottom: 0;
  background: none;
}
.fv_content nav ul li:first-child {

  background: none;
}

.fv_content nav ul li a {
  display: block;
  text-align: center;
  padding:0;
}

.fv_content nav ul li a img {
  padding-bottom: 0px;
}



/* =========================
   About text
========================= */

.lpwrap .about_content {
  /* max-width: 700px; */
  margin: 0 auto;
  background-size: cover;
  color: #fff;
}

.lpwrap .about_content h3 {
  font-size: 24px;
  padding: 60px 0 0 30px;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0 auto 24px;
  max-width: 480px;
}

.lpwrap .about_content p {
  font-size: 16px;
  padding: 0px 0 0 30px;
  line-height: 1.85;
  font-weight: 500;
  margin: 0 auto 60px;
  max-width: 350px;
}

.lpwrap .about_content p strong {
  background: linear-gradient(to right, #FFBEBE 0%, #BFECCB 100%) left / 100% 20% no-repeat;
  font-weight: bold;
}

.lpwrap .about_content .dots {
  margin: 0 auto 60px;
}

.lpwrap .about_content .dots li {
  display: block;
  width: 6px;
  height: 6px;
  background-color: #000;
  border-radius: 50%;
  margin: 0 auto 15px;
}


/* =========================
   Section wrappers (背景)
========================= */

.section-red {
  background-color: #A23E38;
  margin-top: -6px;
}

.section-pink {
  background-color: #D7928B;
}

.section-yellow {
  background-color: #DCA85B;
}


.iframe-wrap {
	max-width: 1000px;   /* 任意：横幅制限したいなら */
	margin: 0 auto;     /* 真ん中寄せ */
	padding: 0 0 40px 0
  }
  
  .iframe-wrap iframe {
	display: block;     /* インラインをブロック化 */
	width: 100%;        /* 親に合わせる */
	height: auto;      /* 固定高さ */
	border: none;
  }


/* =========================
   STORY ブロック（PCデフォ）
========================= */
:root {
  --blue:#174aa8;
  --text:#fff;
  --gray:#d9d9d9;
}

* { box-sizing: border-box; }
body {
  margin:0;
  /* background:#fff; */
  font-family:"Noto Sans JP", sans-serif;
  
}

/* ===== セクション全体 ===== */
:root {
  --blue:#174aa8;
  --text:#fff;
}

* { box-sizing:border-box; }


/* ====== story全体 ====== */
.story {
  /* background: var(--blue); */

  color: var(--text);
  text-align: center;
  overflow:hidden;
  padding-bottom:60px;
  /* background-color: #292F60; */
}

/* ====== ヘッダー部 ====== */
.story__head {
  padding-top: 110px;
}
.story__inner {
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
}
.story__logo {
  width:200px;
  height:auto;
}
.story__title img {
  width:260px;
  height:auto;
}

/* ====== ビジュアル（スライダー）部分 ====== */
.story__visual {
  width:100%;
    display: flex
;
    justify-content: center;
    margin: 0px 0 100px;
}

.visual {
  position:relative;
  width: 100%;
  border-radius:8px;
  margin-top:3rem;
  height: 30vw;
}

.slider-wrapper {
  overflow: hidden;
  position: relative;
}

.visual__title {
  font-size: 28px;
  font-weight:800;
  text-align:center;
  margin-bottom:20px;
  line-height:1.3;
}

/* スライダー部分 */
.visual__slider {
  position: relative;
  width: 120%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  pointer-events: none;
  margin-left: -10%;

}
@media (max-width:768px) {
  .visual__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  margin-left: 0;
  overflow-x: hidden;

}
}


.visual__slides {
  width: 100%;
  transform: rotate(170deg);
  transform-origin: center;
  padding: 20px 0;
}

.visual__slides img {
  width: calc(100% - 40px);
  margin: 0 20px;
  display: block;
   transform: rotate(-170deg);
}

/* slick補正 */
.visual__slides .slick-track {
  display: flex;
  align-items: center;
}

.visual__slides .slick-list{
  overflow:inherit;
}

/* ====== コンテンツ部 ====== */
.story__content {
  width:calc(100% - 60px);
  margin:0 auto;
      padding-bottom: 60px;
  text-align: center;
  /* display: flex; */
      /* padding-top: 60px; */
          max-width: 960px;
      justify-content: center;
}
.story__box01{
  width: 100%;
}
.story__box02{
  width: 100%;
}
.story__headline {
  font-weight:900;
  font-size:30px;
  line-height:1.1;
  margin:0 0 8px;
}
.story__headline span {
  color:#c5d4f8;
}
.story__sub {
  font-size:14px;
  margin-top: 16px;
  margin-bottom:40px;
  opacity:0.8;
  line-height: 1.5;
  letter-spacing: 2px;
}
.story__title {
  font-size:80px;
  margin: 20px 0 12px 0;
  margin-bottom:12px;
  line-height: 1.5;
  font-weight: 500;
    font-family: "Noto Serif JP", serif;
  letter-spacing: 2px;

}
.story__content .story__title {
  font-size:48px;
  margin: 50px 0 12px 0;
  margin-bottom:12px;
  line-height: 1.5;
  font-weight: 500;
    font-family: "Noto Serif JP", serif;
  letter-spacing: 2px;
  padding-left:20px ;

}

.story__text {
  font-size:20px;
  line-height:2.5;
  font-weight: 300;
  letter-spacing: 2px;
    font-family: "Noto Serif JP", serif;


}

@media (max-width:1280px){
.visual {
    height: 40vw;
}
}

@media (max-width:1024px){
.visual {
    height: 55vw;
}
}

@media (max-width:768px){
.visual {
    height: 80vw;
  margin-top:0;


}
.story__content .story__title {
  font-size:40px;


}
.story__text {
  font-size:15px;
  line-height:2.5;
  font-weight: 300;
  letter-spacing: 1.2px;
    font-family: "Noto Serif JP", serif;


}
.story {
  /* background: var(--blue); */
  /* background-image: url(../images/bg01.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%; */
  color: var(--text);
  text-align: center;
  overflow:hidden;
  padding-bottom:60px;
  /* background-color: #292F60; */
}
.story__head {
    padding-top: 0px;

    z-index: 1;

}
.story__visual {
        position: absolute;
  margin: 60px 0 40px;

}
  .story__content {
  width:calc(100% - 60px);
  margin:0 auto;
  display: block;
      padding-top: 450px;
          max-width: 960px;
      justify-content: center;
}
}


/* ====== レスポンシブ ====== */
@media (max-width:480px){
  .visual__slides {
  width: 120%;
  transform: rotate(170deg);
  transform-origin: center;
  padding: 20px 0;
}
  
  .visual__title {
    font-size:22px;
    
  }
  .visual__slides img {
  margin: 0 10px;
}

  .story__title img {
    margin:40px 0;
    width:54%;
  }

.story__box01{
  width: 100%;
  text-align: center;
}
.story__box02{
  width: 100%;
  text-align: center;
}
}

/* =========================
  ===== Technology section (scoped) =====
========================= */
/* ===== Technology section (scoped) ===== */
/* --- intrusion settings --- */
.tech {
  position: relative;
  overflow: visible;
  background-color:#292F60 ;

  
}

/* 侵入量の指定 */
:root { --tech-overlap: 80px; } /* ←侵入量を増やして自然に見せる */

.tech__visual {
  position: relative;
  z-index: 2;
  margin: 0 auto;

}

.tech__visual img{
    padding: 0 14px;
    
}

/* bodyを画像にかぶせる */
.tech__body {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0A337D 0%, #292F60 100%);
  margin-top: calc(var(--tech-overlap) * -1);
  text-align: left;
    padding: 140px 30px 60px 30px;
    color: #fff;
}

/* フェード部分をもう少し上に伸ばして自然に */
.tech__body::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--tech-overlap));
  height: calc(var(--tech-overlap) * 2); /* ←倍の高さで自然にぼかす */
  background: linear-gradient(
    180deg,
    rgba(11, 44, 115, 0) 0%,
    #0A337D 100%
  );
  pointer-events: none;
}



/* SP用（侵入量調整） */
@media (max-width: 767.98px) {
  :root { --tech-overlap: 70px; }
.tech__body {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0A337D 140%, #292F60 100%);
  margin-top: calc(var(--tech-overlap) * -1);
  text-align: left;
    padding: 140px 30px 60px 30px;
}

.tech__title{
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 16px;
}

.tech__text{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

/* body{
   background-color: #292F60;
  background-image: url(../images/bg01.jpg);
  background-position: center 65%;

  background-repeat: no-repeat;

  background-size: 100%;  background-attachment: fixed;
} */
}


/* =========================
   TEXTANIME ブロック
========================= */
.jfa_product {
   /* background: linear-gradient(180deg, #292F60 0%, #4e5695 100%); */

  position: relative;
      margin: 380px 0 0;

}

.jfa_product_scroll {
padding-top: 0px;
  /* background-color: #0E0E0B; */
}


.jfa_product_scroll .scroll_itemfoot {
  flex: none;
  width: 1500px;
  margin-right: 100px;
  text-align: center;
  padding: 0px;
  border-radius: 5px;
  /* background-color: #0E0E0B; */
}

/* =========================
   TEXTANIME ブロック
========================= */


/* =========================
   PRODUCT_TITLE ブロック
========================= */


/* =========================
   PRODUCT メニュー
========================= */
.jfa_product_menu {
padding: 0 30px;
    text-align: center;
    /* position: absolute; */
    text-align: center;
    z-index: 2;
    width: 80%;
    margin: 0 auto;
}

.jfa_product_menu__title {
    margin-top: -244px;
  text-align: center;
}

.jfa_product_menu__title img {
  width: 190px;
  height: auto;
}

/* ===== PRODUCT ボタンレイアウト ===== */
.jfa_product_menu__grid {
  color: #fff;
  list-style: none;
  margin: 0 auto;
  padding: 32px 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
  font-size:  18px!important;
}

/* 各アイテム（通常） */
.jfa_product_menu__grid > li {
  color: #fff;

  grid-column: auto;
  width: auto;
  /* backdrop-filter: blur(6px); */
}

/* JUNIORボタンだけフル幅に */
.jfa_product_menu__item--full {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}

/* ===== PRODUCT ボタン共通スタイル ===== */
.jfa_product_menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 16px;
  border: 1px solid #fff;
  border-radius: 9999px; /* pill形 */
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.08s ease;
}

.jfa_product_menu__btn:hover,
.jfa_product_menu__btn:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.jfa_product_menu__btn:active {
  transform: translateY(1px);
}

/* ===== レスポンシブ（SPでは1カラム） ===== */
@media (max-width: 768px) {
  .jfa_product_menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列にする */
    max-width: 520px;
  gap:24px;

  }
  /* 念のため列跨ぎをクリア */
  .jfa_product_menu__grid > li { grid-column: auto; }
  .jfa_product_menu__item--full { grid-column: 1 / -1; } /* JUNIORだけフル幅 */

.jfa_product_menu__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 clamp(16px, 3vw, 32px);
  border: 1px solid #fff;
  border-radius: 9999px; /* pill形 */
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 15px;
  line-height: 1;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.08s ease;
}
.jfa_product_menu{
width: 100%;
}
}




/* ========================== */
/* ===== PICKUPセクション ===== */
.pickup {
/* background: #292F60; */
    display: grid
;
    gap: clamp(24px, 6vw, 48px);
    position: relative;
    /* margin: 60px 0; */
}
.pickup .pickup_deco{
  position: absolute;
  /* background: #292F60; */
    max-width: 960px;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pickup__box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
}

/* 上の画像部分 */
.pickup__img {
  width: 100%;
  
  /* background: #292F60; */
}
.pickup__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下のテキスト部分 */
.pickup__body {
      background: linear-gradient(
    110deg,
    rgba(39,47,106,0.6) 0%,
    rgba(13,17,45,0.6) 100%
  );
  backdrop-filter: bluer(10px);
  color: #fff;
  text-align: center;
  padding: clamp(40px, 8vw, 64px) 20px;
  border-radius: 10px;
}

.pickup__label {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 9999px;
  padding: 2px 16px;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.05em;
  margin: 16px auto;
  width: 120px;
  
}

.pickup__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 32px;
    line-height: 1.5;
}

.pickup__text {
  font-size: clamp(13px, 1.8vw, 16px);
  line-height: 1.8;
  margin-bottom: clamp(24px, 5vw, 40px);
}

/* ボタン */
.pickup__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: clamp(14px, 2vw, 16px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 30px;
  transition: all 0.2s ease;
  margin: 0 auto;
  
}
.pickup__btn::after {
  content: "›";
  font-size: 1.2em;
  margin-left: 8px;
}
.pickup__btn:hover {
  background: rgba(255, 255, 255, 0.85);
}

/* SP調整 */
@media (max-width: 768px) {
.pickup__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 32px;
    line-height: 1.5;
}
  .pickup .pickup_deco{
display: none;
}
.pickup {
/* background: #292F60; */

    margin:0;
}
  .pickup__body {
    padding: 80px 16px 80px;
  }
  .pickup__label {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 9999px;
  padding: 4px 20px;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  width: 100px;

}
.jfa_item{
  /* background-color: #4E5695 !important; */
      margin-top: 70px;
}
}
.jfa_item .name_bnr{
width: 100%;
 max-width: 960px;
 margin: 0 auto;


}


/* ========================== */
/* ===== PICKUPセクション ===== */


/* J ITEM */
.jfa_item{
  /* background-color:#4E5695 ; */
      /* margin-top: 100px; */

}
.jfa_item dl dt p{
  margin: 0px 0 32px 0;
  height: 32px;
  text-align: center;
}
/* ITEM */  

/* N ITEM */
.national_item{
  background-color:#1D1E24 ;

}
#belgium .item_national01{
  background-color:#1D1E24 ;

}
.national_item h2{
  margin-bottom: 20px;

}


.national_item dl dt p{
  margin: 0px 0 32px 0;
  height: 32px;
  text-align: center;
}
.national_item dl .national_item_tit{
  margin: 0px 0 92px 0;
  height: 32px;
  text-align: center;
}
/* ITEM */  


/* =========================
   SLIDER ブロック（PCデフォ） (JFA)
========================= */
.item_jfa01{
   /* background:linear-gradient(110deg, #272f6a 0%, #0d112d 100%); */
     background: linear-gradient(
    110deg,
    rgba(39,47,106,0.3) 0%,
    rgba(13,17,45,0.3) 100%
  );
  padding: 60px 0;
  backdrop-filter: blur(2px);
  border-top: 1px solid #505bae;
  
}
.name_bnr{

  padding: 60px 0;
  backdrop-filter: blur(2px);
  
}

.item_jfa02{
  background-color:#1c2253 ;
  border-top: 1px solid #505bae;
  backdrop-filter: blur(2px);

  padding: 60px 0;
  
     /* background:linear-gradient(110deg, #272f6a 0%, #0d112d 100%); */
     background: linear-gradient(
    110deg,
    rgba(33, 40, 92, 0.3) 0%,
    rgba(6, 8, 25, 0.3) 100%
  );
  

}

.item_area #w_pickup .itemslider{
    max-width: 1130px;
  margin: 32px auto 0;
  overflow-x: scroll;
     /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.item_area #w_pickup .itemslider::-webkit-scrollbar {
 display:none;
}

.item_area .item .itemslider li.itemslide{
  width: 200px;
  margin-right: 8px;
    margin-bottom: 30px;
}


.item_area .item .itemslider .slick-dots {
  display: flex; 
  justify-content: center;  
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.item_area .item .itemslider > .slick-dots{
  width: 420px;
  height: 2px;
  border-radius: 4px;
  background-color: #ccc;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: hidden;
}

.item_area #w_pickup .itemslider > .slick-dots{
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #ffffff;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: scroll;


}


#w_pickup p{
    width:100%;
    margin: 0 auto;
    text-align: center;
}

#w_pickup p img{
    width:200px;
    margin: 0 auto;
    /* text-align: center; */
}
#w_pickup ul li p{
    text-align: left;
}


.item_area .item .itemslider .slick-dots li {
  display: inline-block;
}

.item_area .item .itemslider .slick-dots li button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* background-color: #ccc; */
  border: none;
  padding: 0;
  font-size: 0;
}


.item_area .item .itemslider > .slick-dots li button {
  width:210px;
  height: 2px;
  border-radius: 4px;
  /* background-color: #ccc; */
  border: none;
  padding: 0;
  font-size: 0;
  transition: 0.4s;
}

.item_area .item .itemslider .slick-dots li.slick-active button {
  background-color: #666;
}

.item_area #w_pickup .itemslider .slick-dots li.slick-active button {
  background-color: #fff;
}

.itemslide a{
    text-decoration: none;
}
    

.itemslide p{
    width:100%;
    margin:16px auto 0;
    text-align: left;
    color: #fff !important;
    font-size:14px !important;
}
.itemslide img{
    border-radius: 10px;
}

.inner_imgslide{
    position:relative;
}


.my-prev, .my-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #969696;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.my-prev { left: 10px; }
.my-next { right: 10px; }

@media screen and (max-width:950px){
.item_jfa01{
   /* background:linear-gradient(110deg, #272f6a 0%, #0d112d 100%); */
     background: linear-gradient(
    110deg,
    rgba(39,47,106,0.2) 0%,
    rgba(13,17,45,0.2) 100%
  );
  padding: 60px 0;
  backdrop-filter: blur(2px);
  border-top: 1px solid #505bae;
  
}
  .item_jfa02{
  background-color:#1c2253 ;
  border-top: 1px solid #505bae;
  backdrop-filter: blur(2px);

  padding: 60px 0;
  
     /* background:linear-gradient(110deg, #272f6a 0%, #0d112d 100%); */
     background: linear-gradient(
    110deg,
    rgba(33, 40, 92, 0.2) 0%,
    rgba(6, 8, 25, 0.2) 100%
  );
  
  }
  .item_jfa01 dl dd{
    margin-left: 30px;
  
  }
      .item_jfa02 dl dd{
    margin-left: 30px;
  }
    .item_national01 dl dd{
    margin-left: 30px;
  }
      .item_national02 dl dd{
    margin-left: 30px;
  }
.item_area #w_pickup .itemslider > .slick-dots{
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #ccc;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: scroll;
}

    .item_area #w_pickup .itemslider .slick-dots li.slick-active button {
  background-color: #666;
}

.item_area #w_pickup .itemslider{
    max-width: 1130px;
  margin: 32px auto 0;
  overflow-x: scroll;
     /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: auto;
}
/* Chrome, Safari 対応 */
.item_area #w_pickup .itemslider::-webkit-scrollbar {
 display:none;
}
.item_area #w_pickup dl {
    width: calc(90%);
}
.itemslide a{
    text-decoration: none;
}

}
}


  /* ===== itemslider: 大枠をネイティブ横スクロール化 ===== */
.itemslider{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* align-items: flex-end; */
  padding: 8px 4px 12px; /* スクロール余白 */
}

.itemslider::-webkit-scrollbar{ height: 8px; }
.itemslider::-webkit-scrollbar-thumb{ background: #bbb; border-radius: 4px; }
.itemslider::-webkit-scrollbar-track{ background: #eee; }

/* 各カード（= これまでslickの1スライド相当） */
.itemslider > .itemslide{
  flex: 0 0 auto;
  width: 180px; /* 表示幅は好みで調整 */
  scroll-snap-align: start;
  padding-bottom: 24px;
}

/* 中の .inner_imgslide（商品画像スライダー）は従来通り */
.itemslider .inner_imgslide{ width: 100%; }

/* 念のため：もし .itemslider を slick 初期化していた場合の矯正（競合対策） */
.itemslider.slick-initialized{ display:block !important; }
.itemslider.slick-initialized .slick-track{ display:block !important; transform:none !important; }
.itemslider.slick-initialized .slick-slide{ width:auto !important; }


/* 箇条書きマーカーを消す */
.itemslider{
  list-style: none;
  margin: 0;
  padding: 0;
}
.itemslider > li{ list-style: none; }
.itemslider > li::marker{ content: ''; }


/* WebKit/Blink */
.itemslider::-webkit-scrollbar{ height: 10px; }
.itemslider::-webkit-scrollbar-track{ background: transparent; }
.itemslider::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.75);
}
.itemslider::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
}
.itemslider::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
}

/* Firefox */
.itemslider{
  scrollbar-width: thin;
  scrollbar-color: #CFCFCF transparent;
  margin-left: 30px;

}

.jfa_item .jfa_btn
{
  align-items: center;
  background: #3347a7;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 0 14px 0;
  transition: all 0.2s ease;
  width: 100%;
  margin:16px auto 0;
  text-align: center;
    border: 1px solid transparent;
    background: linear-gradient(#3347a7, #3347a7) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;


}

.national_item .national_btn
{
  align-items: center;
  background: #2059bc;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 0 14px 0;
  transition: all 0.2s ease;
  width: 100%;
  margin:16px auto 0;
  text-align: center;
    border: 1px solid;
  border-image: linear-gradient(90deg, #fff, #999999) 1;

}

#argentina .national_btn
{
  border: 1px solid transparent;
  background: #1B86CA;
    background: linear-gradient(#1B86CA, #1B86CA) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}
#italiana .national_btn
{
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(#07A660, #07A660) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}

#spain .national_btn
{
  border: 1px solid transparent;
  color:#1D1E24 !important;
  font-weight: 500;
  border-radius: 999px;
  background: linear-gradient(#F9EA03, #F9EA03) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}

#germany .national_btn
{
  border: 1px solid transparent;
  background: #F9EA03;
  color:#1D1E24 !important;
  font-weight: 500;
  border-radius: 999px;
    background: linear-gradient(#F9EA03, #F9EA03) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;

}
#mexico .national_btn
{
  border: 1px solid transparent;
  background: #E61026;
  border-radius: 999px;
  background: linear-gradient(#E61026, #E61026) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}
#clombia .national_btn
{
  border: 1px solid transparent;
  background: #0162AC;
  border-radius: 999px;
    background: linear-gradient(#0162AC, #0162AC) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}
#belgium .national_btn
{
  border: 1px solid transparent;
  background: #E61026;
  border-radius: 999px;
    background: linear-gradient(#E61026, #E61026) padding-box,
              linear-gradient(90deg, #fff, #999) border-box;
}
.jfa_item .jfa_btn::after {
  content: "›";
  color: #fff;

  font-size: 1.2em;
  margin-left: 8px;
}
.jfa_item .other_btn
{
  align-items: center;
  background: #2868d8;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 0 14px 0;
  transition: all 0.2s ease;
  width: 100%;
  margin:16px auto 0;
  text-align: center;

}
.jfa_item .other_btn::after {
  content: "›";
  color: #fff;

  font-size: 1.2em;
  margin-left: 8px;
}
/* ボタン */
.jfa_item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 60px;
  transition: all 0.2s ease;
  width: calc(100% - 60px);
  max-width: 330px;
  height: 50px;
  /* margin:0 auto 100px; */
}
.jfa_item__btn::after {
  content: "›";
  color: #fff;

  font-size: 1.2em;
  margin-left: 8px;
}
.jfa_item__btn:hover {
  background: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width:780px){
  /* ボタン */
.jfa_item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 60px;
  transition: all 0.2s ease;
  width: calc(100% - 60px);
  max-width: 350px;
  height: 50px;
  /* margin:40px auto 100px; */
}

}


/* ボタン */
.gwp_item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 0 14px 0;
  transition: all 0.2s ease;
  width: calc(100% - 60px);
  max-width: 420px;
  height: 50px;
  margin:40px auto 100px;
}
.gwp_item__btn::after {
  content: "›";
  color: #fff;

  font-size: 1.2em;
  margin-left: 8px;
}
.gwp_item__btn:hover {
  background: rgba(255, 255, 255, 0.85);
}

@media screen and (max-width:780px){
  /* ボタン */
.gwp_item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 0 12px 0px;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 350px;
  height: 50px;
  margin:40px auto 100px;
}

}

/* =========================
   SLIDER ブロック（PCデフォ）
========================= */



/* =========================
   SLIDER ブロック（PCデフォ） (National)
========================= */
.item_national01{
  background-color:#1D1E24 ;
  padding: 80px 0;
}
.item_national02{
background: linear-gradient(120deg, #5C617B 30%, #1D1E24 100%);

  padding: 80px 0;

}

.item_area #w_pickup .itemslider{
    max-width: 1130px;
  margin: 32px auto 0;
  overflow-x: scroll;
     /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.item_area #w_pickup .itemslider::-webkit-scrollbar {
 display:none;
}

.item_area .item .itemslider li.itemslide{
  width: 200px;
  margin-right: 8px;
    margin-bottom: 30px;
}


.item_area .item .itemslider .slick-dots {
  display: flex; 
  justify-content: center;  
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 0;
  list-style: none;
}

.item_area .item .itemslider > .slick-dots{
  width: 420px;
  height: 2px;
  border-radius: 4px;
  background-color: #ccc;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: hidden;
}

.item_area #w_pickup .itemslider > .slick-dots{
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #ffffff;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: scroll;


}


#w_pickup p{
    width:100%;
    margin: 0 auto;
    text-align: center;
}

#w_pickup p img{
    width:200px;
    margin: 0 auto;
    /* text-align: center; */
}
#w_pickup ul li p{
    text-align: left;
}


.item_area .item .itemslider .slick-dots li {
  display: inline-block;
}

.item_area .item .itemslider .slick-dots li button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* background-color: #ccc; */
  border: none;
  padding: 0;
  font-size: 0;
}


.item_area .item .itemslider > .slick-dots li button {
  width:210px;
  height: 2px;
  border-radius: 4px;
  /* background-color: #ccc; */
  border: none;
  padding: 0;
  font-size: 0;
  transition: 0.4s;
}

.item_area .item .itemslider .slick-dots li.slick-active button {
  background-color: #666;
}

.item_area #w_pickup .itemslider .slick-dots li.slick-active button {
  background-color: #fff;
}

.itemslide a{
    text-decoration: none;
}
    

.itemslide p{
    width:100%;
    margin:16px auto 0;
    text-align: left;
    color: #fff !important;
    font-size:14px !important;
}
.itemslide img{
    border-radius: 10px;
}

.inner_imgslide{
    position:relative;
}


.my-prev, .my-next {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #969696;
  cursor: pointer;
  z-index: 10;
  user-select: none;
}

.my-prev { left: 10px; }
.my-next { right: 10px; }

@media screen and (max-width:950px){
    
.item_area #w_pickup .itemslider > .slick-dots{
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #ccc;
  border: none;
  padding: 0;
  font-size: 0;
  margin-top: 50px;
  justify-content: flex-start;
  overflow-x: scroll;
}

    .item_area #w_pickup .itemslider .slick-dots li.slick-active button {
  background-color: #666;
}

.item_area #w_pickup .itemslider{
    max-width: 1130px;
  margin: 32px auto 0;
  overflow-x: scroll;
     /* IE, Edge 対応 */
 -ms-overflow-style: none;
 /* Firefox 対応 */
 scrollbar-width: auto;
}
/* Chrome, Safari 対応 */
.item_area #w_pickup .itemslider::-webkit-scrollbar {
 display:none;
}
.item_area #w_pickup dl {
    width: calc(90%);
}
.itemslide a{
    text-decoration: none;
}

}


  /* ===== itemslider: 大枠をネイティブ横スクロール化 ===== */
.itemslider{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 12px; /* スクロール余白 */
}
.itemslider::-webkit-scrollbar{ height: 8px; }
.itemslider::-webkit-scrollbar-thumb{ background: #bbb; border-radius: 4px; }
.itemslider::-webkit-scrollbar-track{ background: #eee; }

/* 各カード（= これまでslickの1スライド相当） */
.itemslider > .itemslide{
    flex: 0 0 auto;
    width: 180px;
    scroll-snap-align: start;
    padding-bottom: 40px;

}

/* 中の .inner_imgslide（商品画像スライダー）は従来通り */
.itemslider .inner_imgslide{ width: 100%; }

/* 念のため：もし .itemslider を slick 初期化していた場合の矯正（競合対策） */
.itemslider.slick-initialized{ display:block !important; }
.itemslider.slick-initialized .slick-track{ display:block !important; transform:none !important; }
.itemslider.slick-initialized .slick-slide{ width:auto !important; }


/* 箇条書きマーカーを消す */
.itemslider{
  list-style: none;
  margin: 0;
  padding: 0;
}
.itemslider > li{ list-style: none; }
.itemslider > li::marker{ content: ''; }


/* WebKit/Blink */
.itemslider::-webkit-scrollbar{ height: 10px; }
.itemslider::-webkit-scrollbar-track{ background: transparent; }
.itemslider::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.75);
}
.itemslider::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
}
.itemslider::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, #CFCFCF, #CFCFCF);
}

/* Firefox */
.itemslider{
  scrollbar-width: thin;
  scrollbar-color: #CFCFCF transparent;
  margin-left: 30px;


}
.itemslider{
    scrollbar-width: thin;
    scrollbar-color: #CFCFCF transparent;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
 #mexico .item_national02 .itemslider {
    max-width: 580px;
}
 #clombia .itemslider{
    max-width: 200px;
}
 #belgium .itemslider{
    max-width: 400px;
}
 #italiana .item_national01 .itemslider {
    max-width: 780px;
}

/* ボタン */
.jfa_item__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff !important;
  font-weight: 500;
  font-size: clamp(14px, 2vw, 18px);
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 60px;
  transition: all 0.2s ease;
  width: calc(100% - 60px);
  height: 50px;
  /* margin:40px auto 100px; */
  margin: 0 auto;

}
.jfa_item__btn::after {
  content: "›";
  color: #fff;

  font-size: 1.2em;
  margin-left: 8px;
}
.jfa_item__btn:hover {
  background: rgba(255, 255, 255, 0.85);
}


/* =========================
   SLIDER ブロック（PCデフォ）
========================= */



/* =========================
   REASON ブロック（PCデフォ）
========================= */



.lpwrap .reason {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding-top: 80px;
  padding-bottom: 50px;
}

.lpwrap .reason h3 {
  text-align: center;
}

.lpwrap .reason .modelname {
  margin-left: 0px;
  margin-top: 20px;
  text-align: center;
}

.lpwrap .reason h4 {
  font-size: 20px;
  text-align: center;
  margin-top: 40px;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
}

.lpwrap .reason p {
  color: #fff;
  text-align: left;
  margin-left: 20px;
}
.item_des{
	width: 74%;
	display: flex;
	margin: 40px auto;
}
.lpwrap .reason .item_des h4{
	width: 50%;
	margin-top: 0px;
	text-align: left;

}
.item_des p{
	width: 50%;

}
.lpwrap .reason .about_content-des {
	color: #fff;
	text-align: left;
	margin-left: 20px;
  }

.reason .scroll {
  margin-left: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
  display: none;
}
   .reason .scrollon {
margin:0 auto;
	padding-bottom: 10px;
	display: block;


  }


/* 浮遊アイテム（PCはsticky） */
.lpwrap .reason .floating_item {
  position: sticky;
  top: 200px;
  right: 0;
  z-index: 99;
  width: 50px;
  transition: 0.2s;
  margin-left: auto;
}


/* =========================
   横スクロール（スナップ）
========================= */

.staff_title.wow.slideInUp {
    max-width: 250px;
    margin: 0 auto;
    padding: 80px 0 40px;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 20px;
}

.jfa_product_scroll_staff {
      scrollbar-width: thin;
    scrollbar-color: #CFCFCF transparent;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
      width: 100%;
      overflow-y: hidden;
          margin-left: 30px;
              max-width: 960px;
    margin: 0 auto 150px;
}

.jfa_product_scroll_staff a {
  flex-shrink: 0;
  display: block;
      width: 27%;
          margin: 0 0 30px;
          
}
.jfa_product_scroll_staff a p{
padding: 10px 0;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 999px;
/* border: 1px solid #fff; */
    margin-top: 0px;
}

.jfa_product_scroll_staff a p::after {
    content: "›";
    color: #fff;
    font-size: 1.2em;
    margin-left: 8px;
}
.jfa_product_scroll_staff img {
  width: auto;
  height: auto;
  display: block;
}

.jfa_product_scroll_staff a:focus {
  outline: none;
}

.gallery{
  padding: 80px 0px 40px 20px;
  text-align: center;
}
.gallery h2{
margin: 40px 0 24px 0;
}
.gallery__scroll{
margin-bottom: 24px;

}
.gallery__scrollwrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOSでスムーズスクロール */
}

.gallery__track{
  display: flex;
gap: 4px;
}

.gallery__track img{
  flex: 0 0 auto;         /* 幅を固定して並ぶ */
  width: auto;
  height: 60vh;           /* 高さを揃える */
  object-fit: cover;
}
/* ← ここを“横スクロール用だけ”に限定 */
.scroll-container:not(.sambav):not(.yellowv) img {
  flex: 0 0 auto;
  width: calc(100%/7.5 - 4px);
  margin-right: 4px;
  scroll-snap-align: start;
}

/* スナップ無効化のバリアント（親＋子を完全OFF） */
.scroll-container.sambav,
.scroll-container.yellowv {
  scroll-snap-type: none !important;
  display: block;            /* flexの影響を切る */
  overflow-x: visible;
}

.scroll-container.sambav > *,
.scroll-container.yellowv > * {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

/* <picture> / <img> をフル幅に */
.scroll-container.sambav picture,
.scroll-container.sambav img,
.scroll-container.yellowv picture,
.scroll-container.yellowv img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  margin-right: 0;
  scroll-snap-align: none;
}

/* 画像サイズ微調整（バリアントごと） */
.sambav picture {
  flex: 0 0 auto;
  width: 100%;
  margin: 20px 0 0 0;
}

.yellowv img {
  flex: 0 0 auto;
  width: 100%;
  margin: 40px 4px 0 0;
}


/* =========================
   商品スライダー（Slick）
========================= */

.item_listslider {
  margin-top: -80px;
  padding-top: 100px;
}

/* dots */
.item_listslider_over > .slick-dots li {
  height: 5px;
}

.item_listslider_over > .slick-dots li button {
  width: 15px;
  height: 8px;
  padding: 0;
  background: #ffffff;
}

.slick-dotted.slick-slider {
  margin-bottom: 80px;
  /* margin-left: 2%; */
}

.item_listslider_over > .slick-dots .slick-active,
.item_listslider_over > .slick-dots .slick-active button {
  width: 40px;
  height: 8px;
}

/* カード本体（PCデフォ：色は書かない） */
.item_listslider_over {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item_listslider_over li {
  width: calc(100% / 4);
}

.item_listslider_over li a p {
  margin: 0 10px;
}

.item_listslider_over .item_listslider_over_div {
  margin: 0 10px;
  border-radius: 20px;
  position: relative;
  width: 210px;
  max-height: 180px;
}

.item_listslider_over .item_listslider_over_div img {
  border-radius: 20px 20px 0 20px;
  max-height: 180px;
  margin: 0 auto;
}

/* カード間隔（左右ギャップ） */
#item_box1 .slick-slide {
  margin: 0; /* '0 px' タイポ修正済み */
}

#item_box1 .slick-list {
  margin: 0 0 0 -40px;
}

/* アイコン */
.item_listslider_over .icon {
  position: absolute;
 top: -0.375rem;
  right: -0.375rem;
  width: 4rem;
  height: 4rem;
  border-top-left-radius: 50%;
  z-index: 1;
}

.iconBox {
  position: absolute;
  inset: 0.625rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  text-decoration: none;
  z-index: 1;
}

.material-symbols-outlined{
	text-align: center;
	padding-bottom: 10px;
}

.item_listslider_over .item_listslider_over_div .iconBox span img {
  border-radius: 0;
  width: 50%;
  padding: 0;
  margin: auto;
  text-align: center;
}

/* テキスト */
.item_listslider_over li a {
  text-decoration: none;
}

.item_listslider_over li a p {
  padding-bottom: 50px;
  letter-spacing: 0.04em;
}

.item_listslider_over li small {
  display: inline-block;
  margin-top: 24px;
  padding: 2px 9px;
  font-weight: 500;
  color: #ED7A7A;
  border: 1px solid #ED7A7A;
}
.tag_box{
    display: flex;
}

.tag {
  display: inline-block;
  font-size: 10px;
  padding: 3px 10px;
  margin: 10px 10px 0px 0;
  text-align: center;
  border-radius: 999px;

}
.tagnone {
  display: inline-block;
  font-size: 10px;
  padding: 3px 10px;
  margin: 10px 10px 0px 0;
  text-align: center;
  opacity: 0;
  border-radius: 999px;
  order: 1;

}
.tagj {
  background: #ffee38;
  color: #2e2e2e;

  font-weight: bold;
  order: 0;
    font-size: 10px;


}
.taggwp {
    color: #fff;
    width: 58%;
    border: 1px solid #fff;
    font-weight: bold;
    order: 0;
    font-size: 10px;
}

.tag.blue {
  background: #007bff;
  color: #fff;
  width: 32%;
  font-weight: bold;
}
.tag.gray {
  background: #828282;
  color: #fff;
  width: 34%;
  font-weight: bold;

}
.tag.pink {
  background: #EC2C7E;
  color: #fff;
  width: 34%;
  font-weight: bold;
}

.tag.size {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}

.item_listslider_over li strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
}

.item_listslider_over .itemname {
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
}

.item_listslider_over .itemcopy {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
}

/* =========================
   GWP
========================= */
   .gwp {
  /* background: #292F60;      */
  color: #fff;
  text-align: center;
  padding: 60px 30px 40px;
  text-align: center;
    margin: 0 auto;
}
.gwp__head{
  margin: 0 auto;
  text-align: center;

}

/* ===== 見出し部分 ===== */
.gwp__title {
  margin: 0 auto 40px;
  line-height: 1.1;
  width: 100%
}

.gwp__title img{
  margin: 0 auto;
  text-align: center;
  width: 100%s;
}

.gwp__title {
  font-family: "Noto Sans JP", sans-serif;
   margin: 0 auto 40px;

  line-height: 1.1;
}
.gwp__text {
  margin: 0 auto 40px;
  line-height: 1.5;
  font-size: 20px;
  letter-spacing: 1.2px;
  font-weight: 500;
  margin: 10px 0 20px 0;

}
.itemslide .note{
  font-size: 13px !important;
  color: #efefef !important;
}
.gwp__note {
  margin: 0 auto 40px;
  line-height: 1.5;
  font-size: 14px;
  letter-spacing: 1.2px;
  font-weight: 400;
  margin: 0px 0 20px 0;

}
.gwp__text2 {
  margin: 30px auto 0px;

}
.gwp__bnr{
  width: 100%;
  max-width: 960px;
  margin: 0 auto 40px;
}

.gwp__container{
  max-width: 960px;
  margin: 0 auto;
  background: #434b8b;
  padding: 30px;
  border-radius: 10px;

          backdrop-filter: blur(10px);
        background-color: rgba(103, 101, 152, 0.3);
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #5a6299;
}

.gwp__title-main {
  font-weight: 900;
  font-size: clamp(48px, 8vw, 80px);
  display: block;
}

.gwp__title-sub {
  font-weight: 900;
  font-size: clamp(44px, 7vw, 72px);
  color: #bfc8e6; /* 薄グレー */
  letter-spacing: 2px;
  display: block;
}

/* ===== コンテンツ（2ボックス） ===== */
.gwp__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  max-width: 500px;
  margin: 0 auto;
}

/* 黒いボックス */
.gwp__box {
  width: 100%;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.gwp__box-title {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}

.gwp__img {
  width: 100%;
  padding: 0px 0 0 0;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}

.gwp__img2 {
  width: 80%;
  padding: 14px 0 0 0;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}
/* ===== レスポンシブ ===== */
@media (min-width: 768px) {
.gwp__content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 50px;
    max-width: 960px;
    margin: 0 auto;
}
  .gwp__box {
    width: 45%;
  }
  .gwp__title {
  line-height: 1.1;

    margin: 0 auto 40px;
}
.gwp__title img{
    width:100%;
    max-width: 960px;

}
  .gwp {

  padding: 60px 30px 80px;

}


}
@media (max-width: 768px) {
.gwp__text {
  margin: 0 auto 40px;
  line-height: 1.5;
  font-size: 18px;
  letter-spacing: 1.2px;
  font-weight: 500;
  margin: 0 0 10px 0;
}
.gwp__img2 {
  width: 100%;

}
.gwp__container{
  padding: 20px;
}
.gwp__content {

    gap: 20px;
}

}

/* =========================
   GWP
========================= */

/* =========================
   セクション固有（PC・SP共通で最後に色）
========================= */



/* =========================
   Topics / Category
========================= */

.category_nav {
  width: calc(100% - 40px);
  margin: 0 auto 60px;
}

.section-pink .item_listslider_over li small.nonebg {
  color: inherit !important;
  border: none !important;
  background: none !important;
}

.category_nav ul li {
  margin: 0 auto 20px;
}

.lpwrap .topics {
  max-width: 750px;
  width: calc(100% - 60px);
  margin: 0 auto;
  text-align: center;
}

.lpwrap .topics h4 {
  font-size: 28px;
  letter-spacing: 4%;
  line-height: 1;
  margin-bottom: 30px;
}

.lpwrap .topics h4 + small {
  color: #D7A2A2;
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.lpwrap .topics h4 + small + p {
  padding: 0 14px;
  margin: 20px 0 30px;
  font-size: 16px;
  letter-spacing: 4%;
  font-weight: 300;
  text-align: center;
  line-height: 1.875;
}

.lpwrap .topics img {
  width: 100%;
}

.lpwrap .topics a {
  max-width: 500px;
  width: calc(100% - 40px);
  margin: 30px auto 0;
  padding: 19px 0;
  font-size: 12px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  display: block;
  line-height: 1;
  position: relative;
}

.lpwrap .topics a::after {
  content: "";
  position: absolute;
  display: block;
  background-image: url(../images/icon_05a.png);
  width: 24px;
  height: 25px;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
}


.bnr_area{
  max-width:800px;
  padding: 50px 0 100px;
  margin:0 auto;
}



.bnr_area picture{
  
  margin-bottom:20px ;
}

.fv_content{
  /* background: #292F60; */
}


/* =========================
   画像リスト（2カラム）
========================= */

.images_list {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 40px);
  margin: 30px auto;
}

.images_list li {
  width: calc(50% - 10px);
}

.images_list h5 {
  font-size: 18px;
  margin-top: 20px;
}

.images_list h5 strong {
  font-size: 24px;
  font-weight: bold;
}

.images_list li p {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.85;
}

.images_list li p strong {
  background: linear-gradient(to right, #FFE0E0 0%, #DCFFE6 100%) left / 100% 100% no-repeat;
  font-weight: bold;
}
.title_ma{
	margin-bottom: 40px;
}

/* =========================
   Utility
========================= */

.br-sp,
.spbr {
  display: none;
}

/* style-options ナビ開閉用 */
.style-options-wrapper {
  display: none;
  transition: max-height 0.3s;
}
.style-options-wrapper.open {
  display: flex;
}

#national video {
margin-top: 40px;
  }

  /* =========================
   Global Nav jfa
========================= */

.lpwrap #national{
  background: linear-gradient(120deg, #5C617B 30%, #1D1E24 100%);
  padding: 0px 0 0;
  }
  .fv_content_national__title{
    text-align: center;
    margin: 64px auto 0;
  }
.fv_content_national nav ul {
	max-width: 960px;
	padding: 30px 0 60px 0;
  margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;

  }
  
  .fv_content_national nav ul li {
	width: calc(100% / 7 - 10px);
	margin-bottom: 0;
  }


  /* 浮遊アイテム（SPは固定・非表示開始） */
  .fv_content_national .reason .floating_item {
    display: none;
    opacity: 0;
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 99;
    width: 50px;
    transition: 0.2s;
  }

  .fv_content_national .reason .floating_item.is-in {
    display: block;
    opacity: 1;
    transition: 0.6s;
  }
  

/* =========================================================
   ========  SP（768px以下）ここから上書き  ============
========================================================= */
@media screen and (max-width: 768px) {
 .lpwrap{
  width:100%;
    overflow-x: hidden;
 }


  
  /* Nav */
  .lpwrap nav ul {
    width: calc(100% - 60px);
    margin: 30px auto;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .lpwrap nav ul li {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }

  /* About text */
  .lpwrap .about_content {
    max-width: none;
    margin: 0;
  }

  .lpwrap .about_content h3 {
    font-size: 28px;
    padding: 50px 0 0 30px;
    font-weight: 700;
    margin: 0 auto 30px;
    max-width: 350px;
    letter-spacing: 0.1em;
  }

  .lpwrap .about_content p {
    font-size: 16px;
    padding: 0px 0 0 30px;
    line-height: 1.85;
    font-weight: 500;
    margin: 0 auto 60px;
    max-width: 350px;
  }
  .material-symbols-outlined{
	text-align: center;
	padding-bottom: 0;
}
  .item_listslider_over .item_listslider_over_div .iconBox span img {
	border-radius: 0;
	width: 50%;
	padding: 0;
	margin: auto;
  }
.gallery__track img {
    flex: 0 0 auto;
    width: auto;
    height: 40vh;
    object-fit: cover;
}
  /* Reason */
  .lpwrap .reason {
    max-width: none;
    margin: 0;
    position: static;
    padding-top: 80px;
    padding-bottom: 50px;
  }
  

  .lpwrap .samba {
    max-width: none;
    margin: 0;
    position: static;
    padding-top: 0px;
    padding-bottom: 50px;
  }

  .lpwrap .reason h3 {
    text-align: left;
    margin-left: 20px;
  }

  .lpwrap .reason h4 {
    font-size: 20px;
    text-align: left;
    margin: 40px 0 16px 20px;
    font-weight: 600;
    line-height: 1.5;
  }

  .lpwrap .reason p {
    margin-left: 20px;
    text-align: left;
  }
  .lpwrap .reason p {
	color: #fff;
	text-align: left;
	margin-left: 20px;
  }
  .reason .scroll {
	margin-left: 20px;
	margin-top: 40px;
	margin-bottom: 20px;
	display: block
  }
   .reason .scrollon {
	margin-left: 20px;
	margin-top: 40px;
	margin-bottom: 20px;
	display: block;




  }
  .bnr_area{
  width:90%;
  margin:0 auto;
  padding:50px 0 100px;
}
  .item_des{
	  width: 100%;
	  display: block;
	  margin: 0;
  }

  .lpwrap .reason .item_des h4{
	  width: 100%;
	  margin-top: 40px;
	  
  
  }
  .lpwrap .reason .item_des p{
	width: 100%;
	margin-top: 0px;

}

  .lpwrap .reason .modelname{
	margin-left: 20px;
	margin-top: 16px;
	font-size: 14px;
	color: #fff;
	text-align: left;

  }

  .lpwrap .about_content {
	/* max-width: 700px; */
	margin: 0 auto;
	background-size: cover;
	color: #fff;
  }
  
  .lpwrap #reason7 picture img{
width: 300px;
}

  .iframe-wrap {
	max-width: 1000px;   /* 任意：横幅制限したいなら */
	margin: 0 auto;     /* 真ん中寄せ */
	padding: 0;
  }
  
  .iframe-wrap iframe {
	display: block;     /* インラインをブロック化 */
	width: 100%;        /* 親に合わせる */
	height: auto;      /* 固定高さ */
	border: none;
  }


  /* =========================
   Global Nav jfa
========================= */
.fv_content{
  background: #292F60;
}
.fv_content nav ul {
	max-width: 400px;
	padding: 30px 0 60px 0;
  margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;

  }
  
  .fv_content nav ul li {
	width: calc(100% / 2 - 5px);
	margin-bottom: 0;
  }


  /* 浮遊アイテム（SPは固定・非表示開始） */
  .fv_content .reason .floating_item {
    display: none;
    opacity: 0;
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 99;
    width: 50px;
    transition: 0.2s;
  }

  .fv_content .reason .floating_item.is-in {
    display: block;
    opacity: 1;
    transition: 0.6s;
  }


  /* =========================
   Global Nav jfa
========================= */

.lpwrap #national{
  background: linear-gradient(120deg, #5C617B 30%, #1D1E24 100%);

  }
  .fv_content_national__title{
    text-align: center;
    margin:0px auto 0;
    padding-top: 60px;
  }
.fv_content_national nav ul {
	max-width: 400px;
	padding: 30px 0;
  margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;

  }
  
  .fv_content_national nav ul li {
	width: calc(100% / 2 - 5px);
	margin-bottom: 0;
  }


  /* 浮遊アイテム（SPは固定・非表示開始） */
  .fv_content_national .reason .floating_item {
    display: none;
    opacity: 0;
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 99;
    width: 50px;
    transition: 0.2s;
  }

  .fv_content_national .reason .floating_item.is-in {
    display: block;
    opacity: 1;
    transition: 0.6s;
  }
  
.scroll-container {
  overflow-x: scroll;
}

  /* 横スクロール（SPも同様に“横スクロール用だけ”に限定） */
  .scroll-container:not(.sambav):not(.yellowv) img {
    width: 250px;
    margin-right: 4px;
  }

  /* 商品スライダー */
  .item_listslider {
    margin-top: -80px;
    padding-top: 100px;
  }

  .item_listslider_over {
    display: block;
    flex-wrap: nowrap;
  }

  .item_listslider_over li {
    width: auto;
  }

  .item_listslider_over li a p {
    margin: 0 1rem;
    padding-bottom: 50px;
    letter-spacing: 0.04em;
  }

  .item_listslider_over .item_listslider_over_div {
    margin: 0 1rem;
    border-radius: 20px;
    position: relative;
    width: 210px;
    max-height: 180px;
  }

  .item_listslider_over .item_listslider_over_div img {
    border-radius: 20px 20px 0 20px;
    max-height: 180px;
  }

  /* カード間隔（左右ギャップ） */
  #item_box1 .slick-slide {
    margin: 0;
    /* margin-right: -80px; */
  }
.slick-cloned {
  margin-right: -80px;
}
  #item_box1 .slick-list {
    margin: 0 0 0 -13%;
  }

  /* Topics / Category */
  .category_nav {
    width: calc(100% - 40px);
    margin: 0 auto 60px;
  }

  .lpwrap .topics {
    width: calc(100% - 60px);
    max-width: none;
    margin: 0 auto;
    text-align: center;
  }

  .lpwrap .topics h4 {
    font-size: 20px;
    letter-spacing: 4%;
    line-height: 1;
    margin-bottom: 30px;
  }

  .lpwrap .topics h4 + small + p {
    text-align: left;
    padding: 0 14px;
    margin: 20px 0 30px;
    font-size: 14px;
    letter-spacing: 4%;
    font-weight: 300;
  }

  .lpwrap .topics a {
    width: calc(100% - 40px);
    margin: 30px auto 0 auto;
    padding: 19px 0;
    font-size: 12px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    display: block;
    line-height: 1;
    position: relative;
  }

  /* 画像リスト（2カラム） */
  .images_list {
    width: calc(100% - 40px);
    margin: 30px auto;
  }

  .images_list h5 {
    font-size: 14px;
    margin-top: 20px;
  }

  .images_list h5 strong {
    font-size: 18px;
    font-weight: bold;
  }

  .images_list li p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.85;
  }

  /* 改行用ユーティリティ */
  .br-sp {
    display: block;
  }
}


  
video {
      width: 100%;
      height: auto;
      display: block;
    }
    /* デフォルトはPC用（横動画）を表示 */
    .sp { display: none; }
    .pc { 
      display: block;
 
    max-width: 1000px;
    margin: 0 auto;
        padding-bottom: 60px;
    }

    /* 768px以下はスマホ想定 → 縦動画を表示 */
    @media (max-width: 768px) {
      .sp { display: block; }
      .pc { display: none; }
    }
    .controls {
      margin: 10px 0;
    }
    button {
      padding: 8px 16px;
      font-size: 16px;
      margin: 0 5px;
      cursor: pointer;
    }

    .slick-list.draggable{
      padding: 0px;
    }


/* PC: pickup セクションを左右50%レイアウトにする */
@media screen and (min-width: 769px) {


  .pickup__box {
    display: flex;
    flex-direction: row !important; /* 強制的に横並びにする */
    align-items: stretch; /* 両カラムを同じ高さに揃える */
    gap: 0;
    max-width: 960px;
    margin: 0 auto;
  }

  /* 画像側：左50% — 既存の .pickup__img を再利用 */
  .pickup__img {
    flex: 0 0 50%;
    max-width: 100%;
    display: block;
    overflow: hidden;
    /* SPで設定されているaspect-ratioを無効化して横並び時の高さ制御をflexに任せる */
    aspect-ratio: auto;
    height: auto; /* 高さはコンテンツ（flex）に合わせる */
  }

  .pickup__img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* トリミングしてカバー */
    display: block;
  }

  /* テキスト側：右50% */
  .pickup__body {
    flex: 0 0 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 60px 80px; /* 必要に応じて調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff; /* テキスト色は既存デザインに合わせる */
  }

  /* ボタン周りのサイズ調整（任意調整） */
  .pickup__btn{
    align-self: flex-start;
  }
  .fv_content nav ul li a {
  display: block;
  text-align: center;
  padding:0;
}

.fv_content .target-section nav ul li a img {
  padding-bottom: 8px;
}
.fv_content nav ul li {
  width: calc(100% / 2 - 20px);
  margin-bottom: 0;
  background: #1D1E24;
}
.fv_content nav ul li a img {
  padding-bottom: 0px;
}


}







@media screen and (max-width: 768px) {
.staff_title.wow.slideInUp {
    max-width: 250px;
    margin: 0 auto;
    padding: 80px 0 40px;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 20px;
}

.jfa_product_scroll_staff {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 20px;
      width: 100%;
      overflow-y: hidden;
          margin-left: 30px;
              max-width: 960px;
    margin: 0 auto 120px;
            padding-left: 30px;
}

.jfa_product_scroll_staff a {
  flex-shrink: 0;
  display: block;
      width: 60%;
          margin: 0 0 30px;
          
}
.jfa_product_scroll_staff a p{
padding: 10px 0;
color: #fff;
font-size: 14px;
text-align: center;
border-radius: 999px;
/* border: 1px solid #fff; */
    margin-top: 0px;
}

.jfa_product_scroll_staff a p::after {
    content: "›";
    color: #fff;
    font-size: 1.2em;
    margin-left: 8px;
}
.jfa_product_scroll_staff img {
  width: auto;
  height: auto;
  display: block;
}

.jfa_product_scroll_staff a:focus {
  outline: none;
}

.item_listslider_over li a{
  display: block;
}

/* 右側だけチラ見せ用 */
.item_listslider_over {
  padding-right:30%; /* チラ見せしたい幅に調整 */
}
.item_listslider .slick-list {
  overflow: visible;
}

}



.scroll-container {
  scrollbar-width: thin;           /* Firefox用 */
  scrollbar-color: #d7d7d7 #c5c5c5;  
  border-radius: 8px;
      /* Firefox用 */
}

/* Chrome, Edge, Safari用 */
.scroll-container::-webkit-scrollbar {
  height: 8px;                     /* 横スクロールバーの高さ */
  background: #d7d7d7;                /* バーの背景色 */
  border-radius: 8px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #c5c5c5;                /* バーのつまみ色 */
  border-radius: 8px;
}
.scroll-container::-webkit-scrollbar-track {
  background: #d7d7d7;                /* バーのトラック色 */
  border-radius: 8px;
}



@media screen and (max-width:767px) {
	/* Styleボタン */
.style-selector {
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-weight: 600;
	position: fixed;
   bottom: 10px;
	left: 50%;
	width: 262px;
	transform: translateX(-50%);
    background-color:#000;
    /* padding: 13px 70px; */
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
	color: #fff;
    gap: 10px;
    z-index: 998;
        box-shadow:
    0 0 40px rgba(255,255,255,0.4),
    0 0 80px rgba(255,255,255,0.2),
    0 0 120px rgba(255,255,255,0.05);
}

.style-options {
    position: fixed;
    bottom: 80px;
    left: 50%;
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
    background-color: rgba(218, 218, 218, 0.8);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #fff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 82%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 997;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 84%;
    transition: all 0.5s ease;
    opacity: 0;
	pointer-events: none; /* 👈 クリックできないようにする */
    height: auto; /* 開閉用 */
}

.style-options.open {
	pointer-events: auto; /* 👈 開いたときだけクリックできる */
  }
.style-selector label {
	padding: 0 20px;
}

.style-options a {
    width: 100%;
    height: auto;
	overflow: hidden;
	border-radius: 0px;

}

.style-options img {
	border-radius: 0px;
	width: 100%;

	object-fit: cover;
}

/* 展開時に付くクラス */
.style-options.open {
    height: auto; /* ここだけあなたのデザインに合わせて調整要（例: 300pxとか） */
    opacity: 1;
}

  .style-options a:first-child img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

/* 非表示制御用（旧hiddenは使わない） */
.hidden {
    display: none;
}

/* SP: 最初のカードだけ1カラム表示にする (スマホ専用) */
@media screen and (max-width:767px) {
  .item_listslider_over {
    display: flex;      /* 横並びを一旦有効にしてラップ挙動を使う */
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 0;    /* チラ見せがある場合は調整 */
  }

  /* 1個目を1カラム幅にする */
  .item_listslider_over li:first-child {
    width: 100% !important;
  }

  /* 1個目の内部カードを全幅に広げる */
  .item_listslider_over li:first-child .item_listslider_over_div {
    width: calc(100% - 20px) !important;
    margin: 0 10px;
    max-height: none;
  }

  /* 残りのカードは2カラムに揃える（必要に応じて調整） */
  .item_listslider_over li:not(:first-child) {
    width: calc(50% - 10px) !important;
  }
}

}

/* floating_nav */

	  @media screen and (min-width:1200px){
		.style-options {
			width: 92%;

		}
	  .style-selector {
		font-family: "hiragino-kaku-gothic-pron", sans-serif;
		font-weight: 600;
		position: fixed;
		bottom: 20px;
		right: -8%;
		transform: translateX(-50%);
		background-color:#000;
		/* padding: 13px 70px; */
		border-radius: 50px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		color: #fff;
		gap: 10px;
		z-index: 998;
            box-shadow:
    0 0 40px rgba(255,255,255,0.4),
    0 0 80px rgba(255,255,255,0.2),
    0 0 120px rgba(255,255,255,0.05);

	}
	
	.style-options {
        padding: 20px 20px 12px 20px;
		grid-template-columns: repeat(8, 1fr);


}
}

	  @media screen and (min-width:1500px){
		.style-options {
			width: 86%;
		}
		.style-selector {
			font-family: "hiragino-kaku-gothic-pron", sans-serif;
			font-weight: 600;
			position: fixed;
			bottom: 20px;
			right: -7%;
			transform: translateX(-50%);
			background-color:#000;
			/* padding: 13px 70px; */
			border-radius: 50px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			color: #fff;
			gap: 10px;
			z-index: 998;
		}
		
		.style-options {
			position: fixed;
			bottom: 100px;
			left: 50%;
			backdrop-filter: blur(10px);
			transform: translateX(-50%);
			background-color: rgba(218, 218, 218, 0.8);
			padding: 20px;
			border-radius: 10px;
			border: 1px solid #fff;
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			gap: 20px;
			width: 70%;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			z-index: 997;
			overflow-y: auto;
			overflow-x: hidden;
			max-height: 540px;
			transition: all 0.5s ease;
			opacity: 0;
			pointer-events: none; /* 👈 クリックできないようにする */
			height: auto; /* 開閉用 */
		}  
		.style-options a {
			width: 100%;
			height: auto;
			overflow: hidden;
			border-radius: 0px;
		
		}
	}
	@media screen and (min-width:1700px){
		.style-selector {
			font-family: "hiragino-kaku-gothic-pron", sans-serif;
			font-weight: 600;
			position: fixed;
			bottom: 20px;
			right: -5%;
			transform: translateX(-50%);
			background-color:#000;
			/* padding: 13px 70px; */
			border-radius: 50px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			color: #fff;
			gap: 20px;
			z-index: 998;
		}
	}



  /*--anime--*/

:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1;
}

.wow {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes slideInLeft {
from {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

@keyframes slideInLeft {
from {
	-webkit-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
from {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

@keyframes slideInRight {
from {
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
from {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

@keyframes slideInUp {
from {
	-webkit-transform: translate3d(0, 50%, 0);
	transform: translate3d(0, 50%, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}

@-webkit-keyframes slideInDown {
from {
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	visibility: visible;
}

to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

@keyframes slideInDown {
from {
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	visibility: visible;
}


to {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
}

.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}


.other-btn a{
    display: block;
    border: 1px solid #ffffff;
    padding: 0.7em;
    text-align: center;
    margin: 0 10px 20px;
    color: #fff!important;
}


.scroll-container {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-bottom: 20px;
  margin-left: 30px;
}
.national_item {
  background-color: #1D1E24;
  overflow-x: hidden;
}
@media screen and (max-width: 768px) {

.scroll-container {
  overflow-x: scroll;
}
}

.fv_content {
  all: unset;
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 7px;
  text-align: center;
  color: #cccccc;
  font-family: "Noto Sans JP", sans-serif;
font-size: 7px;
  font-weight: 300;
}

/* h1 全体をレイアウト枠に */
.fv_title {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* 画像を全面表示 */
.fv_title picture,
.fv_title img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストを画面外に追い出す（SEO OK） */
.fv_title {
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}

/* スマホ用 */
@media (max-width: 768px) {
  .fv_title img {
    object-position: center top;
  }
}