@charset "utf-8";
@font-face{font-family:'YakuHanJP';src:url(font/YakuHanJP.woff2) format('woff2');font-display:swap;}
@font-face {font-family: 'Gabarito';src: url("font/Gabarito.woff")  format('woff');unicode-range:U+0030-0039,U+0041-005A,U+0061-007A;/* 0-9,A-Z,a-z */font-display:swap;}

/* ------------------------------------
リセット
------------------------------------ */
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0;overflow-wrap:break-word;text-spacing-trim:trim-start;text-autospace:normal;text-align:justify}ul,ol{list-style-type:disc;list-style-position:inside;margin:30px 40px}ul[role='menu'],ol[role='menu'],ul[role='note'],ol[role='note']{list-style:none;margin:0}a{color:currentColor;text-decoration:none}a:hover{color:var(--accent-color)}p a,td a{padding-inline:2px;color:var(--font-color-anker)}.hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ------------------------------------
ルート指定
------------------------------------ */
:root {
    --font-size-big1  : clamp(1.25rem, 5vw + 1rem, 2rem);
    --font-size-big2  : clamp(1.12rem, 5vw + 1rem, 1.4rem);
    --font-size-big3  : clamp(1.05rem, 5vw + 1rem, 1.2rem);
    --font-size-base  : 1rem;
    --font-size-small : .85rem;

    --font-color-base    : #223;
    --font-color-sub     : #666;
    --font-color-anker   : #03c;
    --accent-color       : #cc3333;
    --bg-color-base      : #fefefe;
    --bg-color-sub       : #ccc;
    --bg-color-card-08  : rgba(255, 255, 255, .9);
    --bg-color-card-06  : rgba(255, 255, 255, .7);
    --bg-color-card-04  : rgba(255, 255, 255, .5);
    --bg-color-card-02  : rgba(255, 255, 255, .3);
}
@media (prefers-color-scheme: dark) {
    :root {
        --font-color-base    : #ddd;
        --font-color-sub     : #999;
        --font-color-anker   : #399;
        --accent-color       : #ff6666;
        --bg-color-base      : #121212;
        --bg-color-sub       : #222;
        --bg-color-card-08  : rgba(255, 255, 255, .14);
        --bg-color-card-06  : rgba(255, 255, 255, .11);
        --bg-color-card-04  : rgba(255, 255, 255, .08);
        --bg-color-card-02  : rgba(255, 255, 255, .05);
    }
    img {
        filter: saturate(80%) brightness(80%);
    }
}

/* ------------------------------------
背景グラデーション
------------------------------------ */
body{
    background      : linear-gradient(-45deg, #fee, #def, #dfd, #ffc) fixed;
    background-size : 300% 300%;
    animation       : bg-gradietion 20s ease infinite;
}
@keyframes bg-gradietion { 
    0%   {background-position : 0% 50%}
    50%  {background-position : 100% 50%}
    100% {background-position : 0% 50%}
}
@media (prefers-color-scheme: dark)  {
    body {
        background : var(--bg-color-base);
    }
}

/* ------------------------------------
全体
------------------------------------ */
html {
    height    : 100%;
    font-size : var(--font-size-base);
}
body {
    display                : grid;
    gap                    : 50px;
    max-width              : 800px;
    height                 : 100%;
    margin-inline          : auto;
    padding-inline         : 30px;
    line-height            : 1.75;
    color                  : var(--font-color-base);
    font-family            : Gabarito, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-feature-settings  : "palt" on;
}
abbr {
    text-decoration       : underline dotted;
    text-decoration-color : var(--font-color-sub);
    text-underline-offset : .3rem;
    cursor                : help;  
}
ruby {
    line-height : 1;
}


/* ------------------------------------
ヘッダー
------------------------------------ */
header {
    padding : 30px 0;
}
header h1 {
    font-size      : var(--font-size-big1);
    font-weight    : 400;
    font-display   : swap;
    letter-spacing : .3rem;

    span {
    display        : block;
    color          : var(--font-color-sub);
    font-size      : var(--font-size-base);
    line-height    : 1;
    letter-spacing : 0;
    }
}
/* ------------------------------------
パンくずリスト
------------------------------------ */
#breadcrumb {
    display               : grid;
    grid-template-columns : repeat(2, auto);
    justify-content       : left;
    padding-bottom        : 30px;
    font-family           : Gabarito, sans-serif;
}
#breadcrumb  li:not(:last-of-type)::after {
    content       : ">";
    margin-inline : 10px;
    color         : var(--font-color-sub);
}
#breadcrumb  li:last-of-type {
    color : var(--font-color-sub);
}



/* ------------------------------------
メイン
------------------------------------ */
main {
    margin-top : -60px;
}
h2 {
    margin         : 60px 0 30px 0;
    font-family    : Gabarito, sans-serif; 
    font-size      : var(--font-size-big2);
    font-weight    : 400;
    letter-spacing : .1em;
    color          : var(--font-color-sub);
}
p {
    margin : 16px;
}

/* ------------------------------------
イントロダクション
------------------------------------ */
#introduction {
    margin-block-start   : 60px;
    padding-block        : 5px;
    padding-inline-start : 20px;
    border-left          : 5px solid var(--bg-color-sub);

    dl {
        display               : grid;
        grid-template-columns : auto auto;
        justify-content       : right;
        color                 : var(--font-color-sub);
        font-size             : var(--font-size-small);

        dd::before {
            content       : "：";
            margin-inline : 6px;
        }
    }
    ul {
        width         : fit-content;
        margin-bottom : 15px;
        margin-left   : auto;

        li {
            text-align : right;
        }
    }
}

#introduction-profile dl {
        display               : grid;
        grid-template-columns : auto auto;
        justify-content       : right;
        color                 : var(--font-color-sub);
        font-size             : var(--font-size-small);

        dd::before {
            content       : "：";
            margin-inline : 6px;
        }
}
#introduction-profile {
    margin-top          : 70px;
    padding-top         : 140px;
    background-image    : url(../images/profile.webp), url(../images/profile-mii.webp), url(../images/profile-ac.webp);
    background-repeat   : no-repeat;
    background-position : top center;
    background-size     : 150px;
    animation           : image_anime 13s infinite;

    div {
        position      : relative;
        margin        : 45px 0 0 0;
        padding       : 15px 25px;
        border-radius : 20px;
        background    : var(--bg-color-card-08);
    }
    div::before {
        position      : absolute;
        display       : block;
        content       : "";
        top           : 0%;
        left          : 45%;
        border        : 20px solid transparent;
        border-bottom : 20px solid var(--bg-color-card-08);
        transform     : translateX(-50%);
        transform     : translateY(-100%);
    }
}
@media screen and (min-width : 600px) {
    #introduction-profile {
        padding-top         : 0;
        padding-left        : 140px;
        background-image    : url(../images/profile.webp);
        background-repeat   : no-repeat;
        background-position : center left;
        background-size     : 130px;
        animation           : image_anime 13s ease infinite;

        div {
            position      : relative;
            margin        : 0 0 0 30px;
            padding       : 20px 30px;
            border-radius : 15px;
            background    : var(--bg-color-card-08);
        }
        div::before {
            position     : absolute;
            display      : block;
            content      : "";
            top          : 45%;
            left         : 0%;
            border       : 20px solid transparent;
            border-right : 20px solid var(--bg-color-card-08);
            transform    : translateX(-100%);
        }
    }
}
@keyframes image_anime {
    0%   { background-image : url(../images/profile.webp); }
    15%  { background-image : url(../images/profile.webp); }
    30%  { background-image : url(../images/profile-mii.webp); }
    45%  { background-image : url(../images/profile-mii.webp); }
    60%  { background-image : url(../images/profile-ac.webp); }
    75%  { background-image : url(../images/profile-ac.webp); }
    100% { background-image : url(../images/profile.webp); }
}
@media (prefers-color-scheme: dark) {
    #introduction-profile {
        background-image    : url(../images/profile.webp);
        background-repeat   : no-repeat;
        background-position : top center;
        filter              : brightness(0.8) saturate(0.8);
    }
}
@media screen and (min-width : 600px) {
    @media (prefers-color-scheme: dark) {
    #introduction-profile {
        background-image    : url(../images/profile.webp);
        background-repeat   : no-repeat;
        background-position : center left;
        filter              : brightness(0.8) saturate(0.8);
    }
}
}

/* ------------------------------------
過去の記録
------------------------------------ */
#record {
    width      : 100%;
    margin     : 30px auto;
    padding    : 15px 25px;
    background :  var(--bg-color-card-04);
}
#record h2 {
    margin : 10px 0 0 15px;
}

/* ------------------------------------
テーブル
------------------------------------ */
.table-normal {
    table-layout    : auto;
    width           : 96%;
    margin          : 25px auto;
    border          : 1px solid #ccc;
    border-collapse : collapse;
    background      : var(--bg-color-card-04);
}
.table-normal th {
    white-space    : nowrap;
    vertical-align : middle;
    width          : fit-content;
    padding        : 10px 25px;
    border         : 1px solid #ccc;
    background     : var(--bg-color-card-06);
}
.table-normal td {
    width   : auto;
    padding : 10px 25px;
    border  : 1px solid #ccc;
}
@media screen and (max-width: 640px) {
.table-normal th,
.table-normal td {
    display       : block;
    width         : 100%;
    border-bottom : none;
}
.tb01 tr:last-child{
    border-bottom : solid 1px #ccc;
}
}
.table-normal td ul {
    margin : 0 0 0 15px;
}



/* ------------------------------------
フッター
------------------------------------ */
footer {
    padding-block : 0 15px;

    #copyright {
        width          : fit-content;
        min-height     : 35px;
        margin-top     : 3px;
        margin-left    : auto;
        text-align     : right;
        font-family    : Gabarito, sans-serif; 
        letter-spacing : .07em;
        vertical-align : bottom;
    }
}


