:root {

    --shadow: #f8f7f7;
    --line: #e8e8e8;
    /*  枠線　 */
    --ltgr: #c1c0c0;
    /*  灰色の文字 薄め　 */
    --bk: #1f1f23;
    /*  ロゴと同じ黒　 */
    --mjgr: #939393;
    /*  灰色の文字　 */
    --mosgray: #53535f;
    --mjdrgr: #444444;
    --main: #022241;
    /*  ロゴと同じ緑　 */
    --drgre: #ddaa38;
    /*  濃い緑　 */
    --red: #ff0000;
    --dred: #f00c0c;
    --ared: #cc0c39;
    --yellow: #ffd311;
    --pink: #ff2466;
    --momo: #ee4d5c;
    --orange: #ff8000;
    --ltorange: #ffa041;
    --blue: #1e3a8a;
    --green: #15803d;
    --ltblue: #4ba1fd;
    --newlocal: #ff8000;
    --local: #703310;
    --koime: #005fbb;
    --usume: #d5d5d5;


}



html {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: var(--mjdrgr);

}

/*
    outline: 1px solid rgba(255, 100, 224, 0.757)!important; */
* {
    box-sizing: border-box !important;
    vertical-align: baseline !important;

}

body {
    font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;

    font-family: "Roboto", Helvetica, Arial, sans-serif, "Noto Sans JP";
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

.br {
    display: inline-block;
}

.bold {
    font-weight: 700;
}

h1 {
    color: var(--mjdrgr);
    text-align: center;
    padding: 0 0 .8em;
}


/*  main area
    background-color: #f8f7f7; */
main {
    margin: 0 auto;
    min-height: calc(100vh - 160px);
    height: calc(100% -100px);
}

.lp-style {
        margin: 0 auto;

}

.lp-style img {
    width: 100%;
}


/* 　  */
.background-area {
    margin: 0 auto;
    max-width: 1000px;
    border: 1px solid var(--line);
    min-height: calc(100vh - 160px);
    height: calc(100% -100px);
    padding: 1em .5em 2em;
}

.signup {
    min-height: calc(100vh - 200px) !important;
}

.addfriend {
    min-height: calc(100vh - 80px);
}

/*  BTN  */

.btn {
    display: block;
    text-align: center;
    margin: 0;
    padding: 1.5em 0;
}

.btn a,
.btn button {
    text-align: center;
    border-radius: 3px;
    border: none;
    outline: none;
    font-weight: bold;
    padding: 1em 3em;
    font-size: .95em;

    color: #fff;

    transition: all 0.3s ease;
}

/*  signup   */
.attention-text {
    font-weight: 400;
    font-size: .8em;
    padding: 0 0 0 .85em;
    color: var(--dred);
}

.signup p:last-of-type {
    padding: 1em 0 0 0;

}

.attention {
    line-height: 1.6;
    font-size: .8em;
    padding: 1em .5em;
    color: var(--mjdrgr);
}

.memo {
    line-height: 1.6;
    font-size: .8em;
    color: var(--mjdrgr);
}

.memo::before {
    font: var(--fa-font-solid);
    font-family: FontAwesome;
    content: "\f08d";
    vertical-align: baseline;
    padding-right: .5em;

}

.left {
    text-align: left;
}

.t-red {
    color: #ff0000;
}

.t-green {
    color: var(--main);
}

.t-brown {
    color: var(--local);
}

.t-drgreen {
    color: var(--drgre);
}

.t-pink {
    color: #ff2466;
}

.t-orange {
    color: #ff8000;
}

.t-blue {
    color: #1965fc;
}

.gray {
    background: #A5A5A5;
}

.gray:hover {
    background: #656565;
    transition: background-color .3s ease-out;
}

.red {
    background-color: #ff0b0b;
}

.red:hover {
    background: #dd0707;
    transition: background-color .3s ease-out;
}

.green {
    background-color: var(--main);
}

.green:hover {
    background: #397200;
    transition: background-color .3s ease-out;
}

.drgreen {
    background-color: var(--drgre);
}

.drgreen:hover {
    background: #107a00;
    transition: background-color .3s ease-out;
}

.pink {
    background-color: #ff2466;
}

.pink:hover {
    background: #dc0554;
    transition: background-color .3s ease-out;
}

.orange {
    background-color: #ff8000;
}

.orange:hover {
    background: #e16d08;
    transition: background-color .3s ease-out;
}

.blue {
    background-color: #0a3a99;
}

.blue:hover {
    background-color: #061f53;
    transition: background-color .3s ease-out;
}

.fa-cart-plus {
    padding: 0 .5em 0 0;
}

.fa-gift {
    padding: 0 .2em 0 0;
}

.fa-coins {
    color: var(--yellow);
    padding: 0 .3em 0 0;
}

.coin-icon .fa-coins {
    padding: 0 !important;
}

.star-wrapper .fa-star {
    color: var(--yellow);
    font-size: 2em;
    padding-bottom: .25em;
}

.fa-trash-can {
    padding: 0 .5em 0 0;
}

.fa-chess-king {
    color: var(--main);
    padding: 0 .3em .2em 0;
}

.fa-credit-card,
.fa-wallet {
    color: var(--ltblue);
    font-size: 1em;
    padding-right: .5em;
}

.fa-thumbtack {
    padding-right: .25em;
    font-size: 1em;


}

/*  index  */


/* 全体のスタイル */
.swiper1 {
    margin-bottom: 1em;
    position: relative;
}

.swiper1 .swiper-wrapper {
    transition-timing-function: linear;
}

.swiper1 .swiper-slide>img {
    width: 100%;
    display: block;
}

/* 点々エリア */
.swiper-pagination1 {
    position: relative !important;
    margin-top: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

}

/* 通常 */
.swiper-pagination1 .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d5d5d5;
    opacity: 1;
    border-radius: 999px;
    transition: .25s ease;

}

/* 選択中 */
.swiper-pagination1 .swiper-pagination-bullet-active {
    width: 10px;
    background: var(--main);
    box-shadow: 0 2px 8px rgba(8, 43, 82, .2);

}

.index-pic {
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

.index-pic img {
    width: 100%;

}

.index-pic div p {
    color: var(--bk);
    font-weight: 700;
    padding: .5em .5em;
    font-size: 1em;
    box-shadow: 0 1px 3px var(--line);
}

.index-pic div {
    border-radius: 3px;
    width: 49.8%;
    padding-bottom: .5em;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
    font-size: .85em;
}

.pagination a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    height: 2em;
    border-radius: 1px;
    background-color: var(--shadow);
    color: var(--main);
}

.pagination a:not(:hover) {
    text-decoration: none;
}

.pagination .current a {
    background-color: var(--main);
    color: #fff;
    pointer-events: none;
}

.pagination .prev a,
.pagination .next a {
    gap: 0 4px;
    width: auto;
    padding: .5em .8em;
    line-height: 1;
}

.pagination .prev a::before,
.pagination .next a::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    content: '';
}

.pagination .prev a::before {
    border-bottom: 1px solid var(--main);
    border-left: 1px solid var(--main);
}

.pagination .next a::after {
    border-top: 1px solid var(--main);
    border-right: 1px solid var(--main);
}

.pagination span.dots {
    pointer-events: none;
    border: none !important;
    width: 2.2em;
    color: var(--line);
}

/*  mypage  */
.mypage form {
    display: flex;
    flex-direction: column;
    color: var(--mjdrgr);
}


.mypage input[type="text"]:checked {
    border: 1px solid var(--main);
    outline: none;
}

.mypage fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.mypage .nickname input[type="text"] {
    width: 100%;
    font-size: 1em;
    border: 1px solid var(--line);
    padding: .5em;
    border-radius: 3px;
    margin: 0 0 .5em;
    color: var(--mjdrgr);

}

.mypage .emailadress input[type="email"] {
    width: 100%;
    font-size: 1em;
    border: 1px solid var(--line);
    padding: .5em;
    margin: 0 0 .5em;
    border-radius: 3px;
    color: var(--mjdrgr);
}

.mypage .passwordarea input[type="password"] {
    width: 100%;
    font-size: 1em;
    border: 1px solid var(--line);
    padding: .5em;
    margin: 0 0 .5em;
    border-radius: 3px;
    color: var(--mjdrgr);
}

.paddi {
    padding: 0 0 .5em;
    text-align: right;
    color: var(--pink);

}

.mypage .nickname {
    width: 100%;
    display: block;
}


/* ラジオボタンをラベル全体クリック可能に */

.mypage input[type="radio"] {
    display: none;
}

.mypage legend {
    width: 100%;
    padding: .5em;
    font-size: .85em;
    color: var(--mjdrgr);
    margin: .5em 0;
    background-color: var(--shadow);
    border-radius: 3px;
    font-weight: 600;
}

.mypage label:not(.nickname):not(.emailadress):not(.passwordarea) {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #fff;
    position: relative;
    border-radius: 3px;
}

.mypage label:not(.nickname):not(.emailadress):not(.passwordarea):before {
    content: " ";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--line);
    border-radius: 50%;
    margin-right: 10px;
    box-sizing: border-box;
}



.mypage input[type="radio"]:checked+label {
    background-color: var(--shadow);
    border-color: var(--main);
    border: 1px solid var(--main);
    outline: none;
    color: var(--mjdrgr);
}

.mypage input[type="radio"]:checked+label::before {
    background-color: var(--main);
    border-color: var(--main);
}

/*  SUPPORT  */
.chat-list li {
    padding: .5em 0;
    font-size: 1em;
    border-bottom: 1px solid var(--line);
}

.chat-list a {
    color: var(--mjdrgr);

}

/*  HOVER  */
.chat-list a:hover dl {
    background-color: var(--line);
    border-radius: 5px;
    transition: background-color .3s ease-out;

}

.chat-list dl {
    padding: .5em;
    width: 100%;
    display: flex;
}

/* chat list icons  */

.chat-list img {
    width: 100px;
}

.chat-list dl dt {
    display: flex;
    align-items: center;
    position: relative;
    /* 　基準  */
}

.chat-list li.newchat dl dt::after {
    content: "\00a0";
    position: absolute;
    /* 相対位置を指定 */
    top: 3px;
    right: 5px;
    color: #fff;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    width: 20px;
    background: var(--red);
    /* 背景色を赤に指定 */
    border-radius: 50%;
    /* 角丸を50%に指定 */

}

.chat-list dl dd {
    align-items: center;
    padding: .8em 0 0 1em;
    margin-inline-start: 0;
    flex-grow: 1;
    /*  謎の右余白対策 */

}

/*  chat name　 */
.chat-list dl dd span:nth-child(1) {
    font-weight: 700;
    font-size: 1.2em;

}

/*  date　 */
.chat-list dl dd span:nth-child(2) {
    font-weight: 400;
    font-size: 1em;
    color: var(--mjgr);
    float: right;

}

/*  chat word　 */
.chat-list dl dd div.chat-word {
    margin: .8em 0 .5em;
    padding: 0;
    color: var(--mjgr);
    max-width: 600px;
    font-size: 1em;
    line-height: 1.6;
    overflow: hidden;
    /* 溢れた部分を隠す */
    text-overflow: ellipsis;
    /* 「…」と省略 */
    -webkit-text-overflow: ellipsis;
    /* Safari用 */
    -o-text-overflow: ellipsis;
    /* Opera用 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 行数を指定 */

}


/*  REVIEW  */
/* Review List */
.list-review {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* User Review */
.user-review {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 12px 12px 12px 5px;
}

.user-review.blue-border {
    border-left: 4px solid var(--main);
}

.user-review.yellow-border {
    border-left: 4px solid var(--drgre);
}

.user-review-header {
    display: flex;
    gap: 5px;
    align-items: start;
    margin-bottom: 12px;
}

.user-icon {
    width: 25px;
    height: 25px;
    border-radius: 8px;
    flex-shrink: 0;
}

.user-icon img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.user-info {
    flex: 1;
}

.user-name-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.user-review .name {
    font-weight: 600;
    font-size: 14px;
    color: #111;
}

.user-review .date {
    font-size: 12px;
    color: #888;
}

.cpname {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.star {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
}

.star i {
    font-size: 16px;
}

.star i.filled {
    color: #eab308;
}

.star i.empty {
    color: #d1d5db;
}

.comment {
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    margin-bottom: 12px;
}

.img-box {
    width: 100%;
    max-width: 320px;
    margin-bottom: 12px;
}

.img-box img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: opacity 0.2s;
}

.img-box img:hover {
    opacity: 0.9;
}

/* Operator Review */
.list-ope-review {
    background: #f9fafb;
    border-radius: 8px;
    padding: 12px 5px;
    margin-bottom: 12px;
}

.ope-header {
    display: flex;
    gap: 8px;
    align-items: start;
}

.ope-reply-icon {
    color: #6b7280;
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.opename {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.opecomment {
    font-size: 12px;
    line-height: 1.6;
    color: #4b5563;
}

/* レビュー投稿 ─────────── */
.reviewpost-text p {
    padding-bottom: 1em;
}

p.text {
    text-align: center;
    padding: 2px;
    font-size: .8em;
}

.reviewpost dl dt {
    color: var(--mjdrgr);
    font-size: .85em;
}

.reviewpost dl dd {
    padding: .5em 0;
}

.reviewpost dl dd textarea {
    width: 100%;
    padding: .3em .5em;
    border: 1px solid var(--line);
    line-height: 1.6;
    font-size: 1em;
    color: var(--mjdrgr);
}

background-area::placeholder {
    color: var(--mjgr);
}

.custom-textarea.filled {
    color: var(--mjdrgr);
    /* フォーカス時またはテキストが入力されたら濃い文字色 */
}


/* 画像 */
.reviewpost .imagefile label {
    text-align: center;
    display: block;
    width: 100%;
    border: 1px dashed var(--line);
}

.reviewscpic {
    padding: 0;
    margin: 1.5em auto;
    width: 3em;
}

.reviewpic-delete {
    margin: .5em 0 0;
    text-align: right;
}


.reviewpic-delete button {
    border: 1px solid var(--line);
    background-color: var(--mjgr);
    color: white;
    padding: .2em .5em;
    border-radius: 3px;
}

.reviewpic-delete button:focus {
    background-color: var(--mjdrgr);

}

/*  PLAN  */
/* Price Section */


/* Plan Grid */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
}

.plan-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
}

/* Sold Out Overlay */
.sold-out-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sold-out-text {
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 0 16px;
}

/* Category Header */
.plan-header {
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background-color: var(--main);
}

/*
    .plan-header.local {
      background: #16a34a;
    }

    .plan-header.central {
      background: #f97316;
    }
  */
/* Plan Image */
.plan-image {
    width: 100%;
    object-fit: cover;
}

/* Plan Content */
.plan-content {
    padding: 10px;
}

.plan-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Info Row */
.info-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #374151;
}

