@charset "utf-8";

/* もくじ
    1. 色と基本     
    2. 背景             
    3. 深さのめもり     
    4. ヘッダー         
    5. index
    6. 作品（水槽）     
    7. グッズ
     8. お知らせ
     9. よこの通路
     10. こた自己紹介（about）
     11. 商品だな
     12. フッタ
     */

/* AZURE サイト
   https://gray-cliff-055dc5d00.5.azurestaticapps.net/index.html */


/* 1. 色と基本variable */

:root {
    --turquoise_vif:   #00D2DB;  
    --turquoise:       #5BC7CD;  
    --turquoise_clair: #BBEEF1;
    --eau_pale:        #D4F5F5;
    --encre:           #585858; 
    --blanc:           #FFFFFF;   /* 文字の白 */
    --fond:            #FFFFFF;   /* ページの地の色 */
    --gris:            #8AA3A8;   /* うすい文字 */
    --carte:           rgba(255, 255, 255, 0.88);

    /* 1. 世界ごとの色、CSSで使います。 */
    --vert:        #9BC684;      
    --vert_pale:   #EDF5E4;
    --bleu_profond:#123282;      
    --bleu_moyen:  #2354A5;

    --largeur: 1000px;           
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}


section {
    scroll-margin-top: 40px;
}

body {
    margin: 0;
   
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: var(--encre);
    line-height: 1.9;
    background-color: var(--fond);
}

/* 背景 */

    /* インデックス */
    body.fukasa_0 {
        background-image: linear-gradient(to bottom, var(--fond) 0%, var(--eau_pale) 100%);
    }
  

    /* ショップ */
    body.fukasa_40 {
        background-image: linear-gradient(to bottom, var(--fond), var(--eau_pale) 40%, var(--turquoise_clair));
        background-attachment: fixed;
    }


    /* Kota （about.htl） */
    body.fukasa_1000 {
        background-image: linear-gradient(to bottom,            
            var(--bleu_moyen) 45%,
            #071A3A 100%);
        background-attachment: fixed;
        color: var(--blanc);
    }

p {
    margin: 1em 0;
    font-size: 16px;
}

a {
    color: var(--turquoise);
    text-decoration: none;
    font-weight: bold;
    transition: 0.4s;            
}
a:hover {
    color: var(--turquoise_vif);
}

img {
    display: block;
    width: 100%;
}


.midashi {
    margin: 0 0 32px;
    font-size: 34px;
    letter-spacing: 0.08em;
    color: var(--encre);
}
 /* KOTAの書きスタイル */
.midashi span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.35em;      
    color: var(--turquoise);
}


/* 2. 背景 */

/* 水 */
.mizu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;        /* クリックを通す */

    /* くりかえす円 */
    background-image: repeating-radial-gradient(
        circle at 50% 130%,
        transparent 0 46px,
        rgba(91, 199, 205, 0.13) 46px 50px
    );
}

/* 泡 index.htmlのみ  */
.awa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;

    /* 泡 */
    background-image:
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%),
        radial-gradient(circle, rgba(91, 199, 205, 0.16) 30%, var(--turquoise) 32%, var(--turquoise) 48%, transparent 50%);

    /* 大きさ */
    background-size:
        18px 18px, 26px 26px, 13px 13px, 21px 21px, 11px 11px,
        30px 30px, 16px 16px, 23px 23px, 14px 14px;

    /* 位置 */
    background-position:
        15% 20%, 62% 70%, 84% 40%, 33% 88%,  7% 55%,
        48% 12%, 92% 78%, 24% 45%, 71% 30%;

    background-repeat: no-repeat;

    /* 上へ */
    animation: monte 14s linear infinite;
}

/* おそい泡 */
.awa_osoi {
    
    filter: opacity(0.6);

    animation-duration: 24s;
    animation-delay: -7s;

    /* 大きさ */
    background-size:
        24px 24px, 14px 14px, 19px 19px, 11px 11px, 28px 28px,
        16px 16px, 20px 20px, 12px 12px, 25px 25px;

    /* 位置 */
    background-position:
        40% 60%, 78% 25%, 10% 85%, 55% 35%, 88% 62%,
        29% 15%, 66% 92%, 4% 38%, 50% 74%;
}


@keyframes monte {
    0%   { transform: translateY(30vh);  opacity: 0;   }
    20%  {                               opacity: 0.5; }
    80%  {                               opacity: 0.5; }
    100% { transform: translateY(-60vh); opacity: 0;   }
}




/* 水は内容を前に */
header, main, footer {
    position: relative;
    z-index: 2;
}


/* 3. 深さのめもり */

/* めもり */
.memori {
    position: fixed;
    top: 0;
    right: 0;
    width: 150px;                /* 説明のぶん広く */
    height: 100%;
    z-index: 3;

    display: flex;
    align-items: center;         /* たて中央 */
    justify-content: center;
}

.memori ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.memori li {
    margin: 30px 0;
    /* たて書き */
    writing-mode: vertical-rl;
    text-orientation: upright;   /* SNS などのローマ字も立てる */
}

.memori a {
    display: flex;
    /* 3列にする */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    color: var(--turquoise_clair);
}


.memori span {                    /* 名前 */
    font-size: 14px;
    letter-spacing: 0.15em;
}


/* 今いる場所 */
.memori a.ima {
    color: var(--turquoise_vif);
}



/* マウスオーバー */
.memori a:hover {
    color: var(--turquoise_vif);
}

