@charset "utf-8";

/*-- ご利用までの流れ -------------------------------------------------------*/

.flowArrow {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* スクロールを制御するためのラッパー要素 */
/* feeTableWr をスクロールのラッパーとして利用します */
.feeTableWr {
    overflow-x: auto; /* ここで横スクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールをスムーズにする */
    /* 必要に応じて、最大幅を設定することもできます（例: 100vw） */
    /* max-width: 100vw; */
    overflow-y: hidden; /* 縦方向のスクロールは不要な場合 */
}

.feeTable {
    display: grid; /* feeTable自体をGridコンテナにする */
    /* 各行のグリッド定義をここに移動する */
    grid-template-columns: 140px minmax(360px, max-content) 190px; /* 例: 2列目を最小250px、コンテンツに合わせて最大幅に */
    /* または固定値で合計幅を確保 */
    

    /* グリッド全体の幅をコンテンツの最大幅に合わせる */
    /* これにより、feeTableがfeeTableWrの幅を超えて広がる */
    width: max-content;

    /* ヘッダーとデータ行の配置 */
    /* feeTrをグリッド行として扱わないようにする */
     /* 各行の高さをコンテンツに合わせる */
    max-width: none; /* 親のmax-width: 1200px; を上書き */
    width: auto; /* 親のwidth: 1200px; を上書き */
}

/* 各行のラッパーであるfeeTrは、グリッドの子要素が直接グリッドアイテムになるようにする */
.feeTr {
    display: contents; /* これが重要！子要素(feeTh, feeTd)が直接feeTableのグリッドアイテムになる */
    color: #444;
}

/* 各セル（ヘッダーとデータ）の共通スタイル */
.feeTItem {
    border-right: 1px solid #ED7B1D;
    border-bottom: 1px solid #ED7B1D;
}

.feeTh {
    background-color: #FFC76E;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    display: flex; /* pタグを中央揃えにするため */
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
}

.feeTr01 .feeTh:first-child {
    background-color: #FCB84D;
}

.feeTr02 .feeTItem:last-child {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.feeTd {
    padding: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    background-color: #fff;
}

/*---------------------------------------------------------------------------*/

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:375px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 375px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:414px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

  



/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 414px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:544px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  

  
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 544px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:768px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

    .feeTableWr {
        overflow-x: unset; /* PCでは横スクロールを無効にする */
        overflow-y: unset; /* PCでは縦方向のoverflowも解除 */
    }

    .feeTable {
        width: 100%; /* PCでは親要素の幅いっぱいに広げる */
    }

    /* PCではテキストの折り返しを許可しても良い場合 */
    .feeTItem {
        white-space: normal; /* テキストの折り返しを許可 */
        overflow: visible; /* はみ出しを許可 */
        text-overflow: clip; /* 三点リーダーを無効化 */
    }

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 768px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:992px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

.feeTable {
    /* PCでは、グリッドの列定義を調整して、1frが有効に働くようにする */
    grid-template-columns: 140px 1fr 255px; /* 1frで残りのスペースを埋める */
}

.feeTh {
    padding: 40px 15px;
}

.feeTd {
    padding: 40px;
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 992px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */