/* --- メインビジュアル --- */
#main-visual {
    background: url(../img/main_pc.jpg) no-repeat top center/cover fixed;
    height: 100vh;
}
@media screen and (max-width: 640px) {
    #main-visual {
        background: url(../img/main_sp.jpg) no-repeat top center/contain fixed;
        height: 50vh;
    }
}
@media screen and (max-width: 750px) {
    #main-visual { height: 40vh; }
}

/* --- グリッドベース --- */
[class^="grid1"] .grid__list { width: 100%; }
[class^="grid2"] .grid__list { width: 50%; position: relative; }
[class^="grid3"] .grid__list { width: 33.333%; }
[class^="grid4"] .grid__list { width: 25%; }

/* PC・タブレット共通グリッド (768px以上) */
@media screen and (min-width: 768px) {
    .grid1-2, .grid2-4 { width: 25%; }
    .grid1-3 { width: 33.333%; }
    .grid1-4 { width: 25%; }
    .grid2-1 { width: 100%; }
    .grid2-3 { width: 30%; }
}

/* --- コンテナ・タイトル --- */
.lpContent__continer {
    max-width: 900px;
    width: 100%;
    margin: 10px auto;
    padding: 60px 10px 10px 10px;
}
.subcontents_title {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    margin: 50px auto 10px; 
    font-family: 'Times New Roman', Times, serif;
    color:#333;
}

/* --- 全体設定 --- */
#lp {
    color:#333;
    text-align:center;
    background-color: rgb(245, 245, 241);
}
#lp img {
    max-width:100%;
    margin-bottom: 20px;
}

.colorBk { background-color:#cec8bd; }

/* --- レイアウト設定 (Flexbox) --- */
.flex_Js {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px 2%;
    margin: 0 auto 30px;
    max-width: 900px;
}

.flex_Js.col-2 {
    max-width: 900px; 
    margin: 0 auto 30px;
    justify-content: center;
}
.col-2 > div {
    width: 48%;
}

.flex_Js.col-3 {
    max-width: 700px;
    justify-content: center;
    gap: 20px 5%;
}
.col-2 > div { width: 49%; }
.col-3 > div { width: 30%; margin-top: 50px; }

.flex_Js img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* --- アニメーション --- */
.anime img {
    filter: grayscale(100%);
    transition: all 1.5s ease 1s;
    transform: translateY(60px);
    opacity:0;
}
.animeOn img {
    animation: anim_fuwa 1s ease-out 0.3s forwards;
    filter: grayscale(0);
}
@keyframes anim_fuwa {
    0% { transform:translateY(60px); opacity:0; }
    100% { transform:translateY(0); opacity:1; }
}

/* 2枚並び（col-2）の時だけ、25%設定を上書きして大きくする */
.flex_Js.col-2 .anime {
    width: 48% !important; /* 強制的に約半分（大きく）にします */
    max-width: none;       /* もし制限がかかっていても解除します */
}

/* 3枚並び（col-3）も念のため調整しておくと安心です */
.flex_Js.col-3 .anime {
    width: 30% !important;
}

/* --- アイテム詳細 --- */
.item_price_center { font-size: 14px; margin: 0 auto 5%; font-family: 'Noto Serif JP', sans-serif; }
.code_lead, .code_no { font-size: 12px; margin: 2%; font-family: 'Noto Serif JP', sans-serif; }

/* --- セクション：lp_parts1 --- */
#lp_parts1 {
    margin: 80px auto;
    max-width: 800px;
    font-family: "Noto Serif JP", serif;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: #333;
    text-align: center;
}

/* タイトル部分（CLASSIC FEEL） */
#lp_parts1 span:nth-of-type(1) {
    display: block;
    font-size: 36px;    /* ★元の大きさに戻しました */
    font-weight: 500;
    margin-bottom: 40px;
}