.info-row i {
    width: 12px;
    height: 12px;
    font-size: 12px;
}

.info-label {
    font-weight: 500;
}

.info-value {
    font-weight: 700;
}

.info-weekday {
    color: #6b7280;
}

.target-race {
    font-size: 11px;
    color: #4b5563;
}

/* Special Offer Box */
.special-offer-box {
    height: 64px;
    margin: 8px -10px;
}

.special-offer {
    height: 100%;
    padding: 6px 8px;
    display: flex;
    align-items: center;
}

.special-offer.purchase {
    background: #fed7aa;
    border-left: 4px solid #f97316;
}

.special-offer.promo {
    background: #fef3c7;
    border-left: 4px solid #eab308;
}

.special-offer-content {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
}

.special-offer i {
    width: 12px;
    height: 12px;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

.special-offer.purchase i {
    color: #ea580c;
}

.special-offer.promo i {
    color: #ca8a04;
}

.special-offer-text {
    flex: 1;
    min-width: 0;
}

.special-offer-title {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.special-offer.purchase .special-offer-title {
    color: #9a3412;
}

.special-offer.promo .special-offer-title {
    color: #374151;
    font-weight: 600;
}

.special-offer-desc {
    font-size: 10px;
    color: #374151;
    line-height: 1.3;
}

/* Price Section */
.price-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 8px;
}

.discount-badge {
    background: #dc2626;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
    line-height: 1.2;
}

.price-info {
    text-align: right;
}

.original-price {
    font-size: 11px;
    color: #6b7280;
    text-decoration: line-through;
}

.current-price {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
}

/* Buttons */
.plan-buttons {
    padding: 0 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-plan {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-details {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-details:hover {
    background: #f9fafb;
}

.btn-purchase {
    background: #fbbf24;
    color: var(--main);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-purchase:hover {
    background: #f59e0b;
}

.btn-purchase i {
    font-size: 14px;
}

/* **************************************************************************************************************************************
*******************************************    ************************************************** */

/* **************************************************************************************************************************************
*******************************************    ************************************************** */


p.plan-ttl {
    background-color: var(--main);
    /* background-image: linear-gradient(110.1deg, #006500 2.4%, #209f0a 90.3%);  */
    color: #fff;
    font-size: .85em;
    padding: .5em .5em;
    font-weight: 700;
}


.plan-list {
    display: flex;
    flex-wrap: wrap;
}

.region {
    margin-right: .5em;
    letter-spacing: 5px;
    text-align: center;
    color: #fff;
    padding: .1em 0 .1em 4.8px;
    font-size: 1em;
    font-weight: 700;
    border-radius: 3px;
}

/* 旧帯 */
section div p.muryou {
    background-color: var(--blue);
}

section div p.tihou {
    background-color: var(--local);
}

section div p.chuou {
    background-color: var(--drgre);

}

.plan-list li section {
    line-height: normal;
    padding: .5em .5em 0;

}

.plan-list li {
    position: relative;
    overflow: hidden;
    margin: 0 .15em;
    margin-bottom: .4em;
    border: 1px solid var(--line);
    border-radius: 3px;
    width: calc(50% - .3em);
    z-index: 200;
}

.wid100 {
    grid-template-columns: 1fr!important;
}

.plan-list li a {
    color: var(--mjdrgr);
}


.plan-list img {
    z-index: 200;
    display: block;
    height: auto;
}

.plan-list li a div:not(.plan-name) {
    align-items: center;
    line-height: normal;
    display: flex;
    text-align: center;
}


.plan-name {
    padding: .25em !important;
    font-size: 1em;
    text-align: left;
    height: 6em;
    margin: .5em 0 .25em;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    /* border-radius: 3px; */
    line-height: 1.6;

}

.plan-comment {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.plan-rate {
    display: block;
    color: var(--mjgr);
    font-size: 1em;
    margin: 0 0 0 auto;
    text-align: right;
}

.plan-rate::before {
    font: var(--fa-font-solid);
    content: "\f005";
    font-size: .9em;
    color: var(--yellow);
    font-family: FontAwesome;
    padding: 0 .2em 0 0;
    margin: auto 0;
    vertical-align: baseline;
}

.swiper2 {
    line-height: 1.8;
    height: 1.7em;
}

.swiper2 .swiper-slide div {
    padding: 0;
}

/*  帯
.swipwords {
    background-image: linear-gradient(317deg, #fdd51e 0%, #FF2525 74%);
    margin: 0 0 .25em 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 3px;
}

.swip-chuou {
    background-image: linear-gradient(110.1deg, #096609 2.9%, #37b521 90.3%);
}
 */

/*  .plan-date, .plan-race, .plan-estimate,.plan-name  */

p.plan-date {
    margin: auto 0;
    padding: 0 .25em;
}

div.plan-date,
.plan-race,
.plan-estimate {
    padding: 0 0 .25em;
    font-size: .85em;
}

div.plan-date p,
.plan-race p,
.plan-estimate p {
    border-radius: 3px;
    padding: 0 .25em;
    color: #fff;

}

/* 帯 */
section.chuou div.plan-date p,
section.chuou .plan-race p,
section.chuou .plan-estimate p {
    background-color: var(--drgre);
}

section.tihou div.plan-date p,
section.tihou .plan-race p,
section.tihou .plan-estimate p {
    background-color: var(--newlocal);
}

section.muryou div.plan-date p,
section.muryou .plan-race p,
section.muryou .plan-estimate p {
    background-color: var(--blue);
}

div.plan-date p,
div.plan-date span,
.plan-race p,
.plan-race span,
.plan-estimate p {
    margin-right: .25em;
}



/*  推定 */
p.plan-post span.plan-post-tag {
    background-color: var(--dred);
    color: #fff;

}

p.plan-post span:nth-child(2) {
    padding: 0 .25em;
    font-weight: bold;
    line-height: 1.6;
}


.swiper2 .swiper-wrapper {
    margin: 0 0 0 auto;
    padding: 0 .3em 0 0;
}

.plan-no,
.plan-pt {
    font-weight: 700;
    padding: 0 .1em;
    margin-left: .5em;
    font-size: 2em;
}



.plan-no::before {
    content: "\00a5";
    /*  円マーク */
    font-size: .85em;
    padding: 0 .1em 0 0;
}

.plan-pt::after {
    content: "PT";
    font-size: .85em;
    padding: 0 0 0 .1em;
}

.plan-price span {
    color: var(--dred);
}

/*  ここを変えます、202602　div:last-child
.plan-list li div:last-child　から変更*/
.plan-list li .plan-pricebox {
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin: .1em .25em .25em;
    height: 57px;

}

.plan-discount {
    position: absolute;
    left: 0;
    font-size: .85em;
    line-height: 1.4;
    color: #fff;
    background-color: var(--dred);
    padding: .15em .45em .15em .5em;
    border-radius: 3px;
    /*
    display: flex;
    left: 6%;
    position: absolute;
    margin: 0 auto 0 0;
    color: #fff;
    background-color: var(--ared);
    padding: .15em .15em .15em .25em;
    border-radius: 3px;
     */
}


.plan-before-discount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: .8em;
    height: 20px;
}

.plan-original-no {
    position: relative;
    display: inline-block;
    color: #52525a;
    font-size: 18px;
    font-weight: bold;
}

.plan-original-no::before {
    content: "\00a5";
    /*  円マーク */
    font-size: .85em;
    padding: 0 .1em 0 0;
}


.strike-line {
    position: absolute;
    top: 50%;
    left: -1%;
    width: 105%;
    height: 2px;
    background-color: #444444;
    border-radius: 15px;
    transform: translateY(-50%) rotate(-3deg);
}


.kaigyo {
    display: none;
}

.plan-price span {

    color: var(--dred);
}

.plan-price {
    position: relative;
    z-index: 1;
    /* .plan-discount の下に隠れないように */
    /*
    margin: 0 .5em 0 0;
    font-weight: 700;
    font-size: 1.2em;
    text-align: center;
     */
}

/*  情報丸
.plan-toinfo {
    margin: auto 0 auto auto;
}

.fa-circle-info {
    color: var(--mjdrgr);
    font-size: 1.3em;
}
    */

p.plan-lookinfo {
    color: var(--mjdrgr);
    text-align: center;
    padding: .5em;
    border-radius: 25px;
    border: 1px solid var(--yellow);
    margin: 0 .25em .25em;
}


.plan-cart {
    width: 100%;
}

.plan-cart a {
    display: block;
    margin: 0 .25em .5em;
    background-color: var(--yellow);
    border: 1px solid var(--yellow);
    padding: .5em 2em;
    text-align: center;
    color: var(--mjdrgr);
    border-radius: 25px;
}




/* プラン黒いとき */
.plan-bk,
.pl-01soldout {
    position: absolute !important;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.80);
    top: 0;
    z-index: 400;
    text-align: center;
}

.plan-bk-text {
    width: 100%;
    display: inline-block;
    padding: 10px 0;
    margin: 0;
    z-index: 600;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1em;
    line-height: normal;
    font-weight: bold;
}

/* プラン情報個別 ───────── */

/* 売り切れ*/

.pl-01soldout {
    position: absolute;
    max-width: 700px;
    height: inherit;
    background-color: rgba(0, 0, 0, 0.95);
    top: 0;
    z-index: 400;
    text-align: center;
}

.soldout {
    max-width: 700px;
    display: inline-block;
    padding: 10px 0;
    margin: 50px 0;
    z-index: 600;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: var(--b2);
    font-weight: bold;
    white-space: nowrap;
    word-wrap: break-word;
}

.back {
    margin: 20px;
    padding: .3em 3em .3em;
    box-sizing: border-box;
    border: none;
    font-weight: bold;
    color: var(--mjgr);
    background: var(--line);
    border-radius: 3px;
}

/* 通常 */
.plan-info-img {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 .5em;
}



/* Plan Info */
.plan-infomation {
    z-index: 10;
    position: relative;
    margin: .5em 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.plan-infomation dt {
    margin-bottom: 16px;
}

.plan-info-ttl {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

.t-drgreen {
    color: #15803d;
}

.t-brown {
    color: #92400e;
}

.hitlist-btn {
    text-align: end;
    margin: 12px 0;
}

.hitlist-btn a {
    border-radius: 50px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #fff;
    background: #eab308;
    text-decoration: none;
}

/*
    .hitlist-btn a:hover {
      color: #1e40af;
    }
 */
.hitlist-btn i {
    font-size: 16px;
}

.plan-point-header {
    margin-bottom: 1em;
}

.plan-info-mini {
    display: inline-block;
    background: var(--main);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 4px;
}

/* Centering Section */
.centering {
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

/* Gift Row */
.plan-gift-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
}

.plan-gift-row i {
    color: #374151;
    font-size: 20px;
}

.plan-gift-row>span:first-of-type {
    font-size: 14px;
    font-weight: 500;
}

.plan-gift-value {
    font-size: 24px;
    font-weight: 700;
    color: #2563eb;
    margin-left: auto;
}

/* Plan Details Grid */
.plan-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.plan-detail-box {
    background: #f9fafb;
    border: 1px solid #e5e5e7;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.plan-detail-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 8px;
}

.plan-detail-value {
    font-size: 16px;
    font-weight: 700;
}

.plan-detail-value.price {
    font-size: 24px;
    color: #dc2626;
}

.plan-share {
    font-size: 16px;
    font-weight: 700;
}

.highshare {
    color: #dc2626;
}

.separator {
    color: #9ca3af;
    margin: 0 2px;
}

.plan-amount {
    font-size: 24px;
    font-weight: 700;
}

/* Article Text */
.article-text {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    margin: 16px 0;
    white-space: pre-line;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 0;
}

.feature-item {
    text-align: center;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.feature-icon i {
    color: #16a34a;
    font-size: 24px;
}

.feature-title {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.feature-desc {
    font-size: 10px;
    color: #6b7280;
    line-height: 1.3;
}

/*  PLAN DETAILS  ──────────────────────── */
/*  HIT LIST  */
.hit-list {
    padding: 1em 0 0 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hit-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Left colored bar */
.hit-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.hit-item.central::before {
    background-color: var(--blue);
}

.hit-item.local::before {
    background-color: #15803d;
}

/* Header */
.hit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid #e5e5e5;
}

.hit-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-badge {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: white;
}

.category-badge.central {
    background-color: var(--blue)
}

.category-badge.local {
    background-color: var(--green)
}

.race-name {
    font-weight: 500;
    font-size: 14px;
}

.hit-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #eab308;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.hit-badge i {
    font-size: 12px;
}

/* Content */
.hit-content {
    padding: 16px 16px 16px 20px;
    display: flex;
    justify-content: space-between;
}

.hit-info {
    line-height: 1.2;
    flex: 1;
}

.hit-info p {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}

.hit-info p:last-of-type {
    color: #555;
    margin-bottom: 12px;
}

.bet-tags {
    display: flex;
    gap: 8px;
}

.bet-tag {
    padding: 4px 12px;
    background-color: #e5e5e5;
    color: #333;
    border-radius: 4px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

.bet-tag:hover {
    background-color: #d4d4d4;
}

.hit-amount {
    display: flex;
    align-items: center;
    margin-left: 16px;
}

.hit-amount i {
    color: #dc2626;
    font-size: 16px;
    margin-bottom: 4px;
}

.hit-amount-value {
    font-size: 24px;
    font-weight: bold;
    color: #dc2626;
}

.hit-amount-value span {
    font-size: 14px;
}





/*  PLAN ORDER  */
.plan-order dl {
    border-bottom: 1px solid var(--line);
    margin: 0 0 .8em;
}

.plan-order dt,
.plan-point p:first-child {
    font-weight: 600;
    line-height: 1.6;
    background-color: var(--line);
    padding: 0 .5em;
    margin: 0 0 .8em;
}

.plan-point p {
    padding: 0 .5em;
}

.plan-point p:nth-child(2) {
    font-size: .85em;
}

.plan-order dd {
    color: var(--mjdrgr);
    padding: 0 .5em .8em;
}

.plan-order .bold {
    padding: 0 0 .8em;
}

.plan-order dd.bold {
    color: var(--red);

}

.userpoint {
    min-width: 50%;
    display: inline-block;
    padding: 0.3em;
    border: thin solid #ccc;
    box-sizing: border-box;
    background: #F2F2F2;
    margin: .5em 0;
    border-radius: 3px;
}

/*  OFFER LIST */




.list-offer li img {
    width: 100%;
    margin: 0 0 1em;

}

.list-offer {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;

}

/*  offer-plan */
.list-offer li:not(.offer-cm):not(.open) {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 1.5em;
    margin: 0 0 1em 0;
    transition: all 0.3s ease;
}

.offer-plan a {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 12px;
    margin: 0 0 1em 0;
    transition: all 0.3s ease;
    display: block;
    padding: 1.5em;
}

.offer-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.offer-plan>div:first-child,
.offer-plan a>div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-name {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    margin: 0;
}

.offer-state {
    font-size: 0.75rem;
    padding: .5em .75em;
    border-radius: 12px;
    margin: 0;
    font-weight: bold;
}

.offer-plan.open .offer-state {
    background: #d4edda;
    color: #155724;
}

.offer-plan.soon .offer-state {
    background: #d1ecf1;
    color: #0c5460;
}

.offer-plan.notyet .offer-state {
    background: #e2e3e5;
    color: #6c757d;
}

.offer-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 1em 0;
}

.offer-icon i {
    font-size: 3rem;
}

.offer-plan.open .offer-icon i {
    color: #28a745;
}

.offer-plan.soon .offer-icon i {
    color: #17a2b8;
}

.offer-plan.notyet .offer-icon i {
    color: #6c757d;
}

.offer-status {
    font-weight: bold;
    font-size: 1.125rem;
    margin: 0;
}

.offer-plan.open .offer-status {
    color: #28a745;
}

.offer-plan.soon .offer-status {
    color: #17a2b8;
}

.offer-plan.notyet .offer-status {
    color: #6c757d;
}


.offer-plan .btn {
    display: block;
    text-align: center;
    padding: 0.75em 1.5em;
    margin: 1em 0 1.5em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.offer-plan .green {
    background: #28a745;
    color: #fff;
}


.offer-plan .blue {
    background: #17a2b8;
    color: #fff;
}

.offer-plan.notyet .btn {
    display: none;
}

.offer-time {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1em;
    margin-top: auto;
}

.pack {
    font-size: 0.75rem;
    color: #666;
    margin: 0 0 0.5em;
    font-weight: 500;
}

.pack-words {
    font-size: 0.875rem;
    color: #333;
    margin: 0;
    line-height: 1.5;
}

.offer-day {
    font-weight: bold;
    color: #d9534f;
}

.day {
    margin-left: 0.25em;
}

.time {
    font-weight: bold;
    color: #d9534f;
    margin: 0 0.25em;
}

/*  OFFER LIST ──────────── */
/*  OFFER DETAILS */

.offer-info {
    padding: 0 1em;
    white-space: pre-line;
    line-height: normal;
}

/* 公開情報　詳細 ───────── */

/*  POINT  */


/*  main POINT CHARGE  */

/* 現在の保有ポイント */
.inside-purse {
    color: #fff;
    background: #1a2a4a;
    border-radius: 8px;
    padding: 1.5em 1em;
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.inside-purse>div:first-child p {
    color: #ffffff;
    font-size: 0.875rem;
    margin: 0;
}

.inside-purse>div:last-child {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.icon-purse {
    width: 40px;
    height: 40px;
    background: #ff9500;
    border-radius: 50%;
    padding: 8px;
}

.counter {
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}

.counter::after {
    content: " P";
    font-size: 1.5rem;
}


.memo.left {
    text-align: left;
}

.memo .br {
    display: inline;
}

@media (max-width: 600px) {
    .memo .br {
        display: block;
    }
}

/* ポイントチャージメニュー */
.charge-menu {
    list-style: none;
    padding: 0;
    margin: 1em 0 2em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .3em;
}

.charge-menu li {
    position: relative;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.25em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* おすすめラベル（特定のアイテム用） */
.charge-menu li:nth-child(3)::before,
.charge-menu li:nth-child(5)::before {
    content: "おすすめ";
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: var(--main);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.5em 0.75em;
    border-radius: 8px 0 8px 0;
}

/* コインアイコン */
.coin-icon {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25em;
}

.coin-icon i {
    font-size: 1.5rem;
    color: var(--main);
}

/* ポイント数表示 */
.charge-left {
    color: #333;
    font-weight: bold;
    font-size: 1rem;
    margin: 0.25em 0;
}

/* 区切り線 */
.divider {
    width: 80%;
    height: 1px;
    background: #ddd;
    margin: 0.5em 0;
}

/* 金額表示 */
.charge-price {
    color: #666;
    font-size: 0.875rem;
    margin: 0.25em 0;
}

.charge-menu li>p:last-child {
    margin: 0.5em 0 0;
    width: 100%;
}

.charge-menu button {
    width: 100%;
    background: var(--main);
    border: 1.5px solid var(--main);
    border-radius: 6px;
    padding: 0.6em 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.charge-menu button:hover {
    background: var(--yellow);
}

.charge-menu button:focus {
    background: var(--yellow);
}

.charge-menu button:hover span {
    color: var(--main);
}

.charge-menu button span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
}

/* 支払い方法 */
.payment {
    margin-bottom: 2em;
}

.payment>p {
    margin: 0 0 0.5em;
}

.payment button {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    position: relative;
    transition: background 0.3s ease;
    font-family: inherit;
}

.payment button:hover {
    background: #f8f8f8;
}

.payment button::after {
    content: "›";
    position: absolute;
    right: 1.5em;
    font-size: 1.5rem;
    color: #999;
}

.payment i {
    font-size: 1.25rem;
    color: #333;
}

.payment button>p {
    margin: 0 0 0 auto;
    padding-right: 2em;
}

.payment img {
    height: 20px;
    width: auto;
}

/* 注意事項 */
.attention {
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    padding: 1em 1.5em;
    margin-bottom: 2em;
    border-radius: 4px;
}

.attention.left {
    text-align: left;
}

.attention::before {
    content: "⚠️ ";
    color: #ffc107;
}

.attention p {
    margin: 0.5em 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.attention p:first-child {
    font-weight: bold;
}

/* ボタン */


.btn a.pink {
    background: #1a2a4a;
    color: #ffffff;
}

.btn a.pink:hover {
    background: #2a3a5a;
    transform: translateY(-2px);
}


.point-shop {
    margin: 0 0 0 auto;
}

.point-shop-btn {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border: none;
    border-radius: 6px;
    padding: 0.75em 1.5em;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    font-family: inherit;
}

.point-shop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.point-shop-btn i {
    font-size: 1rem;
}

/* ポイント履歴リスト */
.point-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
    position: relative;
}

.point-list::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.point-item {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 0.75em;
    display: flex;
    gap: 1em;
    align-items: center;
    transition: background 0.2s ease;
    position: relative;
    z-index: 1;
}

.point-item:hover {
    background: #f8f8f8;
}

.point-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.point-icon.get {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
}

.point-icon.use {
    background: var(--main);
}

.point-icon i {
    font-size: 1.125rem;
    color: #fff;
}

.point-icon.get i {
    color: var(--main);
}

.point-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.point-info {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.point-info .detail {
    font-weight: 500;
    color: var(--main);
    margin: 0;
    font-size: 0.95rem;
}

.point-info time {
    font-size: 0.8rem;
    color: #999;
}

.point-num {
    font-weight: bold;
    font-size: 1.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.25em;
}

.point-num.get {
    color: var(--drgre);
}

.point-num.use {
    color: var(--red);
}


/*  Notification　 */

/*  main NEWS Notification PAGE  */
.nextpage {
    font-size: .85em;
    display: flex;
    justify-content: space-between;
}

.nextpage span i {
    padding: 0 .3em;
}

.nextpage span,
.nextpage a {
    color: var(--mjgr);
}

/*  main NEWS Notification LIST  */

.news-list {
    padding: 1em 1em 2em 2em;
    background: #fff;
}

/*  articles new!  */
ul.news-list li {
    padding: .5em 0;
    margin: 0 0 .5em;
    border-bottom: 1px solid var(--line);
    position: relative;
}

ul.news-list li.newnews::before {
    content: "\00a0";
    position: absolute;
    top: .5em;
    left: -24px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 13px;
    width: 13px;
    background: var(--pink);
    border-radius: 50%;
}

/* 　article title  */
ul.news-list p:nth-child(2),
.article-ttl p:nth-child(2) {
    color: var(--mjdrgr);
    font-size: .9em;
    font-weight: 600;
    line-height: 1.2;
}

ul.news-list li.readnews p:nth-child(2) {
    color: var(--mjgr);
}


/*  article date  */
ul.news-list li p:nth-child(1),
.article-ttl p:nth-child(1) {
    color: var(--mjgr);
    font-size: .85em;
    padding: 0 .5em 0 0;
    float: right;
}

/*  article date  */
.article-ttl p:nth-child(1) {
    margin-top: .45em;
}

/*  articles ...  */
ul.news-list div {
    margin: .5em 1em 0 0;
    color: var(--mjgr);
    font-size: 1em;
    line-height: 1.6;
    overflow: hidden;
    /* 溢れた部分を隠す */
    text-overflow: ellipsis;
    /* 「…」と省略 */
    -webkit-text-overflow: ellipsis;
    /* Safari用 */
    -o-text-overflow: ellipsis;
    /* Opera用 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* ブラウザがサポートしていない場合のフェールセーフ */
    max-height: 4em;

}

ul.news-list div a {
    color: var(--mjgr);
}

/* 　main NEWS Notification LIST article title  */
.article-ttl {
    padding: 1em 0 .5em .5em;
    border-bottom: 1px solid var(--line);
}

.article-ttl p:nth-child(2) {
    font-size: 1.2em;
}

.article-text {
    padding: 1em .5em 0em;
    line-height: 1.6;
    white-space: pre-line;
    word-break: break-all;
}

.article div img {
    width: 100%;
}



/*  header menu  */

header {
    z-index: 10000;
    padding: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    background-color: #fff;
}

header div {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: .5em 0 .5em;
}

header div .logo-middle {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

header div .logo-middle img {
    max-width: 60px;
}

header div .logo-right {
    background-color: var(--main);
    z-index: 100;
    position: absolute;
    text-align: center;
    right: 0;
    padding: .25em .6em .25em .8em;
    margin-right: .5em;
    display: flex;
    border-radius: 55px;
    /*
    box-shadow: 0 2px 1px var(--line);
    box-shadow: inset -5px 0 10px -5px var(--line); */
}

header div .logo-right span {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: .95em;
    color: #fff;
    font-weight: 700;
    margin: auto;
    padding: .1em 0 0 0;
}

header div .logo-right img {
    margin: 0 auto .1em;
    max-width: 25px;
    padding: 0 0 0 .3em;
}

header.newuser img {
    display: block;
    margin: 0 auto;
    max-width: 200px;
    padding: .5em 0;
}

.menu-button {
    position: absolute;
    left: 0;
    text-align: center;
    margin-left: .25em;
    background: none;
    border: none;
    font-size: 2em;
    color: #1d1d1d;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s ease;
    /* スムーズな表示切り替え */
}

.menu-button.hidden {
    opacity: 0;
    pointer-events: none;
    /* クリックを無効化 */
}

.close-button {
    z-index: 1000;
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #1d1d1d;
    cursor: pointer;
}

/* サイドバー */
#sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: -730px;
    width: 35%;
    height: 100%;
    background-color: #fff;
    color: white;
    align-items: unset;
    padding: 10px;
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 999;
    font-size: .9em;
    font-weight: 600;
}

#sidebar.active {
    left: 0;
}

#sidebar ul {
    padding: 0;
    margin-top: 10px;
    width: -webkit-fill-available;
}

#sidebar ul li {
    margin: 5px 0;
    padding: 0 0 5px;
    /* background-color: var(--line);  */
    border-bottom: 1px dotted var(--ltgr);
    color: var(--mjdrgr);
    border-radius: 3px;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
}

#sidebar ul li a {
    color: var(--mjdrgr);
    display: block;
    padding: 15px;
    width: 100%;
}

#sidebar div {
    display: block;
    text-align: center;
    padding-top: 50px;
}


#sidebar img {
    width: 200px;
    margin-top: .5em;
}

/* オーバーレイ */
#overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 半透明の黒 */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 998;
    /* サイドバーの下に配置 */
}

#overlay.active {
    visibility: visible;
    opacity: 1;
}

/*
header div:last-child {
    padding-bottom: .85em;
}*/

.user-nameid {
    justify-content: space-between;
    padding: .25em .5em;
    background: var(--main);
    color: #fff;
    font-size: .85em;
}

.user-nameid p {
    line-height: normal;
}

.user-nameid p span {
    padding: 0 .5em 0 .25em;
}

.navbar {
    border-bottom: 1px solid var(--line);
}

.navbar ul {
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    padding: 0 .3em;
}

.navbar ul li {
    width: 100%;
}

.navbar ul li a {
    display: block;
    padding: 1em;
    color: var(--mjdrgr);
    font-weight: 700;

}


/*  menu 選択時　 */
.navbar ul li a.menu-select {
    color: var(--drgre);
    font-weight: 700;
    padding: 1em 0 1em;
    position: relative;
}

.navbar ul li a.menu-select:before {
    content: "";
    display: inline-block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -2.5px;
    width: 50%;
    height: 4px;
    border-radius: 5px;
    background: var(--drgre);
}

/* 　header menu  ────────────　*/

/*   footer menu  */
footer {
    margin: 0 0 auto;
    padding: .5em .5em 200px;
    color: #fff;
    background-color: var(--main);
    width: 100%;

}

footer .copyright {
    font-size: .85em;
    text-align: center;
}

footer li {
    padding: .3em 0;
}

footer li a {
    color: #fff;
    text-align: left;
}


nav.footer-menu {
    z-index: 10000;
    position: fixed;
    top: 100;
    bottom: -1px;
    width: 100%;
}

.footer-menu ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0 .5em 0 .5em;
    border-top: .5px solid var(--line);
    background-color: #ffffff;
}

.footer-menu ul li {
    width: 25%;
    padding: 0 0 .5em;

}

.footer-menu ul li a {
    display: block;
    width: 100%;
}


.footer-menu ul li img {
    padding: 0.25em 0.25em 0.02em 0.25em;
    max-width: 40px;

}

.footer-menu ul li p {
    color: var(--mjdrgr);
    font-size: .85em;
    font-weight: 600;

}

/*   footer menu  ──────────── */

/*  rules   */
.ru {
    line-height: 1.6;
}

.rules {
    padding-bottom: 1em;
}

.rule-file {
    line-height: 1.6;
    padding: 0 .5em 2em;
}

dl.rule-file dt {
    font-weight: 700;
    padding: 1.5em 0 .5em;
}

dl.rule-file dd {
    font-weight: 300;
}

.list-number {
    list-style-position: none;
    padding: 0 0 0 1.5em;
}

.list-number li {
    padding-top: .3em;
}

.list-number li:last-child {
    padding-bottom: .3em;
}

table.law-table {
    width: 100%;
    border: .5px solid var(--line);
    border-collapse: collapse;
    margin: 0 0 2em;
}

table.law-table th {
    width: 30%;
    text-align: left;
    padding: 1em;
    border: 1px solid var(--line);
    border-collapse: collapse;
}

table.law-table td {
    width: 70%;
    text-align: left;
    padding: 1em;
    border: 1px solid var(--line);
    border-collapse: collapse;
}

.qrcode {
    color: var(--bk);
    text-align: center;

}

.qrcode img {
    max-width: 200px;
}

.qrcode .qr-info {
    font-size: 1.2em;
    padding: 1em 0 1.5em;
    font-weight: 700;
}

.qrcode .qr-text {
    margin: 0 auto;
    width: 350px;
    line-height: 1.6;
}

.nothing {
    padding: 10%;
}

.nothing p i {
    font-size: 1.5em;
    font-weight: 400;
}

.nothing p {
    padding: 1em;
    text-align: center;
    font-weight: 700;
    color: var(--);
}



/*   ────────────────────────　スマホ　────────────────────────　　*/

@media screen and (max-width: 767px) {

    main {
        min-height: calc(100vh - 165px);
    }

    .background-area {
        min-height: calc(100vh - 165px);
        padding: .8em .3em 2em;
        border: none;
    }

    .signup {
        min-height: calc(100vh - 600px);
        padding: .8em .3em 0;
    }

    .addfriend {
        min-height: calc(100vh - 73px);
    }

    /*  INDEX PAGE */
    .index-pic div {
        width: 49.7%;
        padding-bottom: .25em;
    }

    .index-pic div p {
        font-size: .85em;

    }


    .qrcode .qr-text {
        max-width: 85%;
        font-size: .95em;
        line-height: 1.6;

    }

    table.law-table th {
        font-weight: 400;
        padding: .5em;
    }

    table.law-table td {
        padding: .5em;
    }

    .btn {
        margin: .5em 0;
    }

    .btn a,
    .btn button {
        font-size: .9em;
        padding: .85em 2em;
        color: #fff;
    }


    /* plan shop  */


    .region {
        margin-right: .25em;
        letter-spacing: 3px;
        padding: .1em 0 .1em .2em;
        font-size: .85em;
    }

    /* 帯 */

    .plan-list li section {
        font-size: .85em;
        padding: .25em .25em 0;
    }

    .plan-list li.wid100 {
        position: relative;
        overflow: hidden;
        margin: 0 .1em .4em;
        border: 1px solid var(--line);
        border-radius: 3px;
        width: 100%;
        z-index: 200;
    }

    /* プラン1つ */
    .plan-list li:not(.wid100) {
        position: relative;
        overflow: hidden;
        margin: 0 .1em .4em;
        border: 1px solid var(--line);
        border-radius: 3px;
        width: calc(50% - .2em);
        z-index: 200;
    }


    .plan-data {
        text-align: center;
        display: flex;
        justify-content: space-between;
    }

    .swiper2 {
        height: 1.2em;
    }

    /* data%  */
    .swiper2 .swiper-slide {
        font-size: .9em;
    }

    .swiper2 .swiper-wrapper {
        padding: 0 .2em 0 0;
    }

    .plan-list li a div {
        flex-wrap: wrap;
    }

    p.plan-date,
    div.plan-date p,
    .plan-race p,
    .plan-estimate p {
        /*  未定 */
    }

    .plan-list li .plan-pricebox {
        margin: 0.1em 0;
        padding: 0;
        line-height: 0.9 !important;
    }

    .plan-name {
        height: 6em;
        font-weight: 400;
        font-size: .9em;
        line-height: 1.4;
        color: var(--mjdrgr);
        text-align: left;
        margin: 0;
    }


    .plan-rate {
        margin: auto 0 auto auto;
        font-size: .85em;
    }

    .plan-rate::before {

        font-size: 1em;
        vertical-align: text-top;
        padding-right: .1em;
    }

    .plan-discount {
        font-size: 9px;
        left: 0;
    }

    .kaigyo {
        display: block;
    }

    .plan-price {
        font-size: .85em;
        text-align: center;
        word-wrap: nowrap;
    }


    .plan-no,
    .plan-pt {
        font-size: 2em;
    }

    .plan-no::before {
        letter-spacing: -1px;
        content: "\00a5";
        font-size: .85em;
        padding: 0 .12em 0 0;
    }

    .plan-pt::after {
        content: "PT";
        font-size: .85em;
        padding: 0 0 0 .12em;
    }


    .plan-cart a {
        margin: 0 .25em .25em;
    }


    .plan-bk-text {
        font-size: .8em;
    }


    .plan-info-ttl {
        font-weight: 600;
        font-size: 1.2em;
        margin: 0;
        border-right: none;
    }



    .plan-info .hitlist-btn {
        padding: .4em 0 .25em;
    }

    .plan-info .hitlist-btn a {
        padding: .25em .25em .25em .45em;
    }

    .plan-info .hitlist-btn span:first-child {
        font-size: .9em;
    }

    .plan-info .hitlist-btn img {
        width: 20px;
    }


    .article-ttl {
        padding: 1em 0 .5em .5em;
    }

    /*  article date  */
    .article-ttl p:nth-child(1) {
        margin-top: .2em;
    }

    .article-ttl p:nth-child(2) {
        font-size: 1em;
    }

    .article-text {
        font-size: .9em;
    }

    /*  articles ...  */
    ul.news-list div {
        margin: .25em 1em 0 0;
        font-size: .85em !important;
    }

    /*  review */
    ul.list-review>li dl>dd p.star>i {
        margin: 0;
    }

    /*  NOTIFICATION  */



    .hit-list li section {
        display: flex;
        padding: .3em .3em 0;

    }

    .hit-list li section div p:nth-child(3) {
        text-align: right;
        font-weight: 700;
        color: var(--red);
        font-size: 1.5em;
    }

    .hit-list li section div p {
        font-size: .9em;
    }

    .hit-list li section div p:nth-child(3)::after {
        content: "円";
        font-weight: 700;
        color: var(--red);
        padding-left: .25em;
        font-size: 16px !important;

    }


    .hit-list .hit-info {
        padding-left: .25em;
    }

    .hit-list li img {
        width: 125px;

    }



    /*  phone NEWS Notification LIST  */

    .news-list {
        padding: 0 0 1em 1.3em;
    }

    ul.news-list li.newnews::before {
        top: .5em;
        left: -18px;
        line-height: 11px;
        width: 11px;

    }


    /*  OFFER  */


    /*  phone OFFER information  */
    .offer-info dl>dt {
        font-weight: 600;
        line-height: 1.6;
        background-color: var(--line);
        padding: .2em .5em;
        margin: 0;
    }

    .offer-info dd {
        margin: .2em 0;
    }



    /*  POINT */

    .inside-purse {
        margin-bottom: 1em;
    }

    .inside-purse div:nth-child(1) {
        padding: 0 0 .5em 0;
        width: 30%;
        font-size: .7em;
    }

    .inside-purse img {
        width: 40px;
        top: -.25px;
        left: 2em;
    }


    .inside-purse .counter {
        font-size: 2em;

    }

    .charge-menu {
        margin: 1em 0 .5em;
    }

    ul.charge-menu li p.charge-left {
        letter-spacing: 1px;

    }

    .charge-left::before {
        padding-right: .25em;
    }

    /* 右  */
    ul.charge-menu li a p {
        margin-right: 5px;
        border-radius: 3px;
        padding: 10px 30px;
        width: 150px;
        text-align: center;
    }


    ul.charge-menu li p.charge-right span {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1.5px;

    }

    ul.charge-menu li p.charge-right {
        margin-right: 5px;
        padding: 10px 20px;
        width: 90px;

    }


    /*  SUPPORT  */

    .chat-list img {
        width: 64px;
    }


    /*  main SupportList  */

    .chat-list li {
        padding: 0 .3em .5em;
        margin-bottom: .5em;
        font-size: 1em;
        border-bottom: 1px solid var(--line);
    }

    .chat-list a {
        color: var(--bk);

    }

    .chat-list dl {
        padding: 0;
        width: 100%;
        display: flex;
    }

    /* chat list icons  */


    .chat-list li.newchat dl dt::after {
        content: "\00a0";
        position: absolute;
        /* 相対位置を指定 */
        top: 5px;
        right: 5px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 15px;
        width: 15px;
        background: var(--red);
        /* 背景色を赤に指定 */
        border-radius: 50%;
        /* 角丸を50%に指定 */

    }

    .chat-list dl dd {
        align-items: center;
        padding: .5em 0 0 .8em;
        margin-inline-start: 0;
        flex-grow: 1;
        /*  謎の右余白対策 */

    }

    /*  chat name　 */
    .chat-list dl dd span:nth-child(1) {
        font-weight: 600;
        font-size: 1em;

    }

    /*  date　 */
    .chat-list dl dd span:nth-child(2) {
        font-weight: 400;
        font-size: .9em;
        letter-spacing: -1px;

    }

    /*  chat word　 */
    .chat-list dl dd div.chat-word {
        padding: .1em 0;
        margin: .4em 0;
        color: var(--mjgr);
        font-size: .9em;
        line-height: 1.4;
        overflow: hidden;
        /* 溢れた部分を隠す */
        text-overflow: ellipsis;
        /* 「…」と省略 */
        -webkit-text-overflow: ellipsis;
        /* Safari用 */
        -o-text-overflow: ellipsis;
        /* Opera用 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 行数を指定 */

    }

    /*  mypage */

    .mypage fieldset {
        padding: 0;
    }


    /*  header  */
    .swiper1 {
        margin-bottom: .5em;
    }

    .swiper1 .swiper-slide img {
        width: 100%;
    }

    header div {
        padding: .4em 0 .25em;
    }

    header div .logo-middle img {
        max-width: 40px;
    }

    header div .logo-right {
        margin: 0 .2em 0 0;
    }

    header div .logo-right img {
        max-width: 20px;
        margin: 0 auto .05em;
    }

    header div .logo-right span {
        font-size: .75em;
        font-weight: 600;
        padding: .1em 0 0;
    }

    .menu-button {
        font-size: 1.5em;
        margin-left: 0;
    }

    #sidebar {
        width: 65%;
        padding: 10px
    }

    .close-button {
        left: 0;
    }


    .user-nameid {
        font-size: .85em;
    }

    .user-nameid p span {
        padding: 0;
    }


    .navbar {
        padding: 0;
    }

    .navbar ul {
        padding: 0;
    }

    .navbar ul li a {
        font-size: .95em;
        padding: .5em 0;
        font-weight: 600;
    }

    .navbar ul li a.menu-select {
        color: var(--drgre);
        font-weight: 700;
        padding: .5em .2em .4em;
        position: relative;
    }

    .navbar ul li a.menu-select:before {
        bottom: -4px;
        width: 100%;
        height: 4px;
        border-radius: 5px;
        background: var(--drgre);
    }

    /*  footer  */
    footer {
        padding: .5em .5em 9.5em;
        height: 9.2em;

    }

    .footer-menu ul li {
        padding: 0 0 .35em;

    }

    .footer-menu ul li img {
        padding: 0.2em 0.2em .02em 0.2em !important;
        width: 30px;
    }

    .footer-menu ul li p {
        font-size: 9px;
        font-weight: 700;
    }

}


@media screen and (max-width: 374px) {
    .plan-name {
        font-size: .7em;
    }


    .plan-cart a {
        font-size: .85em;
    }

    p.plan-lookinfo {
        font-size: .85em;
    }

    .swiper2 {
        height: 1.3em;
    }

    .swiper2 .swiper-slide {
        font-size: .85em !important;
    }

    #sidebar {
        width: 80%;
        padding: 10px;
    }

}

/**************************
 タブ切り替え
***************************/

.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    transition: .5s;
    /*  動き   */
    box-shadow: 1px 5px 3px 1px var(--shadow-color);
    border-radius: 5px 5px 0 0;

}

