body {
    font-family: "Noto Sans JP", "M PLUS 1p", Meiryo UI;
/* "Noto Serif", Helvetica, Arial, sans-serif;*/
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    font-weight: 400;
    font-style: normal;    
    font-size: 1.0rem;
    font-variation-settings:
	"wdth" 100;
    transform:rotateZ(0.03deg); // フォント縮小でジャギるのを防止
    
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 画面全体の高さ */    
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

p {
    margin: 0 0 .1em 0;
}

h1 {
    font-size: 2rem; /* 通常は3.5rem、これを小さく */
    font-weight: bold;    
}

h2 {
    position: relative;
    font-size: 1.5rem;
    padding: .2em .2em .2em 1.0em;
    color: #333333;
    font-weight: bold;
}

h2::before,
h2::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid #40c040;
    content: '';
}

h2::before {
    top: calc(50% - 3px);
    left: 0;
}

h2::after {
    top: calc(50% + 3px);
    border: 2px solid #408040;
    left: 5px;
}

h3 {
    font-size: 1.4rem; /* 通常は2.5rem */
}
h4 {
    font-size: 1.3rem; /* 通常は2.5rem */
}
 
hnoto-font {
    font-family: Cambria, "Noto Serif";
    font-weight: normal;
    font-style: normal;
}

/* 通常の状態では下線を非表示にする */
.only-hover-link {
    text-decoration: none;
}

/* ホバー時に下線を表示する */
.only-hover-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* アイコンと背景円のコンテナ */
.heart-container {
    position: absolute;
    bottom: 4px;
    right: 48px;
    display: inline-block;
}

/* アイコンと背景円のコンテナ */
.bookmark-container {
    position: absolute;
    bottom: 4px;
    right: 8px;
    display: inline-block;
}

/* アイコンの基本スタイル */
.bookmark-icon {
    color: black;
    position: relative;
    z-index: 10;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* ホバー時の背景円 */
.bookmark-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 100%;
    background-color: rgba(29, 161, 242, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); /* 初期状態は小さく設定 */
    transition: transform 0.3s ease;
    z-index: 1; /* アイコンの背面に配置 */
}

/* ホバー時のアイコンと背景円のスタイル */
.bookmark-container:hover .bookmark-icon {
    color: #1da1f2; /* ホバー時にアイコンの色を変更 */
}

.bookmark-container:hover .bookmark-background {
    transform: translate(-50%, -50%) scale(1); /* ホバー時に円が拡大 */
}