/* .main img {
    width: 100%;
} */
.main p{
    font-size: 1rem;
    margin-top: 0px;
}

h1, h2{
    margin-top: 20px;
    margin-bottom: 0px;
}

.case_top {
    position: relative; /* pタグの絶対配置の基準 */
    width: 100%;        /* 親要素の幅いっぱいに広げる */
}
.case_top img {
    display: block;
    width: 100%;
    height: 80%; /* 縦横比を維持 */
}
.case_top p {
    /* 絶対配置で画像の上に重ねる */
    position: absolute;
    top: 0;
    /* left: 0; */
    width: 100%;
    height: 100%;
    
    /* Flexboxでテキストを画像コンテナの中心に持ってくる */
    display: flex;
    justify-content: center; /* 水平方向の中央 */
    align-items: end;     /* 垂直方向の中央 */
    
    /* テキストのスタイル調整 */
    color: rgb(0, 0, 0); /* テキスト色を白に (画像によっては見やすい色に調整) */
    font-size: 2rem;
    /* font-weight: bold; */
    text-align: center;
    line-height: 1.5;
    /* padding: 10px; */
    margin: 0; /* pタグのデフォルトマージンをリセット */
}
.case_top span {
    /* 絶対配置で画像の上に重ねる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Flexboxでテキストを画像コンテナの中心に持ってくる */
    display: flex;
    justify-content: center; /* 水平方向の中央 */
    align-items: top;     /* 垂直方向の中央 */
    
    /* テキストのスタイル調整 */
    color: rgb(0, 0, 0); /* テキスト色を白に (画像によっては見やすい色に調整) */
    font-size: 3.75rem;
    text-align: center;
    line-height: 1.5;
    padding: 5px;
    margin: 0; /* pタグのデフォルトマージンをリセット */
}
.case_top span img {
    width: auto;
    height: 80px;
}
.case_logo_top{
    position:absolute;
    bottom:55px;
    left:50%;
    transform:translateX(-50%);
}

.case_logo_top img{
    width:300px;
    max-width:80%;
    display:block;
    height: 80%!important;
}

/* キャッチコピー */
.case_catch{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);

    width:90%;
    margin:0;

    text-align:center;
    font-size:1.25rem!important;
    font-weight:bold!important;
    color:#000;
}

/* core */
/* core */
.shape_top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 25px; /* 縦 横 */
    max-width: 1000px;
    margin: 0 auto;
}

.shape_top > div {
    text-align: center;
}

.shape_top a {
    display: block;
    text-decoration: none;
    color: #333;
}

.shape_top p {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
}

.shape_top img {
    width: 100%;
    display: block;
}

/* magnet */
/* アイテム間の隙間（ギャップ）を設定 */
:root {
    --gap: 15px;
}

.colors {
    display: flex; /* Flexコンテナにする */
    flex-wrap: nowrap; /* ★折り返しをしない（横一列を強制）★ */
    gap: var(--gap); /* ★アイテム間に等間隔な隙間を設定★ */
    width: 100%; /* 親要素の幅いっぱいに広げる */
    overflow-x: auto; /* 画面に収まらない場合は横スクロールを可能にする */
    padding-bottom: 5px; /* スクロールバーのための余白 */
    
    /* 垂直方向の中央揃え (必要に応じて) */
    align-items: flex-start; 
}

.colors > div {
    /* アイテムが縮小・拡大できる設定 */
    flex-shrink: 1; /* 画面が狭いときに縮小を許可 */
    flex-grow: 0;   /* 拡大はしない */
    flex-basis: 150px; /* ★アイテムの最小幅を設定 (これ以上小さくならないように) ★ */
    
    /* 内部のテキストを中央寄せに */
    text-align: center;
}

.colors img {
    width: 100%; /* 親divの幅いっぱいに広げる */
    height: auto;
    display: block;
}

.colors p {
    margin-top: 5px;
    font-size: 0.9rem;
}

















.magnet_comment span{
    font-size: 0.75rem;
}
/* アイテム間の間隔の基準となる値を定義 */
:root {
    --gap: 20px; /* 左右カラム間のスペース */
    --img-gap: 10px; /* 画像間のスペース */
}

/* --- 1. 全体を囲むコンテナ (.magnet_top) --- */
.magnet_top {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--gap); 
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;
}

/* --- 2. 各タイプ（.with_magnet, .no_magnet）のコンテナ --- */
.with_magnet,
.no_magnet {
    /* PCでは50%の幅を取り、左右に並べる */
    width: calc(50% - (var(--gap) / 2)); 
    box-sizing: border-box;
    /* margin-bottom: 20px;  */
}
.with_magnet{
    padding-right: 10px;
}
.no_magnet{
    padding-left: 10px;
}
.chalk_type {
    margin: 10px auto;
}


