/* ■■■■■■■■■ 日記レイアウト ■■■■■■■■■■ */
/*---ひとこと日記(h1として)---*/
.diary {
    font-family: "M PLUS Rounded 1c";

    margin-left: 5px;
    font-size: 20.4px;
}

/*---Previous & Nextリンク---*/
.p_link, .n_link {
    position: absolute;
    text-decoration: none;
    font-family: "Yuji Mai";
    color: #473118;
    right: 1.75%;
    white-space: nowrap;
}
.p_link {
    right: 80px;
}
.p_link:hover, .n_link:hover {
    color: #6b0e01!important;
    text-decoration: underline;
}
@media (max-width: 600px) {
    .p_link {
        right: 65px;
    }
}


/*---日記カラム---*/
.dc {
    display: flex;
    width: 100%;
}

/*---区切り縦線のスタイル---*/

/*左側の余白*/
.dc > *:nth-child(1) {
    width: 1%;
}
/*左カラム　手動で設定 47% → 47.5%*/
.dc .left {
    width: 47.5%!important;
}
/*中央線*/
.dc > *:nth-child(3) {
    width: 3%;
    position: relative;
}
.dc > *:nth-child(3)::after {
    content: "";
    position: absolute;

    background-color: #fddca3; /* 線の色 */
    top: -30px; /* 上の余白 */
    bottom: -30px; /* 下の余白 */

    width: 50%; /* 線の太さ=親要素が2%であることを前提 */
    
    /*中央揃えにする魔法の呪文*/
    left: 50%;
    transform: translateX(-50%);
}
/*右カラム*/
.dc > *:nth-child(4) {
    width: 47.5%;
}
/*右の余白*/
.dc > *:nth-child(5) {
    width: 1%;
}


/*---はみ出し文字---*/
.over {
    margin-top: 50px;
    position: relative;

    width: 99%!important;
    left: 50%;
    transform: translateX(-50%);
}
.over::before {
    content: "";
    position: absolute;

    background-color: #fddca3; /* 線の色 */
    top: -20px;

    width: 100%;
    height: 10px;

        
    /*中央揃えにする魔法の呪文*/
    left: 50%;
    transform: translateX(-50%);
}


/*---見えない文字---*/
.invisible_text {
    color: red;
    color: transparent;  /* 文字色を透明にする */
}


/*---改行時の線---*/
.br {
    position: relative;
    display: block;

    white-space: nowrap; /* 「おはよ」「う。」を「おはよう」「。」に*/
}
.br::after {
    content: "";
    position: absolute;


    bottom: 0;  /* 下に配置 */
    left: 0;    /* 左端から */
    width: 100%;  /* 横幅を100%に */
    border-bottom: 2px solid #624918;  /* 下線の色と太さ */
}



















/* === 日記スライダー === */
.ds {
    overflow: hidden; /* スクロール部分を隠す */
    /* position: relative; ボタンを開放したいからrelativeなし */
    background-color: #e8b19b;
    width: 100%; /* コンテナの幅 */
}

/* スライドを横並びに */
.ds .track {
    display: flex; /* 横並びにする */
    transition: transform 0.3s ease; /* スライドの動きをスムーズに */
}

/* 各スライド */
.ds .track .item {
    background-color: #fee6c8;
    box-sizing: border-box;
    padding-right: 5px; /* スライドの間隔 */
    padding: 5px;
    min-width: 100%; /* 2枚表示(右の隙間をちょっと作る) */
}

/* ボタン */
.ds .prev-btn, .ds .next-btn {
    position: absolute;
    top: 49%;
    z-index: 10;
    cursor: pointer;
}
.ds .prev-btn::before, .ds .next-btn::before {
    position: absolute;
    content: '';
    background: #c86e2d67;
    border-radius: 10px;
  
    width: 32px;
    height: 32px;
    top: 0px;
    left: -2px;
}
.ds .prev-btn::after, .ds .next-btn::after {
    position: absolute;
    content: '';
    box-sizing: border-box;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 18px solid #ffffff; /* 右側の三角形部分の色 */
  
    top: 7px;
    left: 4px;
}
.ds .next-btn::before {
    left: -30px;
}
.ds .next-btn::after {
    transform: rotate(180deg);
    left: -20px;
}


/* 左ボタン */
.ds .prev-btn {
    left: 0px;
}

/* 右ボタン */
.ds .next-btn {
    right: 0px;
}

/*---日記の文字---*/
.ds p, main p {
    margin: 0;
    padding: 0;

    font-family: "Klee One";
    font-weight: 600;

    white-space: nowrap;
}

/*ページ*/
.ds .page {
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 20px;
}