h1.pageTitle{
 background-color: #FFFACD;
 border-left: 20px solid #50281E;
}

.section {
 background: #fffded;
 border: 1px solid #50281e0f;
 border-radius: 12px;
 padding: 1.5rem;
 margin-bottom: 2rem;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 position: relative;
 z-index: 5;
}

.section h2{
 font-size: clamp(18px, 1.2em, 24px);
 height: auto !important;
 padding-bottom: 5px;
 border-bottom: 2px solid #FFDC6E !important;
 margin-bottom: 2%;
 
}

.intro2{
 display: flex;
 gap: 25px;
 align-items: center;
 margin: 0 3%;
}

@media screen and (max-width: 768px) {
 .intro2{
    flex-direction: column;
  }
}

.stack {
 --bg-color: #ffffff;  /* 背景色 */
 --blur: 0px;            /* ぼかし */
 --expand: 10px;         /* 背景の広がり */
 --radius: 120px;        /* 角丸 */
 position: relative;
 display: inline-block;
}

/* 背景の白面 */
.stack-bg {
 position: absolute;
 left: calc(0 * var(--expand));
 top:  calc(0 * var(--expand));
 right: calc(0 * var(--expand));
 bottom: calc(0 * var(--expand));
 background: var(--bg-color);
 border-radius: var(--radius);
 filter: blur(var(--blur));
 border: 5px solid #FF9614;
 z-index: 0;
}

/* 画像レイヤー */
.stack-img {
 position: relative;
 z-index: 1;
 left: 8px;  /*とっくまの表示位置の微調整用*/
 top: 9px;   /*とっくまの表示位置の微調整用*/
}

.stack-img img {
 display: block;
 max-width: 180px;
 padding: 20px;
}

.intro3{
 display: flex;
 flex-direction: column;
 align-items: center;
}

.intro3 a{
 font-size: clamp(15px, 1.0em, 20px);
 color: #fff;
 font-weight: bold;
 background: #50281E;
 border: 3px solid #FFDC6E;
 border-radius: 30px;
 padding: 10px 25px;
 text-align: center;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 transition: border .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .2s ease;
}

.intro3 a:hover{
 color: #50281E;
 background: #fff;
 border: 3px solid#50281E;
 transform: translateY(-2px);
 box-shadow: 0 4px 15px #7d7d7d4d;
 text-decoration: none !important;
}

#terms-box {
 border: 1px solid #ccc;
 padding: 15px;
 height: 250px;
 overflow-y: scroll;
 background: #fafafa;
 font-size: 0.9rem;
 line-height: 1.6;
}

#terms-box ol{
 padding-left: 15px;
}

.maru {
 list-style-type: none;
 padding-left: 1.5em;
}
.maru li::before {
 content: attr(data-no) " ";
 margin-left: -1.5em;
 display: inline-block;
 width: 1.5em;
}

.download-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/*1行あたりの表示数を変更する場合はこちらのpxを変更*/
 gap: 20px;
}

@media screen and (max-width: 768px) {
    .download-grid{
        grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
        gap: 10px;
    }
}

.download-item {
 border: 1px solid #ddd;
 padding: 10px;
 text-align: center;
 background: #fff;
}

.download-item img {
 max-width: 100%;
 height: auto;
 padding: 1.1vw;
}

.download-item button,
#download-all {
 font-size: clamp(12px, 1.0em, 20px);
 margin-top: 8px;
 padding: 6px 12px;
 cursor: pointer;
 border-radius: 30px;
 transition: box-shadow .2s ease, opacity .2s ease, color .2s ease, transform .2s ease;
}

.download-item button:hover,
#download-all:hover{
 color: #333333;

 transform: translateY(-1px);
 box-shadow: 0 4px 15px #7d7d7d4d;
}

#download-all {
 font-size: clamp(12px, 1.0em, 20px);
 padding: 10px 20px;
 margin-bottom: 20px;
}

/* 波乗りとっくま */
/* 固定オーバーレイ（波＆塗り） */
.wave-overlay {
 position: fixed;
 inset: 0;
 z-index: -1;      /* コンテンツより下、キャラより下 */
 pointer-events: none;
 contain: strict;
}
.wave-overlay svg {
 width: 100%;
 height: 100%;
 display: block;
}

/* キャラクター（画像） */
.chara {
 position: fixed;
 /* ★★★ 重要：固定配置の原点を明示 ★★★ */
 top: 0; 
 left: 0;
 z-index: -1;                /* 波の上 */
 width: 64px;
 height: 64px;
 
 /* ★★★ 画像適用 ★★★ */
 background: center/contain no-repeat url('/tiiki/toc/tokkuma/img/tokkuma_Surfing.png');
 image-rendering: auto;

 /* 文字は使わないので0。画像の見た目は background で描く */
 font-size: 0;
 transform-origin: 50% 80%;
 will-change: transform;
 /* filter: drop-shadow(10px 8px 6px rgba(0,100,150,0.1)); 画像が小さいとボケるので機能停止 */
 pointer-events: none;
 user-select: none;
}

/* アクセシビリティ：動きを抑える設定 */
@media (prefers-reduced-motion: reduce) {
.chara { transition: none !important; }
}


/* 「トップに戻るとっくま」のZ-index対応 */
#pageTop{
    z-index: 10;
}
#footerBlock{
    z-index: 999;     
}