/* ------------------------------------
インデックス ヘッダー
------------------------------------ */
#index-header {
    padding-top : 80px;
    font-family : Gabarito, sans-serif;

    h1 {
        margin-bottom  : 20px;
        font-size      : var(--font-size-big1);
        font-weight    : 400;
        font-display   : swap;
        letter-spacing : .3rem;
    }

    ul {
        display               : grid;
        grid-template-columns : repeat(3, auto);
        justify-content       : flex-start;
        gap                   : 20px;
        margin-top            : -20px;
        letter-spacing        : .1em;

        li:not(:first-of-type) {
            display : inline-flex;
        }
        li:not(:first-of-type)::before {
            display      : block;
            content      : "/";
            margin-right : 20px;
            padding      : 5px 0;
            color        : var(--font-color-sub);
        }
    a    {
            display : inline-block;
            padding : 5px 0;
        }
    }
}



/* ------------------------------------
インデックス コンテンツ一覧
------------------------------------ */
#index-contents {
    display               : grid;
    grid-template-columns : repeat(auto-fill, 220px);
    justify-content       : center;
    gap                   : 40px;

    li {
        padding       : 0;
        border-radius : 15px;
        background    : var(--bg-color-card-04);

        a {
            display            : grid;
            grid-template-rows : subgrid;
            grid-row           : div 3;
            gap                : 20px;
            padding            : 50px 10px 20px 10px;
            border-radius      : 15px;
            font-size          : var(--font-size-small);

            .content-image img {
                display       : block;
                width         : 100px;
                height        : 100px;
                margin-inline : auto;
                object-fit    : cover;
                border-radius : 50%;
                transition    : transform .3s ease;
            }

            .content-title {
                font-size   : var(--font-size-big3);
                text-align  : center;
                line-height : 2.5;
            }
            .content-description {
                padding-top : 15px;
                border-top  : 1px solid var(--bg-color-sub);
                text-align  : center;

                span {
                    display    : block;
                    color      : var(--font-color-sub);
                    text-align : center;
                }
            }
        }
        a:hover {
            background :  var(--bg-color-card-08);
            transition : .6s;

            .content-description span {
                color      : var(--accent-color);
                transition : .6s;
            }
            img {
                transition : transform .6s ease;
                transform  : scale(1.15)
            }
        }

        /* 野良猫 */
        #straycat {
            display            : grid;
            grid-row           : div 3;
            grid-template-rows : subgrid;
            gap                : 20px;
            padding            : 50px 10px 20px 10px;
            font-size          : var(--font-size-small);
            .straycat-image {
                width         : 100px;
                height        : 100px;
                margin-inline : auto;
                border        : 2px solid var(--bg-color-sub);
                border-radius : 50%;
                background    : #fff;
            }
            .straycat-image img {
                display       : block;
                width         : calc(100px - 4px);
                height        : calc(100px - 4px);
                border-radius : 50%;
                object-fit    : cover;
                opacity       : 1;
                transition    : opacity 0.5s;
            }
            .straycat-image img.fade-out {
                    opacity : 0;
                }
            
            .straycat-title {
                font-size   : var(--font-size-big3);
                text-align  : center;
                line-height : 2.5;
            }
            .straycat-description {
                padding-top : 15px;
                border-top  : 1px solid var(--bg-color-sub);
                text-align  : center;

                span {
                    display    : block;
                    color      : var(--font-color-sub);
                    text-align : center;
                }
            }
        }
    }
}



/* ------------------------------------
インデクス 広告
------------------------------------ */
#index-ads {
    margin-block-end : 40px;

    ul {
        display               : grid;
        grid-template-columns : repeat(auto-fill, 220px);
        gap                   : 40px;
        grid-template-rows    : auto auto;
        justify-content       : center;
        gap                   : 40px;
        list-style-type       : none;
        margin                : 0;

        li {
            display            : grid;
            grid-template-rows : subgrid;
            grid-row           : span 2;
        }

        a {
            display            : grid;
            grid-template-rows : subgrid;
            grid-row           : span 2;
            place-items        : center;
            gap                : 30px;
            padding            : 35px 25px;
            background         :  var(--bg-color-card-04);
            text-align         : center;
            transition         : transform .2s ease;

            span {
                text-align : center;
            }
        }
        a:hover  {
            background :  var(--bg-color-card-08);
            transition : .6s;
        }
    }

    .ads-policies {
        margin-block-start : 30px;
        font-size          : var(--font-size-small);
    }
}




/* ------------------------------------
インデックス フッター
------------------------------------ */
#footer-index {
    padding-block : 0 15px;

    > div {
        display               : grid;
        grid-template-columns : 1fr 2fr;
        vertical-align        : top;

        ul {
            display               : grid;
            grid-template-columns : repeat(2, auto);
            grid-auto-flow        : dense ;
            justify-content       : start;
            gap                   : 10px;

            li {
                margin-inline : auto;

                img {
                    width      : 2.2rem;
                    height     : 2.2rem;
                    object-fit : cover;
                }

                a:hover img {
                    opacity    : .5;
                    transition : .3s;
                }
            }
        }

        #copyright {
            width          : fit-content;
            margin-left    : auto;
            font-family    : Gabarito, sans-serif; 
            text-align     : right; 
            letter-spacing : .07em;
        }
    }
}