/* 区切り線 */
.memori li + li {
    border-top: 1px solid var(--turquoise_clair);
    padding-top: 30px;
}


/* 4. ヘッダー */

/* 幅いっぱい */
.fukasa_80 header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;                  
    background-color: var(--carte); /* サメの図鑑困ってるから必要ですー */
   
}

.header_naka {                /* Flex */
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: var(--largeur);   /* 画面サイズに応じて */
    margin: auto;
    padding: 20px 24px;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--encre);
}
.logo img {
    width: 52px;
    border-radius: 50%;          /* まるいアイコン */
}
.logo_moji {
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.25;
}

/* 肩書き　（Illustration
graphic designer） */
.logo_moji em {
    display: block;
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.28em;
    color: var(--gris);
}

.header_nav ul {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
}
.header_nav a {
    color: var(--encre);
    letter-spacing: 0.08em;
}
.header_nav a:hover {
    color: var(--turquoise_vif);
}


/* 5. index */

.hyoushi {
    display: flex;
    align-items: center;
    gap: 50px;

    max-width: var(--largeur);
    margin: 40px auto 100px;
    padding: 0 24px;
}

.hyoushi_moji {
    width: 50%;
}
.hyoushi_e {
    width: 50%;
}

/* キャッチコピー（題名より大きく） */
.hyougo {
    margin: 0;
    font-size: 76px;
    font-weight: bold;
    line-height: 1.1;
    color: var(--turquoise_vif);
}

.hyoushi_moji h1 {
    margin: 14px 0 0;
    font-size: 26px;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.hyoushi_moji h1 span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.4em;
    color: var(--turquoise);
}

.setsumei {
    margin: 24px 0 0;
    font-size: 15px;
}

/* 下へのボタン */
/* ちぢむボタン
   もと：dev.to「Top 20 CSS Buttons Animations」#15 Button Change ／ thelaazyguy
   https://dev.to/webdeasy/top-20-css-buttons-animations-f41
   （CodePen の CSS。色を変えました */

.moguru {
    position: relative;
    display: inline-block;
    width: 250px;
    margin-top: 40px;
}

.moguru a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 50px;
    font-weight: bold;
    text-decoration: none;
    background: var(--turquoise_vif);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 3px solid var(--turquoise_vif);
    transition: all .35s;
}

.moguru .icon {
    width: 50px;
    height: 50px;
    border: 3px solid transparent;
    position: absolute;
    transform: rotate(45deg);
    right: 0;
    top: 0;
    z-index: -1;
    transition: all .35s;

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--turquoise);
}
/* もとは SVG の矢印。ここは文字にした */
.moguru .icon::before {
    content: "→";
    transform: rotate(-45deg);
}

.moguru:hover a {
    width: 200px;
    border: 3px solid var(--turquoise);
    background: transparent;
    color: var(--turquoise);
}

.moguru:hover .icon {
    border: 3px solid var(--turquoise);
    right: -25%;
}


/* カルーセルの点 */

/* 6. 作品（水槽） */

.sakuhin {
    max-width: var(--largeur);
    margin: 0 auto 110px;
    padding: 0 24px;
}

.sakuhin_retsu {                  /* Flex・3列 */
    display: flex;
    align-items: stretch;        /* 高さをそろえる */
    gap: 26px;
}

/* 水槽（画像＋説明）index */
.garasu {
    flex: 1;
    margin: 0;
    background-color: var(--fond);
    border: 6px solid var(--fond);
    box-shadow: 0 8px 24px rgba(91, 199, 205, 0.28);
    overflow: hidden;
}
.garasu img {
    aspect-ratio: 4 / 3;         /* 同じ形 */
    object-fit: cover;           /* はみ出しを切る */
    transition: 0.4s;
}
/* カード全体がリンク */
.garasu a {
    display: block;
    color: var(--encre);
    font-weight: normal;
}
.garasu a:hover img {
    opacity: 0.82;
}
.garasu a:hover figcaption b {
    color: var(--turquoise);
}
.garasu figcaption {
    padding: 16px 16px 20px;
    font-size: 13px;
    line-height: 1.8;
}
.garasu figcaption b {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #0E7C86;
}

.motto {
    margin-top: 34px;
    text-align: right;
    letter-spacing: 0.1em;
}


/* 7. グッズ */

.guzzu {
    max-width: var(--largeur);
    margin: 0 auto 110px;
    padding: 0 24px;
}

.guzzu_retsu {
    display: flex;
    gap: 30px;
}

.shouhin {
    flex: 1;
    display: flex;               /* 画像は左、文字は右 */
    align-items: flex-start;
    gap: 18px;

    padding: 18px;
    background-color: var(--fond);
    box-shadow: 0 6px 20px rgba(91, 199, 205, 0.22);
}
.shouhin img {
    width: 40%;
    flex-shrink: 0;              /* 画像をつぶさない */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.shouhin_moji {
    width: 60%;
}
.shouhin h3 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.5;
}
/* 出版社と年 */
.shouhin .shouhin_shuppan {
    font-size: 11px;
    color: var(--gris);
}
.shouhin p {
    margin: 0 0 8px;
    font-size: 13px;
}
.kau a {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 30px;
    background-color: var(--turquoise_vif);
    color: var(--blanc);
    font-size: 13px;
    letter-spacing: 0.1em;
}
.kau a:hover {
    background-color: var(--turquoise);
    color: var(--blanc);
}