/* 3. タイトル（pタグ）のスタイル */
.with_magnet > p,
.no_magnet > p {
    font-size: 1rem;
    /* font-weight: bold; */
    text-align: center;
    margin: 0 0 5px 0;
    padding: 5px;
}

/* --- 4. 画像を囲むdiv (画像を横に並べるFlexコンテナ) --- */
.with_magnet > div,
.no_magnet > div {
    display: flex;
    flex-wrap: wrap; 
    gap: var(--img-gap); /* 画像間のスペース */
    justify-content: flex-start;
}

/* --- 5. 画像と動画リンクコンテナの均等幅設定（★ここを修正★） --- */
/* PCで2列表示にするため、幅を50%基準に変更 */
.with_magnet img,
.no_magnet img,
.magnet_movie {
    /* 2枚が均等に並ぶように幅を設定 */
    /* 50%から、画像間のギャップを考慮した値を引く (10px * 1 / 2 = 5px) */
    width: calc(50% - (var(--img-gap) / 2)); 
    height: auto;
    display: block;
    box-sizing: border-box;
    position: relative; /* 動画リンクのpタグを重ねる基準 */
}
/* imgタグはFlexアイテムとして直接指定されているものに限定 */
.with_magnet > div > img,
.no_magnet > div > img {
    /* imgタグはFlexアイテムとして、直接幅を適用 */
    width: calc(50% - (var(--img-gap) / 2)); 
    object-fit: cover; 
}


/* 6. 動画リンクコメントの重ね合わせ（変更なし） */
.with_magnet span{
    font-size: 0.75rem;
}
.magnet_movie {
    overflow: hidden; 
}

.magnet_movie img {
    width: 100%; 
    height: auto;
    display: block;
}

.magnet_movie p {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5); 
    color: #fff;
    font-size: 2rem;
    /* font-weight: bold; */
    margin: 0;
    padding: 0;
    transition: background-color 0.3s; 
}
.magnet_movie:hover p {
    background-color: rgba(0, 0, 0, 0.3);
}

/* colors */


/* price&spec */
table {
    table-layout: auto;
    width: auto; /* 親要素の幅に合わせて全体を表示 */
    border-collapse: collapse;
}
th, td {
    text-align: center!important;
    font-size: 0.6rem;
    border: 1px solid #ccc;
    padding: 4px;
    text-align: left; /* テキスト左揃え */
    white-space: nowrap; /* セル内のテキストを折り返さないようにする（必要に応じて） */
}
thead{
    background-color: rgba(128, 128, 128, 0.224);
}
.table-wrap {
    /* テーブルの横幅がコンテナからはみ出した場合に、横スクロールバーを表示する */
    overflow-x: auto;
    
    /* 必要に応じて、コンテナの最大幅を設定 */
    max-width: 100%;
}
.table-wrap p{
    font-size: 0.75rem;
    margin-top: 10px;
}

/* option */
.case_option {
    display: flex;
    gap: 10px; /* テキストと画像の間隔 (任意) */
    width: 100%;
}
.case_option p {
    flex-basis: 70%; /* ★幅の基準を70%に設定★ */
    text-align: left; 
}
.case_option a {
    flex-basis: 30%; /* ★幅の基準を30%に設定★ */
    text-align: right; /* 画像を右端に寄せる（任意） */
    flex-shrink: 0; 
    flex-grow: 0;
}
.case_option a img {
    width: 100%;
    height: auto; /* 縦横比を維持 */
    display: block;
}



/* ******************* hokder.html ********************** */
/* アイテム間の間隔の基準となる値を定義 */
:root {
    --gap: 10px; /* アイテム間のスペース */
}

/* 1. 全体を囲むコンテナ (.holder_how_to) */
.holder_how_to {
    display: flex;
    flex-wrap: wrap; 
    
    /* 負のマージンで、コンテナの左右の端にアイテムが密着するように相殺 */
    margin-left: calc(-1 * var(--gap) / 2); 
    margin-right: calc(-1 * var(--gap) / 2); 
    /* 縦方向のスペースを確保 */
    margin-bottom: calc(-1 * var(--gap)); 
}

