/* --- 全体レイアウト --- */
#ichinana {
    background-image: url('img/17bg.png');
    background-size: cover;
    padding: 0 0 1px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #5e3030;
    line-height: 1.6;
}

#ichinana-Cnt {
    max-width: 1024px;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    padding-bottom: 5px; /* 下部に余白を追加 */
}

/* 共通設定 */
h2 {
    text-align: center;
    color: #a03b3b;
    font-size: 24px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.heart-icon {
    text-align: center;
    color: #f1a7a7;
    font-size: 60px;
    line-height: 1.0;
    margin-bottom: 0;
    transform: scale(1.3, 1);
}

.atn{
    font-size: 0.9em;
    font-weight: 400;
}
/* --- セクションの境目の飾り（共通） --- */
.livers, .tickets, .pannel-att {
    position: relative;
}

/* 上側にフリルをつける設定 */
.livers::before {
    content: "";
    position: absolute;
    top: -10px; /* 画像の高さに合わせて調整 */
    left: 0;
    width: 100%;
    height: 10px; /* 飾りの高さ */
    background-image: url('img/kazari_r.svg'); /* レースの画像パス */
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 5;
}.tickets::before{
    content: "";
    position: absolute;
    top: -10px; /* 画像の高さに合わせて調整 */
    left: 0;
    width: 100%;
    height: 10px; /* 飾りの高さ */
    background-image: url('img/kazari_w.svg'); /* レースの画像パス */
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 5;
}
.pannel-att::before {
    content: "";
    position: absolute;
    top: -10px; /* 画像の高さに合わせて調整 */
    left: 0;
    width: 100%;
    height: 10px; /* 飾りの高さ */
    background-image: url('img/kazari_p.svg'); /* レースの画像パス */
    background-repeat: repeat-x;
    background-size: auto 100%;
    z-index: 5;
}

/* --- イントロセクション --- */
.intro {
    text-align: center;
    padding: 40px 20px;
}

.intro h1 {
    font-size: 22px;
    color: #4a2a2a;
    line-height: 1.6;
}

.intro h1 span {
    display: block;
    color: #c95c6b;
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0;
}

.date {
    display: inline-block;
    background-color: #4a2a2a;
    color: #fff;
    padding: 10px 80px;
    font-weight: bold;
    position: relative;
    font-size: 18px;
    clip-path: polygon(0% 0%, 100% 0%, 96% 50%, 100% 100%, 0% 100%, 4% 50%);
    z-index: 1;
}

.date::before {
    content: "";
    position: absolute;
    top: 4px; bottom: 4px; left: 6%; right: 6%;
    border-top: 1px solid #d9c5b2;
    border-bottom: 1px solid #d9c5b2;
    pointer-events: none;
}

/* --- コラボ内容ボックス --- */
.content-box {
    background-color: #f4d4c9;
    margin: 40px 40px 60px;
    padding: 60px 40px 40px;
    position: relative;
    border-radius: 10px;
}

.content-box::before,
.content-box::after {
    content: "";
    position: absolute;
    left: 0; width: 100%; height: 25px;
    background-image: url('img/lace-a.svg');
    background-repeat: repeat-x;
    background-size: auto 100%;
}

.content-box::before { top: -20px; }
.content-box::after { bottom: -20px; transform: rotate(180deg); }

.content-box .heart-icon {
    position: absolute;
    top: -52px; left: 50%;
    transform: translateX(-50%) scaleX(1.3);
    z-index: 20;
    display: inline-block;
}

.content-box ul { list-style: none; padding: 0; margin: 0 auto; max-width: 860px; }
.content-box li {
    position: relative; padding-left: 1.5em; margin-bottom: 20px;
    color: #4a2a2a; text-align: left;
}
.content-box li::before {
    content: "●"; position: absolute; left: 0; color: #f1a7a7;
}

/* --- ライバー紹介セクション全体 --- */

.livers {
    background-color: #e98783;
    padding: 60px 0 100px;
}

.liver-item {
    display: grid;
    /* 左(1fr)・中央(1.2fr)・右(1fr) の3カラム固定 */
    grid-template-columns: 1fr 1.2fr 1fr; 
    align-items: center;
    max-width: 1024px;
    margin: 0 auto -70px; /* アイテム間の余白 */
    position: relative;
}

/* 中央のテキストエリア */
.liver-description {
    grid-column: 2; /* 常に中央の列に配置 */
    text-align: left;
    color: #42210b; /* 濃い茶色 */
    padding: 0 12px;
    z-index: 1; /* 画像の下に潜り込ませる */
}

.liver-description h3 {
    font-size: 24px;

}
.liver-description h3.txR{
    text-align: right;
}

/* 画像エリアの設定 */
.liver-visual {
    position: relative;
    z-index: 10; /* テキストよりも前面に表示 */
}

.liver-visual img {
    /* ハートを含めた画像サイズに合わせて調整 */
    width: 160%; 
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}
/* 個別サイズ調整（ご自身で設定された値を反映） */
.liver-visual img.luna { width: 110%; }
.liver-visual img.nobuka { width: 85%; }
.liver-visual img.ruru { width: 110%; }
.liver-visual img.lala { width: 90%; }
/* 1・3・5番目：画像を左側に配置し、中央テキストへ重ねる */
.liver-item:nth-child(odd) .side-left img {
    display: block;
    transform: translateX(10%); /* 右方向（中央）へ寄せる */
}
.liver-item:nth-child(odd) .side-right { display: none; }

/* 2・4番目：画像を右側に配置し、中央テキストへ重ねる */
.liver-item:nth-child(even) .side-right img {
    display: block;
    transform: translateX(-10%); /* 左方向（中央）へ寄せる */
}
.liver-item:nth-child(even) .side-left { display: none; }



.indent-kome {
    padding-left: 1.2em;
    text-indent: -1.2em;
    text-align: left;
    max-width: 780px;
    margin: 0 auto 5px;
}


/* --- コラボチケットセクション --- */
.tickets {
    padding: 60px 40px 60px; /* 上下の余白を広げてセクションを区切る */
    text-align: center;
}

.ticket-info h3 {
    /* 全体のサイズを大きく */
    font-size: 32px; 
    color: #a03b3b;
    font-weight: bold;
    
    /* 金額の下の赤いドット線（太め） */
    border-bottom: 5px dotted #c95c6b; 
    display: inline-block;
    padding-bottom: 12px;
    margin: 0 0 20px;
    line-height: 1.4;
}

/* 金額部分の個別スタイル（HTMLでspanを入れた場合） */
.ticket-info h3 span {
    font-size: 42px; /* 金額をさらに大きく */
    color: #c95c6b;  /* 金額だけピンクレッドにする */
    margin-left: 10px;
    letter-spacing: 0.05em;
}

/* 画像の設定（1枚ずつ縦に並べる） */
.ticket-info img {
    max-width: 85%;  /* 1枚を大きく表示 */
    height: auto;
    margin: 0 auto 40px; /* 下に余白をあけて縦に並べる */
    display: block;      /* blockにすることで強制的に縦並び */
    border-radius: 10px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)); /* 少し浮かせてリッチに */
}



