/*******************************************ボディー************************************************************/

body
{
  background-color: #123; /* バックグラウンド */

  -webkit-text-size-adjust: 100%; /* Safari, Chrome, iOS Safari */
  -moz-text-size-adjust: 100%;    /* Firefox */
  -ms-text-size-adjust: 100%;     /* Internet Explorer */
  text-size-adjust: 100%;         /* 標準仕様 */
}

.flex-container{
  background-color: #123; /* バックグラウンド */
}

.guidecontainer {
  max-width: 900px; /* 好きな幅に調整 */
  margin: 0 auto;
}

/* h1の影 */
.shadow {
    text-shadow: 1px 1px 1px deeppink;
}

/* YouTubeの枠線 更新後（red）更新してしばらくしたら（deepskyblue）*/
.youtube {
  border: solid 2px red;
}

/* ライブ配信のアイコン▶ 配信決定（red）配信終了（black）*/
.live-icon {
  color: black;
}

.bar {
  color: #333;
}

.bari {
  color: #333;
}

.nav-separator {
  color: #333;
}

/*******************************************シリーズ ランゲージ ALL SOAKED GOOEY************************************************************/

.language-wrapper {
  text-align: center; /* 中央揃えの決め手 */
  margin-top: 1rem;
  color: #000;
  font-size: large;
}

.languagelinkj,
.languagelinke {
  font-weight: bold;
  color: #000;
  text-shadow: 0px 0px 2px #fdfdf4; /* パールホワイト寄り */
}

.languagelink {
  font-weight: bold;
  text-shadow: 0px 0px 2px #fdfdf4; /* パールホワイト寄り */
}

/*******************************************タイトル左のicon*******************************************/

.watericon {
  color: aqua;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

.mudicon {
  color: goldenrod;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

/*******************************************動画の中のサークルＰicon*******************************************/

.video-trigger {
  position: relative;
  display: inline-block;
}

.video-thumbnail {
  border-radius: 0.5rem;
  width: 100%;
  border: solid 0px lightsteelblue; /*** コンテナの中 ***/
  display: block;
}

/******************************************* 再生アイコンを擬似要素で追加 *******************************************/

    .video-trigger::before {
    content: "\f144  サンプル";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: 7px;
    left: 9px;
    font-size: 20px;
    color: white;
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    transform: none;
    z-index: 10;
}

/**********************************SNS ソーシャルアイコン********************************************************/

.social-icons {
  display: flex;
  justify-content: center;
}

/*******************************利用方法GigaGile XCREAM*********************************************/

.menu {
  text-align: center; /* ボタンを中央寄せ */
  margin: 20px 0;     /* 上下に余白 */
}

.menu button {
  font-weight: bold;       /* 太字 */
  padding: 6px 10px;       /* 上下・左右の余白 */
  margin: 0 8px;           /* ボタン間の左右の隙間 */
  border: 2px solid white;  /* white */
  border-radius: 4px;      /* 角を少し丸く */
  background-color: deepskyblue;  /* deepskyblue */
  color: white;             /* white */
  cursor: pointer;         /* マウスオーバーでポインターに */
}

/* ホバー時に色を変える */
.menu button:active {
  background-color: deepskyblue; /* deepskyblue */
  color: white; /* white */
  border: 3px solid white;  /* white */
  font-size: large;
}

/*******************************************ナビリスト、シリーズリンク************************************************************/

.nav-list li {
  display: inline-block;   /* 追加：各liを横並びに */
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* 横並びを中央寄せ */
  color: black;
  font-size: large;
}

.nav-all,
.nav-soaked,
.nav-gooey {
  font-weight: bold; 
  text-shadow: 0px 0px 2px #fdfdf4; /* パールホワイト寄り */
}

.nav-all a,
.nav-soaked a,
.nav-gooey a {
  font-weight: bold;
  color: #fff;
}

/**********************************通貨リスト********************************************************/

.rate-display {
    position: fixed;
    bottom: 0px;
    left: 0;                 /* 左端に合わせる */
    width: 100%;             /* 画面幅いっぱい */
    color: red;
    text-align: center;
    font-weight: bold;

    white-space: nowrap;
    background-color: rgba(0,0,0,0.3);
    padding: 10px 0;         /* 上下に少し余白 */
    border-radius: 0;        /* 角丸なしで横長バー */
    z-index: 9999;
}

/********************************** 5行スクロール **********************************/

.desc-scroll {
  line-height: 1.6;                       /* 行間 */
  max-height: calc(1.6em * 5);            /* 5行分の高さ */
  overflow-y: scroll;                      /* スクロール可能 */
  padding-right: 6px;                      /* 念のため文字が隠れない余白 */
  text-align: left;                         /* 左揃え */

  /* スクロールバー非表示 */
  scrollbar-width: none;                   /* Firefox */
  -ms-overflow-style: none;                /* IE 10+ */
}

/* Chrome / Safari / Edge (Webkit系) */
.desc-scroll::-webkit-scrollbar {
  display: none;                           /* スクロールバー非表示 */
}

/**********************************商品情報動画モーダル領域********************************************************/

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container video {
  width: 100%;
  max-width: 100%;
  height: auto;
  outline: none;
  background: white;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 50px;
  color: #fff;  /* 白 */
  cursor: pointer;
  z-index: 10;
}

.close:hover {/* マウスを重ねたら色が変わる */
  color: #dcdcdc;
}

/**********************************法的リンクモーダル領域********************************************************/

/* モーダル全体の背景 */
#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
}

/* モーダルの中身 */
#modal-inner {
  background: #222;
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  color: white;
  font-family: sans-serif;
}

