@charset "utf-8";
:root {
    --base: 20px; /* 基準 */
    --line-scale: 1.6; /* 罫線間隔（文字の大きさのｎ倍） */
    --unit: var(--base); /* base＝文字の大きさ＝目盛りの幅 */
    --line: calc(var(--unit) * var(--line-scale)); /* 1行の高さ */
    --unit-major: calc(var(--unit) * 5); /* 目盛りの幅の5倍 */
}

body {
    margin: 0;
    padding: 40px 60px 40px 60px; /* 上右下左 */
    font-size: var(--unit);
    line-height: var(--line);
    background-color: #fff;
    font-family: monospace;
}

h1 {
    margin: 0;
    margin-bottom: var(--line);
}

h3 {
    margin: 0;
    margin-top: var(--line);
    margin-bottom: 0;
    padding: 0;
    display: block;
    font-size: var(--unit);
    font-weight: bold;
}

p {
    margin: 0;
    width: calc(var(--unit) * 30); /* 30文字幅 */
    overflow-wrap: anywhere;
    word-break: break-all;
}

li {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    padding-left: 1.5em;
}

/* タイトル部分 */
.note-header {
    position: relative;
    margin-bottom: var(--line);
    padding: var(--line) 0;
    background: #fff; 
}

.note-line {
    position: relative;
    line-height: var(--line);
    background-image: linear-gradient(#d1d1d1 1px, transparent 1px);
    background-size: 100% var(--line);
    background-repeat: repeat-y;
    padding: 0 0 0 1em; 
}

/* 一番下の青線 */
.note-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #5a86c2;
    z-index: 1;
}

/* 細かい目盛り＆5目盛ごとの太線（一番下） */
.note-line::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: calc(var(--unit) / 2);
    box-sizing: border-box;
    background-image: 
    repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(var(--unit-major) - 2px),
        #5a86c2 calc(var(--unit-major) - 2px),
        #5a86c2 var(--unit-major)
    ),
    repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(var(--unit) - 1px),
        #5a86c2 calc(var(--unit) - 1px),
        #5a86c2 var(--unit)
    );
    background-position: 
        0 100%,
        0 100%;
    background-repeat: repeat-x;
    z-index: 0;
}

/* DATE */
.date-area {
    position: absolute;
    top: -0.8em;   
    right: 0;
    text-align: right;
    font-family: monospace;
    color: #333;
}

.note-label,
#date {
    display: inline;
}

.title-main {
    margin: 0;
    font-size: calc(var(--unit) * 2);
    font-weight: bold;
    display: inline-block;
    padding-bottom: 4px;
    line-height: 1.2;
}

/* 共通の線 */
.line {
  height: 2px;
  width: 100%;
  background: #4a7bdc;
}

/* 上の線 */
.line.top {
    position: relative;
    margin-bottom: 12px;
}

/* 下の線 */
.line.bottom {
    margin-top: 12px;
    position: relative;
}

/* 細かい目盛り */
.line.bottom::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--unit) / 3);
    box-sizing: border-box;
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(var(--unit) - 1px),
        #5a86c2 calc(var(--unit) - 1px),
        #5a86c2 var(--unit)
    );
}

/* 5目盛ごとの太線 */
.line.bottom::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--unit) / 2);
    box-sizing: border-box;
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent calc(var(--unit-major) - 2px),
        #5a86c2 calc(var(--unit-major) - 2px),
        #5a86c2 var(--unit-major)
    );
}

/* 付箋 */
.tape {
    position: relative;
    width: clamp(200px, calc(var(--unit) * 10), 100%);
    aspect-ratio: 1 / 1;    
    margin: calc(var(--line) * 2) 0;
    padding: calc(var(--line) * 0.7);
    padding-bottom: 0;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
    background: linear-gradient(135deg, #e0efff, #d6e8ff);
    color: #333333;
    transform: rotate(-1deg); /* 紙っぽいズレ */
    z-index: 2;
    transition: transform 0.4s ease, filter 0.4s ease, clip-path 0.3s ease;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); /* 初期状態：削り込みなし（100% 100% の位置が右下角） */
}   

/* ホバー時：めくれるサイズに合わせて、付箋本体の右下角を斜めに切り落とす */
.tape:hover {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
}

/* セロハンテープ */
.tape::before {
    content: "";
    position: absolute;
    top: calc(var(--line) * -0.5);
    height: var(--line);
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transform-origin: top center; 
    cursor: pointer;
    width: 55%;

    background-color: rgba(255,255,255,0.4);
    border-left: 2px dotted rgba(0,0,0,0.1); /* ギザギザ */
    border-right: 2px dotted rgba(0,0,0,0.1); /* ギザギザ */
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    opacity: 0.9; /* 透け感 */    
}

/* 新規・変更：折り返た三角の影（初期状態） */ 
.tape::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    background: linear-gradient(225deg, #ffffff 30%, #cadcf2 75%, #94b2db 100%); /*(角度,開始の色,終わりの色) */  
    filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, 0.25)); 
    clip-path: polygon(0 0, 0% 100%, 100% 100%); /* 右上半分を切り抜き(三角形) */
    z-index: 3;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: bottom right;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ホバー時に右下の角だけをめくる */
.tape:hover::after {
    opacity: 1;
    transform: scale(1);
}

.tape p {
    margin: 0;
}

.marker {
    background: linear-gradient(transparent 55%, #fff59d 55%);
}


/*
・ページスクロールに合わせて、部分的に黄色マーカーでハイライト
*/