/* 2. 各アイテム (<div>) の設定 */
.holder_how_to > div {
    /* アイテム間の間隔を確保するため、左右にパディングを設定 */
    padding-left: calc(var(--gap) / 2);
    padding-right: calc(var(--gap) / 2);
    
    /* 3列表示のための幅設定 */
    width: calc(100% / 3); 
    
    /* 高さを自動調整（正方形にしない） */
    height: auto; 
    box-sizing: border-box; 
    
    position: relative; /* 内部の画像やリンクを絶対配置する基準 */
    overflow: hidden; /* はみ出したコンテンツを隠す */
    
    margin-bottom: var(--gap); /* 縦方向のスペース */
}

/* 3. 画像自体の調整（縦横比を維持し、幅いっぱいに広げる） */
.holder_how_to > div img {
    width: 100%;
    height: auto; /* ★縦横比を維持★ */
    display: block;
}


/* --- 4. 動画リンクのテキスト中央配置 (.magnet_movie) --- */
/* magnet_movieコンテナを相対位置の基準に */
.magnet_movie {
    position: relative;
}

/* <a>タグに幅と高さを100%設定し、画像全体をリンク可能にする */
.magnet_movie a {
    display: block;
    text-decoration: none;
    color: inherit;
    /* 画像の上に重ねるため、絶対配置にし、画像全体を覆う */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 動画を見るテキスト (p) を画像の中央に重ねる */
.magnet_movie p {
    /* <a>タグを基準として画像全体に広げる */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Flexboxでテキストを完全に中央に配置 */
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;     /* 垂直中央 */

    /* スタイル */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
    color: white;
    /* font-weight: bold; */
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    border-radius: 5px;
}
/* set */
.case_set_top{
    display: flex;
    width: 100%;
}
.case_set_top img{
    width: 25%;
    margin-right: 15px;
}
.case_set{
    display: block;
}
.case_set p{
    margin-top: 0!important;
}

/* holder_top */
.holder_top {
    display: flex; /* Flexコンテナにする */
    
    /* ★アイテム間の隙間を均等に設定し、両端はコンテナの端に密着させる★ */
    justify-content: space-between; 
    
    flex-wrap: nowrap; /* 横一列を維持し、折り返さない */
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    margin-top: 10px;
}

.holder_top > div {
    /* アイテムの幅を均等に設定（この場合は3つなので、33.333%以下） */
    /* justify-content: space-between; を使う場合、widthは均等幅以下にする */
    width: 32%; /* 例: 31%に設定し、アイテム間に隙間を作る */
    
    /* 内部の画像を中央寄せにするための設定 */
    text-align: center;
}

.holder_top img {
    width: 100%; /* 親divの幅いっぱいに広げる */
    height: auto;
    display: block;
}

.jc_top{
    font-size: 1.5rem!important;
    padding-bottom: 20px!important;
}
.jc_top span{
    font-size: 0.7rem!important;
    top: 0!important;
    left: 0!important;
    align-items:flex-end!important;
    width: 100%;
    height: 100%;
    justify-content: right;
    padding: 3px!important;
}

.jc-holder-images {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.image-box {
    position: relative;
}

.image-box img {
    width: 100%;
    display: block;
}

.top-text {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    margin: 0;

    text-align: center;
    font-size: 1.25rem!important;
    font-weight: 700;
    color: #222;
}

.bottom-text {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    margin: 0;

    text-align: center;
    font-size: 13px!important;
    font-weight: 600;
    color: #222;
}

.top-text {
    font-size: clamp(18px, 2vw, 32px);
}

.bottom-text {
    font-size: clamp(12px, 1.2vw, 18px);
}

.jc-holder-images {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.image-box {
    position: relative;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




/*  purchase */
.purchase_top div{
    display: flex;
    justify-content: space-between;
}
.purchase_top i{
    margin-left: 30px;
}















/* ********** レスポンシブ ********** */
/* @media (max-width: 768px) { */
@media (max-width: 1200px) {
    .main p{
        font-size: 0.58rem;
    }
    h2 {
        margin-top: 10px;
        margin-bottom: 0px;
    }

    th, td {
        text-align: center!important;
        font-size: 0.3rem;
        border: 1px solid #ccc;
        padding: 2px;
        text-align: left;
        white-space: nowrap;
    }
    thead{
        background-color: rgba(128, 128, 128, 0.224);
    }
    .purchase_top p{
        width: 100%;
    }
    .purchase_top img{
        width: 70%;
    }

    .case_top span img {
        width: auto;
        height: 40px;
    }

    .case_logo_top {
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }

    .case_logo_top img {
        width: 150px;
        max-width: 100%;
        display: block;
        height: auto !important;
    }
    
    /* キャッチコピー */
    .case_catch{
        position:absolute;
        bottom:15px;
        left:50%;
        transform:translateX(-50%);

        width:90%;
        margin:0;

        text-align:center;
        font-size:0.7rem!important;
        font-weight:bold!important;
        color:#000;
    }

    /* 1. 親コンテナをFlexboxに設定 */
    .purchase_top {
        /* display: flex; */
        /* アイテムの縦位置を上端に揃える */
        align-items: flex-start; 
        /* アイテム間に適度な隙間を設定（例: 20px） */
        gap: 20px; 
        width: 100%;
        box-sizing: border-box;
    }
    /* 2. 左側のLINE案内のブロック (70%幅) */
    .purchase_top div > p:first-child {
        /* ★幅の基準を70%に設定★ */
        flex-basis: 75%; 
        /* 縮小・拡大を防ぎ、70%を維持する */
        flex-shrink: 0;
        flex-grow: 0;
    }
    /* 3. 右側のX/メール案内のブロック (30%幅) */
    .purchase_top div > p:last-child {
        /* ★幅の基準を30%に設定★ */
        flex-basis: 25%; 
        /* 縮小・拡大を防ぎ、30%を維持する */
        flex-shrink: 0;
        flex-grow: 0;
        text-align: center;
    }
    .purchase_top i{
        font-size: 0.7rem;
        margin-left: 10px;
    }
    .magnet_movie:hover p {
        background-color: rgba(0, 0, 0, 0.3);
    }
    .with_magnet > p, .no_magnet > p {
        font-size: 0.75rem!important;
        /* font-weight: bold; */
        text-align: center;
        margin: 0 0 5px 0;
        padding: 5px;
    }
    .with_magnet,
    .no_magnet {
        width: 100%; 
        margin-bottom: 10px; 
    }
    .with_magnet {
        padding-right: 0px;
    }
    .no_magnet {
        padding-left: 0px;
    }

    /* *********** holder.html ********** */
    .case_top p {
        font-size: 0.75rem!important;
        /* font-weight: bold; */
        padding-bottom: 5px!important;
    }
    .colors p {
        margin-top: 3px;
        font-size: 0.4rem;
    }
    .holder_how_to > div {
        width: 33%; /* スマホでは2列表示 */
        padding-top: 0; /* 高さを固定しない */
    }

    .foot p:nth-child(3) img{
        width: 85px; 
        height: auto;
        vertical-align: middle; /* テキストなどと並ぶ場合に中央に揃える */
    }

    .top-text{
        /* padding-left: 5px; */
        /* text-align: left; */
        font-size: 0.65rem!important;
    }

    .jc_top{
        font-size: 1rem!important;
        /* font-weight: bold; */
        padding: 5px;
    }

    .jc_top span{
        font-size: 0.58rem!important;
    }

    .bottom-text{
        font-size: 0.5rem!important;
        text-align: right;
        padding-right: 5px;
    }

    .chalk_top {
        margin: 20px auto!important;
        display: flex;
        flex-wrap: wrap;
        margin-left: calc(-1 * var(--gap) / 2);
        margin-right: calc(-1 * var(--gap) / 2);
        margin-bottom: calc(-1 * var(--gap));
    }

    .chalk_top span {
            padding-top: 15px!important;
    }

    .chalk_top > div {
        width: 33%;
        padding-top: 0;
    }

    .chalk_info img {
        width: 100%;          /* 親要素の幅いっぱいに広げる */
        height: 100px;        /* ★ここでお好みの高さを固定する */
        object-fit: cover;    /* ★重要：アスペクト比を保ったまま枠を埋める */
        border-radius: 8px;   /* 角丸にする（元画像に合わせて） */
    }

    .chalk_info p {
        font-size: 0.5rem!important;
    }
}


/* --- スマートフォンでのレイアウト調整 (768px以下で1カラムにする) --- */
@media (max-width: 768px) {
    .magnet_top {
        flex-direction: column; 
        gap: 0;
    }
    
    
    
    /* スマホでも2列表示を維持する */
    /* .with_magnet img,
    .no_magnet img,
    .magnet_movie {
        width: calc(50% - (var(--img-gap) / 2)); 
    } */
}
/* --- レスポンシブ調整（タブレット・スマホ） --- */

/* タブレット（例: 768px以下）で4列表示 */
@media (max-width: 768px) {
    .colors > div {
        width: 25%; /* 100% / 4 */
    }
}

/* スマートフォン（例: 480px以下）で3列表示 */
@media (max-width: 480px) {
    .colors > div {
        width: 33.333%; /* 100% / 3 */
    }
}