@charset "utf-8";@charset "utf-8";

/* ===================================
    全体レイアウト・基本設定
==================================== */
#Area {
	font-family: "Inter", sans-serif;
	text-align: center;
	color:#333333;
	width: 100%;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	max-width: 1400px;
}

.img { text-align: center; margin: 0 auto; }
.br-sp { display: none; }
@media (max-width: 600px) { .br-sp { display: block; } }

.spece { margin-bottom:3%; }
.spece2 { padding-top: 10%; text-align: center; }
.spece_text { margin-bottom:-2%; font-weight: 400; }
.spece_bottom { margin-bottom:25%; }

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

/* ===================================
    商品一覧：PC4列 / スマホ2列（解決版）
==================================== */

/* 親の箱の設定 */
.item-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* PCは4列 */
    gap: 40px 20px !important;
    width: 95% !important;
    max-width: 1200px !important;
    margin: 50px auto !important;
}

/* 商品1つ1つの設定 */
.item {
    display: block !important;
    width: 100% !important;
    max-width: none !important; /* PCで1列になる原因を排除 */
    margin: 0 !important;
    text-align: center !important;
}

.item img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 15px !important;
}

.details {
    font-size: 13px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.buy {
    display: inline-block !important;
    background: #333 !important;
    color: #fff !important;
    padding: 5px 20px !important;
    margin-top: 10px !important;
    text-decoration: none !important;
    border-radius: 20px !important;
}

/* スマホ用の設定 (画面幅767px以下) */
@media screen and (max-width: 767px) {
    .item-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* スマホは2列 */
        gap: 30px 10px !important;
        width: 94% !important;
    }
    .details { font-size: 11px !important; }
}

/* ===================================
    その他のパーツ（プロフィール・バナー等）
==================================== */
.gift {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15%;
}

.gift_image { width: 35%; margin-right: 5%; }
.gift_text { width: 45%; text-align: left; }
.gift_text_top { font-size: 25px; margin-bottom: 5%; font-weight: bold; }
.gift_text_deteil { font-size: 13px; line-height: 1.8; }

@media (max-width: 600px) {
    .gift { flex-direction: column; width: 90%; }
    .gift_image { width: 80%; margin-right: 0; margin-bottom: 5%; }
    .gift_text { width: 100%; }
}

/* 過去の不要なクラスを透明化 */
.image_width, .image_width_2, .image_width_3, .image_width_4, 
.image_width_5, .image_width_6, .image_width_7 {
    display: contents !important;
}


/* バナー下のテキスト調整 */
.tab-title {
    font-family: "Inter", sans-serif !important; /* 全体とフォントを統一 */
    font-size: 20px !important;                 /* 動画下と同じサイズに固定 */
    text-align: center !important;              /* 中央揃え */
    font-weight: bold;                          /* 太字にする場合 */
    line-height: 1.6;                           /* 行間を整える */
}

@media (max-width: 600px) {
    .tab-title {
        font-size: 16px !important;             /* スマホでは少し小さく */
        padding: 0 10px;
    }
}

/* ===================================
    YouTube動画のセンター・レスポンシブ化
==================================== */

/* 動画を囲む親要素 */
.youtube-container {
    width: 90%;            /* 左右に少し余白を持たせる */
    max-width: 900px;      /* PCでの最大サイズ（お好みで調整してください） */
    margin: 40px auto;     /* 上下余白 40px / 左右 auto でセンター配置 */
    position: relative;
    aspect-ratio: 16 / 9;  /* 横16:縦9の比率を維持 */
}

/* 動画本体（iframe） */
.youtube-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* スマホ用の微調整 */
@media screen and (max-width: 767px) {
    .youtube-container {
        width: 95%;        /* スマホでは画面いっぱいに近くする */
        margin: 20px auto;
    }
}

/* ===================================
    動画下のリンクボタン
==================================== */
.video-link-container {
    text-align: center;
    margin: 20px auto 40px;
}

.video-btn {
    display: inline-block;
    background: #000;          /* ボタンの色（黒） */
    color: #fff !important;    /* 文字の色（白） */
    text-decoration: none;
    padding: 12px 40px;        /* ボタンのサイズ */
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border-radius: 2px;        /* 少しだけ角を丸く */
    transition: 0.3s;          /* ホバー時の動き */
    border: 1px solid #000;
}

/* マウスを乗せた時の反応 */
.video-btn:hover {
    background: #fff;
    color: #000 !important;
}

@media screen and (max-width: 767px) {
    .video-btn {
        width: 80%;            /* スマホでは少し横幅を広げる */
        padding: 10px 0;
        font-size: 13px;
    }
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 の比率を維持 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}