/* 閉じるボタン */
#modal-close {
  position: absolute;
  top: 10px;
  right: 35px;
  cursor: pointer;
  font-size: 40px;
  color: #fff;  /* 白 */
  z-index: 10;
}

#modal-close:hover {/* マウスを重ねたら色が変わる */
  color: #dcdcdc;
}


/* モーダルコンテンツ部分 */
#modal-content {
  max-height: 70vh;
  overflow-y: auto;
  color: white;
  text-align: left;
}

/**********************************ボタンPayPal********************************************************/

.paypal {
  display: inline-block;
  padding: 11px 32px;
  font-weight: bold;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  background-color: #20b2aa; /*******/
  font-size: 18px;
  text-shadow: 1px 1px 1px black;


  border: 2px solid #fff;
  transition: background-color 0.4s ease, border-color 0.3s ease, color 0.3s ease;
}

.paypal:hover {
  color: #ddd;
  background-color: #1CA099;
  border: 2px solid #ddd;
}

/**********************************ボタンXCREAM********************************************************/

.xcream {
  display: inline-block;
  padding: 11px 32px;
  font-weight: bold;
  border-radius: 25px;
  text-decoration: none;
  color: #fff;
  background-color: #ffa500; /********/
  font-size: 18px;
  text-shadow: 1px 1px 1px black;

  border: 2px solid #fff;
  transition: background-color 0.4s ease, border-color 0.3s ease, color 0.3s ease;
}

.xcream:hover {
  color: #ddd;
  background-color: #e69500;
  border: 2px solid #ddd;
}

/**********************************ボディー水平線********************************************************/

#my_main {
	width: 90%;
	margin :0 auto;
}