/* サブタイトル部分（MEISM 2026...） */
#lp_parts1 span:nth-of-type(2) {
    display: block;
    font-size: 20px;    /* ★元の大きさに戻しました */
    margin-bottom: 40px;
    letter-spacing: 0.2em;
}

    .lp_itemBox { margin: 120px auto 0; }

/* --- スマホ個別設定 (640px以下) --- */
@media screen and (max-width: 640px) {
    #lp_parts1 {
        margin: 60px 20px;
        text-align: center;
    }
    #lp_parts1 span:nth-of-type(1) { font-size: 24px; margin-bottom: 15px; }
    #lp_parts1 span:nth-of-type(2) { font-size: 14px; margin-bottom: 20px; letter-spacing: 0.2em; }
    
    .lp_itemBox { margin: 120px auto 0; }
    .lp_parts5 > div { margin-top: 40px; }
}

/* --- 重なりレイアウト --- */
.overlap-layout {
    position: relative !important;
    display: block !important;
    width: 100%;
    max-width: 800px;
    margin: 80px auto 50px !important;
    height: 900px;
}
.overlap-layout .anime:nth-child(1) { position: absolute !important; top: 0; left: 0; width: 55% !important; z-index: 1; }
.overlap-layout .anime:nth-child(2) { position: absolute !important; top: 250px; right: 0; width: 55% !important; z-index: 2; }

@media screen and (max-width: 640px) {
    .overlap-layout { height: 500px; margin: 60px auto 30px !important; }
    .overlap-layout .anime:nth-child(2) { top: 150px; }
}

/* --- アイテムリスト専用調整 --- */
.item-list-section { gap: 10px 2% !important; margin-top: 20px !important; }
.item-list-section > div { margin-top: 0 !important; }
.item-list-section img { margin-bottom: 5px !important; }
.item-list-section .code_lead { margin-top: 5px; line-height: 1.3; font-size: 10px; }

/* BUY NOWボタン */
.buy_btn2{
background: #5c5858;
    color: #ffffff;
    padding: 8px 8px;
    font-size: 12px;
    width: 110px;
    margin: 5% auto 10%;
    border-radius: 4px;
    }

    .buy_btn3{
    background: #b4b4b4;
    color: #ffffff;
    padding: 8px 8px;
    font-size: 12px;
    width: 110px;
    margin: 5% auto 10%;
    border-radius: 4px;
    }

	/* --- スリム固定ヘッダーのスタイル --- */
#utility_header {
    position: fixed;        /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;           /* 高さをスリムに設定 */
    background-color: #fff; /* 背景は白 */
    display: flex;
    align-items: center;    /* 文字を上下中央に */
    z-index: 10000;         /* 他のどの要素よりも上に表示 */
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 境目を分かりやすく少し影を出す */
}

.header_content {
    max-width: 1200px;      /* コンテンツの最大幅 */
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    font-size: 11px;        /* 文字を小さくして上品に */
    color: #666;            /* 文字色は薄めのグレー */
    text-align: left;
    white-space: nowrap;    /* 改行させない */
    overflow: hidden;       /* はみ出た分は隠す（スマホ対策） */
    text-overflow: ellipsis; /* はみ出た場合「...」にする */
}

/* ヘッダーの高さ分だけ、メインビジュアルが隠れないよう調整 */
#lp {
    padding-top: 40px;      /* ヘッダーの高さと同じ分だけ下げる */
}

/* スマホ表示の調整 */
@media screen and (max-width: 640px) {
    #utility_header {
        height: 35px;       /* スマホではさらに細く */
    }
    .header_content {
        font-size: 10px;    /* 文字も少し小さく */
    }
    #lp {
        padding-top: 35px;
    }
}

/* --- TOPに戻るボタンのスタイル --- */
#page-top {
    position: fixed;
    bottom: 20px;      /* 下からの距離 */
    right: 20px;       /* ★ left を right に書き換え！ */
    z-index: 10001;
    display: none;
}