/* 8. お知らせ */

.oshirase {
    max-width: var(--largeur);
    margin: 0 auto 110px;
    padding: 0 24px;
}

.oshirase_naka {                  /* Flex（一覧＋カード） */
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* 日付つき一覧 */
.oshirase_ichiran {
    flex: 1;                     /* のこりの幅 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.oshirase_ichiran li {
    padding: 18px 4px 22px;
    border-bottom: 1px solid var(--turquoise_clair);
    font-size: 14px;
}

/* 日付・分類・題名 */
.oshirase_joho {
    display: flex;
    align-items: center;
    gap: 16px;
}


.oshirase_ichiran img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    margin-top: 14px;
    border-radius: 6px;
}
.oshirase_ichiran time {
    flex-shrink: 0;              /* 日付をつぶさない */
    color: var(--gris);
    font-size: 13px;
    letter-spacing: 0.05em;
}
.oshirase_ichiran a {
    display: block;
    color: var(--encre);
    font-weight: normal;
}
.oshirase_ichiran b {
    font-weight: normal;
    text-decoration-line: underline;
    text-decoration-color: var(--turquoise);
    text-underline-offset: 4px;
}
.oshirase_ichiran a:hover b,
.oshirase_ichiran a:hover time {
    color: var(--turquoise_vif);
    text-decoration-color: var(--turquoise_vif);
}
.oshirase_ichiran a:hover img {
    opacity: 0.85;
}

/* 外部リンクの矢印 */
.oshirase_ichiran a[target="_blank"] b::after {
    content: " ↗";
    font-size: 0.9em;
    color: var(--turquoise);
}

/* 分類ラベル */
.bunrui {
    flex-shrink: 0;
    width: 74px;                 /* 幅をそろえる */
    padding: 3px 0;
    border-radius: 3px;
    color: var(--blanc);
    font-size: 11px;
    text-align: center;
    letter-spacing: 0.1em;
}
.bunrui_tenji   { background-color: #0E7C86; }
.bunrui_shigoto { background-color: var(--bleu_moyen); }
.bunrui_media   { background-color: #5A6E73; }

/* 右のカード */
.oshirase_yoko {
    display: flex;
    flex-direction: column;
    gap: 30px;

    /* 少し下げる */
    margin-top: 50px;

    width: 260px;
    flex-shrink: 0;              /* 幅を保つ */
}

/* カード */
.SNSi {
    margin: 0;

    padding: 14px 14px 4px;
    background-color: var(--fond);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(91, 199, 205, 0.28);
}
.SNSi img {
    border-radius: 8px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.SNSi figcaption {
    padding: 14px 6px 16px;
    font-size: 12px;
    line-height: 1.8;
}
.SNSi figcaption b {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    color: #0E7C86;
}
/* SNS一覧 */
.sns {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.sns li + li {
    border-top: 1px solid var(--eau_pale);
}
.sns a {
    display: block;
    padding: 12px 2px;
    font-size: 13px;
    font-weight: normal;
    color: var(--encre);
}

/* SNSのアイコン
   もと：SVG Repo「Instagram [#167]」「Note Edit」
   https://www.svgrepo.com/svg/512399/instagram-167
   https://www.svgrepo.com/svg/511086/note-edit
   Xは Bootstrap Icons「twitter-x」
   メールは https://www.svgrepo.com/svg/479446/email-14 */
.aikon {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    vertical-align: -4px;
}
.aikon_x path,
.aikon_insta path,
.aikon_mail path {
    fill: var(--encre);
}
.aikon_note path {
    stroke: var(--encre);
}
.sns a:hover .aikon_x path,
.sns a:hover .aikon_insta path,
.sns a:hover .aikon_mail path {
    fill: var(--turquoise_vif);
}
.sns a:hover .aikon_note path {
    stroke: var(--turquoise_vif);
}
/* メールにも、ほかと同じ矢印 */
.sns a[href^="mailto"]::after {
    content: " \2197";
    font-size: 0.9em;
    color: var(--turquoise);
}

.sns a:hover {
    color: var(--turquoise_vif);
}
/* 外部リンクの矢印 */
.sns a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.9em;
    color: var(--turquoise);
}

.SNSi figcaption span {           /* 英語の小見出し */
    display: block;
    font-size: 9px;
    font-weight: normal;
    letter-spacing: 0.3em;
    color: #9AC3C8;
}


/* 9. よこの通路 */

.rouka {
    display: flex;
    height: 100vh;


    overflow-x: auto;            /* よこにスクロール */
    overflow-y: hidden;

    /* scroll-snap（1画面ずつ） */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;     /* めもりのリンク用 */
}

.suisou {
    position: relative;
    min-width: 100vw;            /* 画面の幅 */
    height: 100vh;
    scroll-snap-align: start;    /* 左はしで止まる */

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 100px 80px 60px 190px;   /* めもりの場所 */
}

/* 左右の並び（世界ごとに指定） */



/* 世界ごとの色 */
.suisou_1 {                     /* みずの世界 : 軽い青 */
    background-image: linear-gradient(160deg, var(--fond), var(--eau_pale));
}
.suisou_2 {                     /* サボ茶房 : 明るい緑 */
    background-image: linear-gradient(160deg, var(--fond), var(--vert_pale));
}
.suisou_3 {                     /* サメの図鑑 : 濃い青 */
    background-image: linear-gradient(160deg, var(--bleu_moyen), var(--bleu_profond));
    color: var(--blanc);         /* 背景は黒くなる ー＞ 白文字 */
}

/* 水槽（画像2枚） */
.suisou_e {
    position: relative;          /* 2枚目の基準 */
    width: 50%;
    max-width: 560px;

    padding: 10px;
    background-color: var(--fond);
    box-shadow: 0 10px 30px rgba(20, 60, 90, 0.25);
}
.suisou_e > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* 2枚目を右下に */
.suisou_ko {
    position: absolute;
    right: -34px;
    bottom: -40px;
    width: 42%;

    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 8px solid var(--fond);
   
}

/* 説明文 */
.suisou_fuda {
    width: 38%;
}

.suisou_eigo {
    margin: 4px 0 0;
    font-size: 11px;
    letter-spacing: 0.35em;
    color: var(--turquoise);
}
.suisou_2 .suisou_eigo { color: #6E9C56; }
.suisou_3 .suisou_eigo { color: #9FC2F0; }

.suisou_fuda p {
    font-size: 14px;
}


/* くわしく表示 */

/* ふだんの表示 */
.suisou_omote {
    display: flex;
    flex-direction: row-reverse;   /* 画像が右 */
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* モザイク両親 */
.suisou_kuwashiku {
    position: absolute;
    top: 170px;
    right: 60px;
    bottom: 50px;
    left: 24px;

    display: flex;
    gap: 16px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s;
}

/* ひらいた状態 */
.suisou.hiraita .suisou_omote {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
}
.suisou.hiraita .suisou_kuwashiku {
    opacity: 1;
    visibility: visible;
}

/* モザイク 子供*/
/* グリッド：3列。1枚を大きくする */
.mozaiku {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 18px;
    flex: 1;
    min-height: 0;
}
.mozaiku figure {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    cursor: pointer;
    background-color: var(--fond);
    border: 5px solid var(--fond);
    box-shadow: 0 8px 22px rgba(20, 60, 90, 0.22);
    overflow: hidden;

    /* 一枚ずつ出てくる */
    opacity: 0;
    transform: scale(0.9) translateY(14px);
    /* 2 valeurs : opacite puis transform.
       transform sans delai, sinon le survol repond avec 0,5 s de retard */
    transition: opacity 0.5s ease, transform 0.4s ease;
}
.mozaiku img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;

}

/* 押せることを見せる：少し大きく、少しかたむける
   3n+1 / 3n+2 / 3n で かたむきも 大きさも変える。
   .hiraita を頭につけるのは、あとに出てくる
   「.suisou.hiraita .mozaiku figure { transform: none }」に
   打ち消されないため（同じ強さだと、あとに書いた方が勝つ） */
.hiraita .mozaiku figure:hover,
.hiraita .mozaiku figure:focus-visible {
    box-shadow: 0 14px 30px rgba(20, 60, 90, 0.34);
    z-index: 2;
}

/* 1枚目・4枚目… 左へ大きめ */
.hiraita .mozaiku figure:nth-child(3n+1):hover,
.hiraita .mozaiku figure:nth-child(3n+1):focus-visible {
    transform: scale(1.055) rotate(-2deg);
}
/* 2枚目・5枚目… 右へ ひかえめ */
.hiraita .mozaiku figure:nth-child(3n+2):hover,
.hiraita .mozaiku figure:nth-child(3n+2):focus-visible {
    transform: scale(1.03) rotate(1.3deg);
}
/* 3枚目・6枚目… 左へ すこしだけ */
.hiraita .mozaiku figure:nth-child(3n):hover,
.hiraita .mozaiku figure:nth-child(3n):focus-visible {
    transform: scale(1.045) rotate(-0.7deg);
}
.mozaiku figure:focus-visible {
    outline: 3px solid var(--turquoise_vif);
    outline-offset: 2px;
}
.mozaiku figcaption {
    flex-shrink: 0;
    padding: 10px 10px 12px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--encre);
}
.mozaiku figcaption b {
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
    color: var(--turquoise_vif);
    transition: color 0.3s ease;
}
.hiraita .mozaiku figure:hover figcaption b {
    color: var(--turquoise);
}
.suisou_2 .mozaiku figcaption b { color: #5F8C48; }
.suisou_3 .mozaiku figcaption b { color: var(--bleu_moyen); }

/* 1枚えらんだとき：左に大きく、のこりは右の1列にならぶ */
.mozaiku.erabi {
    grid-template-columns: 2fr 1fr;
}
.mozaiku.erabi figure.ookii {
    grid-column: 1;
    grid-row: 1 / -1;          /* 上から下まで */
}
.mozaiku.erabi figure:not(.ookii) {
    grid-column: 2;            /* のこりは1列に集める */
}
/* 小さい方は画像だけ（1列に残り枚） */
.mozaiku.erabi figure:not(.ookii) figcaption {
    display: none;
}
.mozaiku figure.ookii figcaption {
    padding: 14px 14px 16px;
    font-size: 13px;
}
.mozaiku figure.ookii figcaption b {
    font-size: 17px;
}

/* 出る順番：時計まわり
   1 2 3
   6 5 4  */
.suisou.hiraita .mozaiku figure { opacity: 1; transform: none; }
.suisou.hiraita .mozaiku figure:nth-child(1) { transition-delay: 0.10s, 0s; }
.suisou.hiraita .mozaiku figure:nth-child(2) { transition-delay: 0.18s, 0s; }
.suisou.hiraita .mozaiku figure:nth-child(3) { transition-delay: 0.26s, 0s; }
.suisou.hiraita .mozaiku figure:nth-child(6) { transition-delay: 0.34s, 0s; }
.suisou.hiraita .mozaiku figure:nth-child(5) { transition-delay: 0.42s, 0s; }
.suisou.hiraita .mozaiku figure:nth-child(4) { transition-delay: 0.50s, 0s; }

/* 本 */
.mozaiku_hon {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;

    width: 150px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.suisou.hiraita .mozaiku_hon { opacity: 1; transition-delay: 0.6s; }
.mozaiku_hon ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}
.mozaiku_hon li b { margin-right: 8px; }

/* 本のリンク */
.mozaiku_hon_moji a {
    color: var(--encre);
    font-weight: normal;
    text-decoration-line: underline;
    text-decoration-color: var(--turquoise);
    text-underline-offset: 3px;
}
.mozaiku_hon_moji a:hover {
    color: var(--turquoise_vif);
    text-decoration-color: var(--turquoise_vif);
}
.mozaiku_hon_moji a::after {
    content: " ↗";
    font-size: 0.9em;
    color: var(--turquoise);
}
.suisou_3 .mozaiku_hon_moji a { color: var(--blanc); }
.suisou_3 .mozaiku_hon_moji a:hover { color: var(--turquoise_clair); }
.mozaiku_hon li span { color: var(--gris); }
.suisou_3 .mozaiku_hon li span { color: #9FC2F0; }
.mozaiku_hon_moji a:hover span { color: var(--turquoise_vif); }
.suisou_3 .mozaiku_hon_moji a:hover span { color: var(--turquoise_clair); }

/* とじるー */
.tojiru {
    align-self: flex-start;

    padding: 8px 18px;
    border: 1px solid var(--turquoise);
    border-radius: 30px;
    background: none;
    color: var(--turquoise);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.tojiru:hover { background-color: var(--turquoise); color: var(--blanc); }
/* 世界ごとの色 */
.suisou_1 .tojiru {
    background-color: var(--turquoise_vif);
    border-color: var(--turquoise_vif);
    color: var(--blanc);
}
.suisou_1 .tojiru:hover {
    background-color: var(--turquoise);
    border-color: var(--turquoise);
}
.suisou_2 .tojiru {
    background-color: var(--vert);
    border-color: var(--vert);
    color: var(--blanc);
}
.suisou_2 .tojiru:hover {
    background-color: #6E9C56;
    border-color: #6E9C56;
}
.suisou_3 .tojiru { border-color: var(--blanc); color: var(--blanc); }
.suisou_3 .tojiru:hover { background-color: var(--blanc); color: var(--bleu_profond); }

/* ボタン */
/* リング付きボタン
   もと：dev.to「Top 20 CSS Buttons Animations」#25
   Pure CSS Button with Ring Indicator ／ Cole McCombs
   https://dev.to/webdeasy/top-20-css-buttons-animations-f41
   （CodePen の CSS。大きさ・字の大きさ・色は
       サイトに合わせて小さくしました。字もサイトと同じ） */

.miru button {
    min-width: 210px;
    min-height: 46px;
    display: inline-flex;
    font-family: inherit;
    font-size: 15px;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #313133;
    background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
    border: none;
    border-radius: 1000px;
    box-shadow: 6px 6px 14px rgba(79,209,197,.5);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;

    --wa: var(--turquoise_vif);   /* 輪の色 */
}

.miru button::before {
    content: '';
    border-radius: 1000px;
    border: 3px solid var(--wa);
    box-shadow: 0 0 24px var(--wa);
    position: absolute;
    inset: -7px;          /* 外がわに 7px */
    opacity: 0;
    transition: all .3s ease-in-out 0s;
}

.miru button:hover,
.miru button:focus {
    transform: translateY(-4px);
}

.miru button:hover::before,
.miru button:focus::before {
    opacity: 1;
}

.miru button::after {
    content: '';
    width: 24px; height: 24px;
    border-radius: 100%;
    border: 3px solid var(--wa);
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 4s infinite;
}

.miru button:hover::after,
.miru button:focus::after {
    animation: none;
    display: none;
}

/* 波は 1.5秒でひろがって、あとは休み（4秒に1回） */
@keyframes ring {
    0% {
        width: 24px;
        height: 24px;
        opacity: 1;
    }
    37%, 100% {
        width: 210px;
        height: 210px;
        opacity: 0;
    }
}

/* 世界ごとの色 */
.suisou_2 .miru button {
    background: var(--vert);
    --wa: #6E9C56;
}
.suisou_3 .miru button {
    background: var(--blanc);
    color: var(--bleu_profond);
    --wa: var(--turquoise_clair);
}

/* 世界のページへ */
.miru {
    margin-top: 26px;
    /* 波（z-index:-1）が水槽の背景にかくれないように */
    position: relative;
    z-index: 0;
}

.yajirushi {
    display: flex;
    gap: 12px;
    margin-top: 14px;
}
.yajirushi a {
    display: block;
    width: 44px;
    height: 44px;
}
.yajirushi svg {
    display: block;
    width: 100%;
    height: 100%;
}
.yajirushi .hidari svg {
    transform: scaleX(-1);
}
.yajirushi path         { fill: var(--turquoise_vif); }
.yajirushi a:hover path { fill: var(--turquoise); }
.suisou_2 .yajirushi path         { fill: var(--vert); }
.suisou_2 .yajirushi a:hover path { fill: #5F8C48; }
.suisou_3 .yajirushi path         { fill: var(--blanc); }
.suisou_3 .yajirushi a:hover path { fill: var(--turquoise_clair); }

/* 10. こた自己紹介（about） */

/* 暗い背景用 */
.fukasa_1000 .logo a,
.fukasa_1000 .header_nav a {
    color: var(--blanc);
}
.fukasa_1000 header {
    position: relative;
    z-index: 5;
}


/*KOTA*/


.atsumari {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 96px);
    overflow: hidden;            
    padding: 0 0 24px;
}


.obi {
    overflow: hidden;
    margin-bottom: 20px;
}
.obi:last-of-type {
    margin-bottom: 0;
}


.obi_retsu {
    display: flex;
    gap: 26px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;

    animation: derive 46s linear infinite;
}
/*swapingu*/
@keyframes derive {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 13px)); }  
}


.obi_2 .obi_retsu {
    animation-duration: 62s;
    animation-direction: reverse;
}
.obi_3 .obi_retsu {
    animation-duration: 80s;
}


.obi_retsu li {
    width: clamp(96px, 14vh, 128px);
    height: clamp(96px, 14vh, 128px);
    flex-shrink: 0;              /* つぶさない */

    border-radius: 50%;          /* まる */
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.obi_retsu img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* はみ出しを切る */
}

/* 1列目：遠い */
.obi .obi_retsu li {
    width:  clamp(70px, 10vh, 92px);
    height: clamp(70px, 10vh, 92px);
    opacity: 0.5;
}
/* 2列目：中間 */
.obi_2 .obi_retsu li {
    width:  clamp(84px, 12vh, 110px);
    height: clamp(84px, 12vh, 110px);
    opacity: 0.75;
}
/* 3列目：近い */
.obi_3 .obi_retsu li {
    width:  clamp(96px, 14vh, 128px);
    height: clamp(96px, 14vh, 128px);
    opacity: 1;
}

/* h1 */
/* 白い文字＋細い黒フチ（画像の代わり） */
.atsumari_midashi,
.atsumari_bun {
    /* 文字の大きさはここだけ。見出しも本文も同じ */
    font-size: clamp(13px, 1.15vw, 16px);
    font-family: "Kiwi Maru", "Hiragino Kaku Gothic ProN", sans-serif;
    color: var(--blanc);

    /* paint-order がないと、文字の内側を削って細く見える */
    -webkit-text-stroke: 0.7px rgba(0, 0, 0, 0.55);
    paint-order: stroke fill;
}

.atsumari_midashi {
    width: min(900px, 90%);
    margin: 0 auto clamp(14px, 2.5vh, 26px);
    text-align: center;
    font-weight: 500;
    line-height: 1.9;
}

/* 名前だけ大きく */
.atsumari_midashi b {
    display: block;
    line-height: 1.3;
    font-size: clamp(30px, 3.4vw, 46px);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
}

.yomu_dake {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);      
    white-space: nowrap;
    border: 0;
}

/* 肩書き（本文と同じ大きさ） */
.atsumari_midashi span {
    display: block;
    margin-top: 6px;
    letter-spacing: 0.18em;
}

/* 本文 */
.atsumari_bun {
    width: min(900px, 90%);
    margin: 0 auto clamp(20px, 4vh, 44px);
    text-align: center;
    line-height: 2.1;
}
.atsumari_bun p {
    margin: 0 0 10px;
}


/* 11. 商品だな */
        /* 商品だな */
        .tana {
            padding-top: 4vh;
        }

        /* 見出しと最後の案内 */
        .tana_hajime,
        .tana_owari {
            max-width: var(--largeur);
            margin: 30px auto 0;
            padding: 0 24px;
        }
        /* 最後の案内 */
        .tana_owari {
            margin: 80px auto 100px;
            text-align: center;
        }
        /* SNSのリンク */
        .tana_link a {
            display: inline-block;
            margin: 0 8px;
            padding: 10px 26px;
            border: 2px solid var(--turquoise_vif);
            border-radius: 40px;
            font-size: 14px;
            letter-spacing: 0.12em;
        }
        .tana_link a:hover {
            background-color: var(--turquoise_vif);
            color: var(--blanc);
        }

        /* どこからどこまで作品が見えます。 */
        .michi {
            view-timeline-axis: block;

            height: 100vh;

            margin-bottom: -45vh;

            /* カードが止まる位置に合わせる */
            scroll-margin-top: 130px;
        }

      
        /* カードごとの名前 */
        .michi_1 { view-timeline-name: --p1; margin-bottom: -30vh; }
        .michi_2 { view-timeline-name: --p2; margin-bottom: -30vh;}
        .michi_3 { view-timeline-name: --p3; margin-bottom: -30vh;}
        .michi_4 { view-timeline-name: --p4; margin-bottom: -30vh;}
        .michi_5 { view-timeline-name: --p5; margin-bottom: -30vh;}
        .michi_6 { view-timeline-name: --p6; margin-bottom: -30vh;}
        .michi_7 { view-timeline-name: --p7; margin-bottom: -30vh;}

        /* 商品カード */
        .tana_fuda {
            position: sticky;
            top: 130px;                 

            display: flex;
            align-items: center;
            gap: 50px;

            max-width: var(--largeur);
            margin: 0 auto;
            padding: 34px;

            background-color: var(--fond);
            border-radius: 14px;
            box-shadow: 0 14px 40px rgba(20, 60, 90, 0.22);

            animation: fondre ease-out both;
          
            animation-range: entry 55% exit 55%;
        }

        /* カードと名前をつなぐ */
        .tana_1 { animation-timeline: --p1; animation-range: entry 70% exit 55%; }
        .tana_2 { animation-timeline: --p2; }
        .tana_3 { animation-timeline: --p3; }
        .tana_4 { animation-timeline: --p4; }
        .tana_5 { animation-timeline: --p5; }
        .tana_6 { animation-timeline: --p6; }
        .tana_7 { animation-timeline: --p7; }


        /* 小さく・ぼかして消える */
        @keyframes fondre {
            0% { transform: translateY(0)     scale(1);     filter: blur(0);    opacity: 1;    }
            30% { transform: translateY(-26px) scale(0.97);  filter: blur(0);    opacity: 1;    }
            60% { transform: translateY(-48px) scale(0.94);  filter: blur(1px);  opacity: 0.96; }
            81% { transform: translateY(-64px) scale(0.92);  filter: blur(6px);  opacity: 0.6;  }
            100% { transform: translateY(-80px) scale(0.9);   filter: blur(16px); opacity: 0;    }
        }


  /* 3つめの一覧 */
  .michi_3 ul{
    font-size: small;
  }
     
        
        
     

        /* 最後は消えない */
        .tana_7 { animation: none; }
        .michi_7 { margin-bottom: 0; }

        /* 文字 */
        .tana_moji {
            width: 60%;
        }
        /* ラベル */
        .tana_bangou {
            margin-top: 50px;
            margin: 0;
            font-size: 26px;
            font-weight: bold;
            letter-spacing: 0.1em;
            color: var(--turquoise_clair);
        }
        .tana_bangou span {
            margin-left: 14px;
            font-size: 11px;
            letter-spacing: 0.3em;
            color: var(--turquoise);
        }
        /* 題名 */
        .tana_moji h2 {
            margin: 6px 0 12px;
            font-size: 30px;
            line-height: 1.4;
        }
        .tana_moji h2 small {
            font-size: 14px;
            font-weight: normal;
            color: var(--gris);
        }
        /* 出版社 */
        .tana_shuppan {
            margin: 0 0 16px;
            font-size: 12px;
            line-height: 1.9;
            color: var(--gris);
        }
        .tana_moji p {
            font-size: 14px;
        }
        /* 買うボタン */
        .tana_link_ari {
            margin-top: 22px;
        }
        .tana_link_ari a {
            display: inline-block;
            padding: 12px 30px;
            border-radius: 40px;
            background-color: var(--turquoise_vif);
            color: var(--blanc);
            font-size: 14px;
            letter-spacing: 0.1em;
        }
        .tana_link_ari a:hover {
            background-color: var(--turquoise);
            color: var(--blanc);
        }
        /* ネット販売なし */
        .tana_link_nashi span {
            display: inline-block;
            padding: 12px 26px;
            border: 1px dashed var(--turquoise_clair);
            border-radius: 40px;
            font-size: 12px;
            color: var(--gris);
        }


/* 12. フッター */

footer {
    padding: 40px 24px 60px;
    border-top: 1px solid var(--turquoise_clair);
}
.footer_nav ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.footer_nav a {
    color: var(--encre);
}
.copyright {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    color: var(--gris);
}



/* 14. よみこみ中 */

.yomikomi {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--fond);
    transition: opacity 0.6s ease, visibility 0.6s;
}
.fukasa_1000 .yomikomi { background-color: #071A3A; }

/* 読み終わったら消える（js/nav.js がつける） */
.yomikomi.owari {
    opacity: 0;
    visibility: hidden;
}

/* あがっていく泡 */
.yomikomi_awa {
    display: flex;
    gap: 14px;
}
.yomikomi_awa span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--turquoise);
    animation: awa_agaru 1.2s ease-in-out infinite;
}
.yomikomi_awa span:nth-child(2) { animation-delay: 0.15s; }
.yomikomi_awa span:nth-child(3) { animation-delay: 0.3s; }

@keyframes awa_agaru {
    0%, 100% { transform: translateY(6px);  opacity: 0.35; }
    50%      { transform: translateY(-6px); opacity: 1;    }
}


/* 15. 上へもどるボタン */
/* アイコン
   もと：SVG Repo「Arrow Up Square」
   https://www.svgrepo.com/svg/507932/arrow-up-square */
.ue_modoru {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 8;

    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;

    /* さいしょは見えない */
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
}

.ue_modoru svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* 下までスクロールしたら、ふわっと出る */
.ue_modoru.mieru {
    opacity: 1;
    visibility: visible;
}

.ue_modoru:hover {
    opacity: 0.7;
}


/* 16. 夜モード */

/* 色をぬりかえるだけ */
body.yoru {
    --fond:     #0E2140;
    --eau_pale: #16305C;
    --carte:    rgba(14, 33, 64, 0.88);
    --encre:    #D8E6F2;
    --gris:     #8FA9C4;
}

/* ショップの下、明るい水色をけす */
body.yoru.fukasa_40 {
    background-image: linear-gradient(to bottom, var(--fond), var(--eau_pale));
}

/* サボ茶房は緑のまま、暗くする */
body.yoru .suisou_2 {
    background-image: linear-gradient(160deg, var(--fond), #585E36);
}

/* 絵は少し暗く */
body.yoru img {
    filter: brightness(0.8) saturate(0.9);
}

/* 夜のボタン */
/* アイコン
   もと：SVG Repo「Night」／「Sun Fog」
   https://www.svgrepo.com/svg/503062/night
   https://www.svgrepo.com/svg/525085/sun-fog */
.yoru_botan {
    position: fixed;
    top: 26px;
    right: 30px;
    z-index: 9;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--turquoise);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: transform .25s;
}

/* さわると大きくなる */
.yoru_botan:hover {
    transform: scale(1.15);
    border-color: var(--turquoise_vif);
}

.yoru_botan svg {
    width: 22px;
    height: 22px;
}

/* ふだんは月、夜モードのときは太陽 */
.yoru_botan .taiyou { display: none; }
body.yoru .yoru_botan .tsuki  { display: none; }
body.yoru .yoru_botan .taiyou { display: block; }

body.yoru .garasu figcaption b,
body.yoru .SNSi figcaption b {
    color: var(--turquoise_clair);
}

.header_nav a:hover,
.memori a:hover,
.sns a:hover,
.motto a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.fukasa_80 .memori {
    top: 116px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
.fukasa_80 .memori ul {
    display: flex;
}
.fukasa_80 .memori li {
    margin: 0;
    writing-mode: horizontal-tb;
}
.fukasa_80 .memori li + li {
    border-top: none;
    border-left: 1px solid var(--gris);
    padding-top: 0;
    padding-left: 26px;
    margin-left: 26px;
}
.fukasa_80 .memori a {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    color: var(--encre);
}
.memori b {
    font-size: 11px;
    letter-spacing: 0.1em;
}
.fukasa_80 .memori a.ima,
.fukasa_80 .memori a:hover {
    color: #0E7C86;
}
body.yoru.fukasa_80 .memori a.ima,
body.yoru.fukasa_80 .memori a:hover {
    color: var(--turquoise_vif);
}

/* 見出し */
.fukasa_80 .memori h1 {
    margin: 0 34px 0 0;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.1em;
}

/* 3つめの水槽は背景が濃い */
.fukasa_80 .memori:has(li:nth-child(3) a.ima) a {
    color: var(--turquoise_clair);
}
.fukasa_80 .memori:has(li:nth-child(3) a.ima) a.ima {
    color: var(--blanc);
}
.fukasa_80 .memori:has(li:nth-child(3) a.ima) li + li {
    border-left-color: var(--turquoise_clair);
}
.fukasa_80 .memori:has(li:nth-child(3) a.ima) h1 {
    color: var(--blanc);
}

.suisou_fuda .miru {
    text-align: center;
}
.suisou_fuda .yajirushi {
    justify-content: center;
}

.yajirushi_kuwashiku {
    margin-top: auto;
}
.yajirushi_kuwashiku a {
    width: 38px;
    height: 38px;
}

.bangou {
    margin-right: 14px;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--turquoise_vif);
}
.suisou_2 .bangou { color: #5F8C48; }
.suisou_3 .bangou { color: var(--turquoise_clair); }

.sns_yoko {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 6px 0 0;
}
.sns_yoko a {
    font-size: 15px;
}
.sns_yoko .aikon {
    width: 22px;
    height: 22px;
    vertical-align: -5px;
}
.sns_yoko li + li {
    border-top: none;
}
.fukasa_1000 .sns a {
    color: var(--blanc);
}
.fukasa_1000 .sns .aikon_x path,
.fukasa_1000 .sns .aikon_insta path,
.fukasa_1000 .sns .aikon_mail path {
    fill: var(--blanc);
}
.fukasa_1000 .sns .aikon_note path {
    stroke: var(--blanc);
}

/* グッズの上の目次 */
.tana_menu {
    max-width: var(--largeur);
    margin: 26px auto 0;
    padding: 0 24px;
}
.tana_menu ul {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tana_menu a {
    display: block;
    width: 90px;
    color: var(--encre);
    font-weight: normal;
    font-size: 11px;
    text-align: center;
}
.tana_menu img {
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
    opacity: 0.75;
    transition: 0.3s;
}
.tana_menu span {
    display: block;
    line-height: 1.5;
    white-space: nowrap;
}
.tana_menu a:hover img,
.tana_menu a.ima img {
    opacity: 1;
}
.tana_menu a:hover,
.tana_menu a.ima {
    color: #0E7C86;
}
body.yoru .tana_menu a:hover,
body.yoru .tana_menu a.ima {
    color: var(--turquoise_vif);
}

/* 上下の矢印 */
.tana_yajirushi a {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
}
.tana_yajirushi svg {
    display: block;
    width: 100%;
    height: 100%;
}
.tana_yajirushi path {
    fill: var(--turquoise_vif);
}
.tana_yajirushi a:hover path {
    fill: var(--turquoise);
}
/* 上へ */
.tana_ue {
    left: -26px;
    transform: rotate(-90deg);
}
/* 下へ */
.tana_shita {
    right: -26px;
    transform: rotate(90deg);
}

/* アニメーション削減設定 */
@media (prefers-reduced-motion: reduce) {
    .obi_retsu { animation: none; }
    .tana_fuda { animation: none; }
    .yomikomi_awa span { animation: none; }
}