hr  { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

/***********************************画像、テキスト、レスポンシブ************************************************/

/* 画像の自動縮小：画面幅に合わせて画像の横幅を最大100%に調整 */
img {
  max-width: 100%;
}



/* 動画の自動縮小：YouTube動画やiframe、videoタグの幅を画面に合わせて調整 */ 

.youtube,
iframe, 
video { 
    max-width: 99%; 
    } 
    
/* スマホ用のスタイル：画面幅768px以下の場合に動画の高さを制限 */ 

@media (max-width: 768px) { 
    .youtube, iframe, video { 
        max-height: 230px;/* 動画の高さを230px以下にする */ 
    } 
} 



/* ページネーションの色 */ 

.swiper-pagination-bullet {
    background: white !important;
    margin: 0 15px !important;
}

/* ナビゲーション矢印の色 */ 

.swiper-button-prev, 
.swiper-button-next { 
  color: deepskyblue !important; 
  top: 50%;                        /* 縦の中央 */
  transform: translateY(-50%);     /* 自分の高さ分ずらす */
}



/* 段落テキストの基本スタイル */
p {
  color: #fff; /* 文字色 */
  height: auto;   /* 高さを自動調整 */
}

/* リンクの基本スタイル */
a {
  color: #fff; /* 通常時のリンク色 */
}

/* リンクのホバー時のスタイル */
a:hover {
  color: #ddd; /* 明るめのグレー */
}

/*******************************光る画像*********************************************/

a:hover img {
    opacity: 0.80;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}

/*******************************ダウンロードのテーブル*********************************************/

/* 共通テーブルスタイル */
table {
    border-collapse: collapse;
    margin: 20px auto;
    width: 40%;                 /* PC用: テーブル幅40% */
    text-align: center;
    font-family: Arial, sans-serif;
    max-width: 100%;            /* スマホで画面幅を超えない */
    table-layout: auto;         /* セル幅を自動調整 */
}

/* ヘッダセル */
th {
    border: 1px solid #555;
    padding: 10px;
    background-color: #3a3a3a;
    font-weight: bold;
    color: #fff;
}

/* 通常セル */
td {
    border: 1px solid #555;
    padding: 10px;
    background-color: #2b2b2b;
    color: #fff;
}

/* 行ヘッダー用セル */
.row-header {
    background-color: #444;
    font-weight: bold;
    text-align: left;
    color: #fff;
}

/* ▼ スマホ対応（画面幅600px以下のとき） */
@media screen and (max-width: 2000px) {
  table {
    width: 100%;        /* スマホでは幅100%にする */
    font-size: 15px;    /* 文字を少し小さくして収める */
  }
  th, td {
    padding: 6px;       /* パディングを小さくして窮屈さ回避 */
  }
}

/*******************************上へ戻る*********************************************/

#pageTop {
      position: fixed;
      z-index: 10000;
      bottom: 80px;
      right: 90px;
      
    }

    #pageTop i {
      padding-top: 3px
    }

    #pageTop a {
      display: block;
      width: 0px;
      height: 0px;
      color: lavender;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
      opacity: 0.6
    }

    #pageTop a:hover {
      text-decoration: none;
      opacity: 0.5
    }

/************************************ヘッダー**********************************************/

/* サイト説明 */

h1 {
  color: #fff;   font-size:23px;   text-align: center;
}

h2 {
  color: #fff;   font-size:17px;   text-align: center;    
}

/* 商品名 */

h3 {
  color: #fff;
}

/* ポリシー等 */

h4 {
  color: #fff;   font-size:16px;
}

/************************************YouTube埋込動画**********************************************/

.youtube {
  display: block;
  margin: 1rem auto; /* 上下に1remの余白、左右は自動で中央揃え */
  border-radius: 0.5rem;
}


/************************************ボディー**********************************************/

.flex-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2rem;
}

.cart-box {
  border: 2px solid springgreen;
  width: 360px;
  background: #06061a; 
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/************************************フッダー**********************************************/

.footer {
    text-align: center;
  }
  
  /* スマホ用、縦並び「特商法｜規約｜プライバシー」 */
  
.legal-links {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  flex-direction: row;
  flex-wrap: wrap;
}

/* スマホ（600px以下）では縦並び */
@media (max-width: 600px) {
  .legal-links {
    flex-direction: column;
    align-items: center;
    gap: 0.8em;
  }
}