#page-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;       /* ボタンの横幅 */
    height: 50px;      /* ボタンの高さ */
    background-color: #000; /* 黒背景 */
    color: #fff;       /* 白い矢印 */
    text-decoration: none;
    border-radius: 50%; /* 正円にする */
    font-size: 14px;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0.7;      /* 少し透けさせるとオシャレ */
}

/* マウスを乗せた時の反応 */
#page-top a:hover {
    opacity: 1;
    transform: translateY(-5px); /* 少し上に跳ねるアニメーション */
}

/* --- フッターとインスタアイコンの調整 --- */
#lp_parts6 {
    padding: 50px 0;       /* 上下の余白を少し広げて、アイコンに呼吸をさせる */
    text-align: center;
}

.snsicons {
    margin-bottom: 20px;   /* アイコンと下のテキストの間の距離 */
}

/* アイコン画像専用の指定（他への影響を防ぐ） */
.icon_img {
    width: 30px;           /* サイズ固定 */
    height: auto;
    margin-bottom: 0 !important; /* 全体設定の「margin-bottom: 20px」を打ち消す */
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.3s;
}

/* マウスを乗せた時の反応 */
.icon_img:hover {
    opacity: 0.6;
}

.chibi_text_last {
    font-size: 10px;
    margin-top: 15px;
    opacity: 0.7;
}

.chibi_text{
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
    margin: 1px auto 20px; 
    font-family: 'Times New Roman', Times, serif;
    color:#333;
}

.chibi_text_l{
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
    margin: 10px auto 10px; 
    padding: 10px auto 10px;
    font-family: 'Times New Roman', Times, serif;
    color:#333;
    text-align: left;
    width: 90%;
}

@media screen and (min-width:1024px) {
   .chibi_text_l{
    font-size: 14px;
    line-height: 2;
    font-weight: 400;
    margin: 10px auto 10px; 
    padding: 10px auto 10px;
    font-family: 'Times New Roman', Times, serif;
    color:#333;
    text-align: left;
    width: 60%;
}
}

.mini{
    font-size: 22px;
    line-height: 2;
    font-weight: 400;
    margin: 20px auto 20px; 
    font-family: 'Times New Roman', Times, serif;
    color:#333;
    vertical-align: baseline;
}

.contents_title{
    font-size: 30px;
    line-height: 1.5;
    font-weight: 400;
    margin: 10px auto 15px; 
    font-family: 'Times New Roman', Times, serif;
    color:#333;
}

.contents_title2{
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    margin: 10px auto 15px; 
    font-family: 'Times New Roman', Times, serif;
    color:#333;
}


/* テーブル */
table{
  width: 40%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
}

table th,table td{
  padding: 10px 0;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #e7e6df
}

@media screen and (max-width: 640px) {
table{
  width: 90%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-left: auto;
  margin-right: auto;
}

table th,table td{
  padding: 10px 0;
  text-align: center;
}

table tr:nth-child(odd){
  background-color: #e7e6df
} 
}

/* 親要素：折り返しを許可 */
.lp_parts5 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* アイテム間の隙間 */
}

/* PC：4列（100% ÷ 4 = 25%） */
.lp_parts5 .anime {
  width: calc(25% - 10px);
  box-sizing: border-box;
}

/* SP：画面幅が768px以下の時、2列に切り替え */
@media screen and (max-width: 768px) {
  #no1 .lp_parts5.flex {
    /* アイテム全体を中央に寄せる */
    justify-content: center; 
    /* もし左右の端に少し余裕を持たせたい場合は padding を追加 */
    padding: 0 10px; 
    box-sizing: border-box;
  }

  #no1 .lp_parts5 .anime {
    /* 幅の計算を微調整（隙間10pxの場合、5pxずつ引くとより正確です） */
    width: calc(50% - 5px); 
    margin-bottom: 10px;
  }
}

  /* すべてのリンク（aタグ）の装飾をリセットする場合 */
a {
    text-decoration: none; /* 下線を消す */
    color: inherit;       /* 親要素の色を引き継ぐ（または #333 など指定の色に） */}