.att-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.att-item img { width: 100%; border-radius: 10px; }
/* --- 等身大パネル設置アトラクション --- */
.pannel-att {
    background-color: #f4d4c9; /* 修正：優しいピンク */
    padding: 60px 40px 60px;
    color: #5e3030; /* 文字色を全体のトーンに合わせる */
}

.pannel-att h2 {
    color: #a03b3b;
    margin-bottom: 10px;
}

.pannel-att > p.lead {
    text-align: center;

}

/* --- グリッドレイアウト（PC: 5カラム） --- */
.att-grid {
    display: grid;
    /* 1列を5分割 */
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    max-width: 1000px;
    margin: 0 auto;
}

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

/* アトラクション名のリンク設定 */
.att-title a {
    color: #a03b3b;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    line-height: 1.3;
}

.att-title a:hover {
    text-decoration: underline;
}

.att-item img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* 背景が淡いので、白枠と影で立体感を出す */
    border: 4px solid #fff; 
    background-color: #fff;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.1));
}

/* 下部の園内マップなどのリンク */
.pannel-att ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-bottom: 20px;
}

.pannel-att ul li {
    display: inline-block;
    margin: 0 15px;
}

.pannel-att ul li a {
    color: #a03b3b;
    font-weight: bold;
    text-decoration: underline;
}

.copyright-txt{
    padding-right: 20px;
    text-align: right;
    font-size: 0.8em;
    padding-top:3px;
}

/* --- レスポンシブ (スマホ) --- */
@media screen and (max-width: 768px) {
    /* --- 全体の本文サイズアップ --- */
    #ichinana {
        font-size: 16px; /* 全体のベースをアップ */
    }
    
    .content-box li, 
    .liver-description p,
    .pannel-att > p.lead {
        font-size: 16px; /* 本文テキストを16pxで統一 */
        line-height: 1.7;
    }
    /* イントロ・リボンの調整 */
    .intro h1 { font-size: 16px; font-weight: bold; }
    .intro h1 span { font-size: 28px; font-weight: 900; line-height: 1.2; }
    
    .date {
        width: 92%;
        padding: 6px 0;
        font-size: 14px;
        clip-path: polygon(0% 0%, 100% 0%, 97% 50%, 100% 100%, 0% 100%, 3% 50%);
    }

    /* コラボ内容ボックス */
    .content-box { margin: 60px 15px; padding: 40px 20px 30px; }
    .content-box .heart-icon { top: -45px; }

    /* --- ライバー紹介 (スマホ最適化) --- */
    .liver-item {
        /* block ではなく flex に変更して、中身の順番を自由に操れるようにします */
        display: flex !important; 
        flex-direction: column; /* 縦に並べる */
        margin-bottom: 60px;
        padding: 0 10px;
    }

    /* 画像エリアを常に「一番上」にする */
    .liver-visual {
        display: block !important; 
        order: 1; /* ★これが魔法のプロパティ。1番目に表示 */
        width: 90%;
        margin-bottom:0;
    }

    /* テキストエリアを常に「二番目」にする */
    .liver-description {
        display: block !important;
        order: 2; /* ★2番目に表示。これで画像が必ず上に来ます */
        width: 90% !important;
        padding: 0 !important;
        text-align: left;
    }

    /* 画像の具体的な見た目調整 */
    .liver-visual img {
        width: 80% !important;
        max-width: 320px;
        margin: 0 auto;
        transform: none !important;
        display: block;
    }

        /* ルナさんのサイズ調整 */
    .liver-visual img.luna {
        width: 110% !important;

    }
    /* 信華さんのサイズ調整 */
    .liver-visual img.nobuka {
        width: 80% !important;
        max-width: 260px;
    }

    /* その他、PCで消していた不要な空のdivを消す */
    .liver-item .side-left:empty,
    .liver-item .side-right:empty {
        display: none !important;
    }

    /* テキスト内の名前の調整 */
    .liver-description h3 {
        text-align: center !important; 
        font-size: 22px;
        border-bottom: 2px solid #42210b;
        display: inline-block;
        margin-bottom: 10px;
    }
    
.tickets {
    padding: 60px 7% 60px; /* 上下の余白を広げてセクションを区切る */
    text-align: center;
}
    /* --- アトラクションセクションの余白と幅 --- */
    .pannel-att {
        padding: 60px 5% !important; /* 左右の余白を5%ずつにして、コンテンツ幅を90%に */
    }
 .pannel-att h2{
    font-size: 22px;
 }
    .att-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0; /* グリッド自体の内側余白をリセット */
        width: 100%;
    }
    .pannel-att ul{
        margin-top: 20px;
    }
.pannel-att ul li{
    text-align:center !important;
    margin: 0 auto;
}
    .att-item img {
        border-width: 2px; /* 枠線を少し細くして画像面積を稼ぐ */
        margin-bottom: 10px;
    }
    /* チケット・アトラクション */
    .ticket-info h3 { font-size: 22px; }
    .ticket-info h3 span { font-size: 28px; display: block; }
    .ticket-info img { max-width: 100%; margin-bottom: 20px; }

    .att-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}