/*　個別全体と書いているタブメニュー部分
*/
/*  三角も込み   */
.tab-label {
    font-size: .85em;
    color: White;
    background: var(--usume);
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    padding: .85em 1em;
    order: -1;
    z-index: auto;
    cursor: pointer;
    flex: 1;
    transition: .5s;
    border-top: 5px solid var(--usume);
    border-bottom: 5px solid var(--usume);

}


/* タブのコンテンツ部分*/
.tab-content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: .5em;

}

/* アクティブなタブ、チェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
    border-top: 5px solid var(--koime);
    color: var(--koime);
    background-color: #fff;
    border-bottom: 5px solid #fff;
}

/*  background-color: var(--koime);  */

.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    padding: 0;
    opacity: 1;
    transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に*/
.tab-switch {
    display: none;
}

/*─────────── トピックス──────────── */


.tabflex {
    width: auto;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-flow: column;
}

.category_start {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
}

.tabflex .child {
    padding: 0;
    text-align: left;
    border-bottom: 1px dotted var(--shadow-color);
}


/* Column Card List */
.column-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.column-card a {
    display: flex;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
}

.column-card a:hover {
    background-color: #f9fafb;
}

.column-image {
    width: 112px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.column-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.column-category {
    display: inline-block;
    background: #2563eb;
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 6px;
    width: fit-content;
}

.column-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--main);
    margin-bottom: 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.column-description {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.column-button {
    font-size: 12px;
    color: #2563eb;
    border: 1px solid #2563eb;
    background: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    width: fit-content;
    transition: background-color 0.2s;
}

.column-button:hover {
    background-color: #eff6ff;
}



/* **************************************************************************************************************************************
*******************************************  lp  ************************************************** */
/* **************************************************************************************************************************************
*******************************************  lp  ************************************************** */

    .lp {
      max-width: 1000px;
      margin: 0 auto;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 15%, rgba(255, 200, 60, .28), transparent 28%),
        radial-gradient(circle at 20% 50%, rgba(180, 0, 0, .25), transparent 35%),
        linear-gradient(180deg, #090909 0%, #15100b 45%, #050505 100%);
      border-left: 1px solid rgba(214, 170, 70, .55);
      border-right: 1px solid rgba(214, 170, 70, .55);
    }


    .lpimg {
        width: 100%;
         margin: 0;
    }