@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&family=Kiwi+Maru&family=Kosugi+Maru&family=Source+Code+Pro&family=Varela+Round&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 32px;
}
body{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--textColor);
}
img,video,iframe{
    max-width: 100%;
    height: auto;
}
img{
    vertical-align: top;
}
::selection{
    background-color: #7c7c7c42;
}
summary {
    display: block;
    border: none;
    cursor: pointer;
    user-select: none;
}
summary::-webkit-details-marker {
    display: none;
}
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
/*--------------------------------------------------------------*/
*{
    font-weight: 500;
    line-height: 1.65em;
    letter-spacing: .1em;
}
li{list-style: none;}
:root{
    --bg: #e7e2d8;
    --bgA: rgba(231, 226, 216,.5);
    --bgA2:#ffffffcc;
    --text: rgb(122, 118, 118);
    --textL: rgb(123, 120, 120);
    --sub: #b7ad97;
    --subDX: #c9bfaa;
    --subL: #c9bfaa;
    --subLL: #dfd9c9;
    --kiiro: #ffe07c;
    --pink: #ffcdc6;
    --blue:#cae4f3;
    --border: 1px solid var(--sub);
    --br_small: 4px;
    --br: 8px;
    --br_big: 12px;
    --font: 'Arial','Noto Color Emoji','ヒラギノ角ゴシック','Hiragino Sans','Menlo','メイリオ', Meiryo ,sans-serif;
    --font02: 'Kiwi Maru','Arial','Noto Color Emoji','ヒラギノ角ゴシック','Hiragino Sans','Menlo','メイリオ', Meiryo ,sans-serif
}

/*----------------ダークモード----------------------*/
/*
@media (prefers-color-scheme: dark) {
    :root{
        --bg: rgb(89, 88, 87);
        --bgA: rgba(89, 88, 87, 0.65);
        --bgA2:rgba(89, 88, 87, .85);
        --text: rgb(245, 244, 244);
        --textL: rgb(243, 243, 243);
        --sub: rgb(153, 153, 153);
        --subDX: rgb(186, 186, 186);
        --subL: rgb(129, 129, 129);
        --subLL: rgb(101, 101, 101);
        --kiiro: #d7c179;
        --pink: #d6aca6;
        --blue:#a7bdc9;
    }
    img{
        filter: opacity(.9);
    }
}
    */
/*----------------ダークモード----------------------*/

body{
    color: var(--text);
    font-family: var(--font);
    background: var(--bg);
}
hr{
    display: block;
    width: 100%;
    margin: auto;
    border: none;
    background-color: var(--sub);
    height: 1px;
    border-radius: 2222px;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
    margin: 0;
    font-family: var(--font02);
    font-weight: 400;
    border-bottom: var(--border);
    margin: 1em 0 .5em 0;
}

h1,.h1{ font-size: 2.8rem;}
h2,.h2{ font-size: 2.5rem;}
h3,.h3{ font-size: 1.85rem;}
h4,.h4{ font-size: 1.7rem;}
a{
    color: var(--text);
    text-decoration: underline;
}
a:hover{
    text-decoration: none;
    /*
    filter: drop-shadow(0px 0px 7px var(--subL));
    */
}
a:visited{
    color: var(--textL);
}
/*-----------------------------------------*/

.l_wrap{
    display: grid;
    gap: 16px;
    max-width: 1200px;
    margin: auto;
    padding-bottom: 64px;
    grid-template-columns: 65fr 35fr;
    grid-template-rows: auto auto;
}
.l_wrap > *{
    padding: 16px max(3vw, 16px);
}
.l_wrap .l_header{
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    border-bottom: var(--border);
}
.l_wrap .l_main{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.l_wrap .l_sub{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
@media screen and (max-width:780px){
    .l_wrap{
        grid-template-columns: 1fr;
        grid-row: auto auto auto;
    }
    .l_wrap .l_header{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    border-bottom: var(--border);
    }
    .l_wrap .l_main{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .l_wrap .l_sub{
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding-bottom: 120px;
    }
}
/*--------------------------------------*/
.l_postList{
    display: grid;
    gap: 12px;
}
.l_postList .item{
    border-radius: var(--br);
    padding: 16px;
}
.l_postList .item .ttl{
    display: block;
    font-size: 1.8rem;
}
.l_postList a{
    border-radius: var(--br);
    line-height: 100%;
    text-decoration: none;
}
.l_postList a:hover{
    background-color: var(--subLL);
}
/*-----------------------------------------*/
.l_post_wrap{
    display: grid;
    gap: 16px;
    max-width: 1500px;
    margin: auto;
    padding: 16px 0 120px 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}
.l_post_header{
    display: flex;
    width: 100%;

    gap: 4px;
    position: sticky;
    top: 0;
    padding: 8px;
    justify-content: center;
    backdrop-filter: blur(3px);
}
.l_post_main{
    display: block;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 16px max(3vw, 16px);
}
.l_post_header > *:not(:last-child)::after{
    content: " / ";
}
.l_post_main img{
    width: 100%;
    max-width: 800px;
    display: block;
    margin: 16px 0;
    border-radius: var(--br);
}
.l_post_main h1,.l_post_main .ttl{
    border: none;
}
.l_post_main h1::before,.l_post_main .ttl::before{
    content: "｢";
    color: var(--sub);
}
.l_post_main h1::after,.l_post_main .ttl::after{
    content: "｣";
    color: var(--sub);
}
.l_post_main > p{
    margin: .75em 0;
}

.toTop{
    width: 52px;
    height: 52px;
    margin: 0 8px 0 auto;
    position: fixed;
    bottom: 6vmin;
    right: 6vmin;
    z-index: 3;
}
.toTop a{
    display: block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    color: rgba(0,0,0,0);
    text-align: center;
    text-decoration: none;
    border: var(--border);
    border-radius: var(--br); 
    backdrop-filter: blur(3px);
}
.toTop a:hover{
    transform: translateY(-10px);
    transition: transform .4s;
}

.l_header{
    text-align: center;
    font-weight: 500;
}
.l_header .ttl{
    border: none;
}

.l_sub .ttl{
    font-size: 2.2rem;
}

/*----------------------------------------*/
.nekoEmoji,
.nekoEmoji *{
    display: inline-block;
    height: 1.65rem;
    width: 1.55rem;
    margin: 0 .1em;
    vertical-align: -0.2em;
}
@media (prefers-color-scheme: dark) {
    .nekoEmoji,
    .nekoEmoji *{
    filter: opacity(.9);
}
}
/*-------------------------*/
.item_dl{
    margin: 16px auto;
}
.item_dl dd{
    margin-left: 1em;
}
/*-------------------------*/
.item_dlSmall{
    margin: 16px 0;
}
.item_dlSmall dt,
.item_dlSmall dd{
    display: inline;
}
.item_dlSmall dt::after{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--sub);
    border-radius: 222px;
    margin: 0 3px 0 8px;
    transform: translateY(-25%);
}

.item_dlSmall dd:not(:last-child)::after{
    content: "/";
    margin-left: 3px;
    color: var(--sub);
}
/*----------------------------------------*/

.item_ul, .post>ul{
    margin: 16px 0;
}

.item_ul li,.post>ul li{
    line-height: 1.8em;
}

.item_ul li::before,.post>ul li::before{
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--sub);
    border-radius: 222px;
    margin: 0 .75em;
    transform: translateY(-10%);
}

.item_ul li>ul>li ,.post>ul li>ul>li{
    margin-left: 1em;
}

.item_ul li>ul>li::before, .post>ul li>ul>li{
    width: 5px;
    height: 5px;
    background-color: rgba(0,0,0,0);
    border: 1.5px solid var(--sub);
}
/*-----------------------------------*/
.item_inlineList{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.item_inlineList li:not(:last-child)::after{
    content: '/';
    display: inline-block;
    /*
    width: 8px;
    height: 8px;
    background: var(--sub);
    border-radius: 222px;
    */
    color: var(--sub);
    margin-left: 8px;
}

/*--------------------------------*/
.item_ul li .item_inlineList{
    display: inline-block;
}
.item_ul li .item_inlineList li::before{
    content: '';
    display: none;

}
.item_ul li .item_inlineList li{
    margin: 0;
    display: inline;
}

/*--------------------------------*/
.item_postImg{
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 16px 0;
    object-fit: cover;
    border-radius: var(--br);
    border: var(--border);
}
.post>img{
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 16px 0;
    object-fit: cover;
    border-radius: var(--br);
    border: var(--border);
}
/*----------------------------------------------------------*/
q{display: block;}
q::before,q::after{content: "";}
.item_quotation{
    display: block;
    color: var(--textL);
    font-style: italic;
    padding: 24px 16px 24px 38px;
    margin: 12px 0;
    position: relative;
    background-color: var(--subLL);
    border-radius: var(--br);
}
.item_quotation::before{
    content: "”";
    color: var(--subDX);
    font-size: 60px;
    font-family: sans-serif;
    position: absolute;
    top: 30px;
    left: 4px;
}

/*----------------------------------------------------------*/
.item_linkCard{
    display: block;
    height: auto;
    min-height: 96px;
    width: max-content;
    max-width: 100%;
    min-width: 60%;
    font-size: 1.7rem;
    color: var(--text);
    border: var(--border);
    border-radius: var(--br);
    padding: 8px 16px;
    margin: 1em 0;
    text-decoration: none;
}
.item_linkCard:visited{
    color: var(--textL);
}
.item_linkCard::after{
    content: attr(href) "";
    display: block;
    font-size: 1.4rem;
    text-decoration: none;
    color: var(--subDX);
    height: 1.5em;
    overflow-y: hidden;
}
.item_linkCard:hover{
    background: var(--subLL);
}
@media screen and (max-width: 660px){
    .item_linkCard{
        min-width: 80%;
    }
}
/* --------------------- */
.item_details{
    display: block;
    margin: 24px auto;
}
.item_details summary{
    font-size: 1.45rem;
    width: fit-content;
    padding: 8px 16px;
    border: var(--border);
    border-radius: var(--br);
    user-select: none;
}
.item_details summary::before{
    content: "";
    display: inline-block;
    width: 10px;
    height :12px;
    margin-right: 8px;
    background-color: var(--sub);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}
.item_details[open] summary::before{
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    width: 12px;
    height: 10px;
    margin-right: 6px;
}
.item_details .inner{
    padding: 8px 0 8px 16px;
    margin: 16px 0 0 16px;
    border-left: var(--border);
}
/*----------------------------------------------------------*/
.text_italic{/*文字が斜めに*/
    font-style: italic;
}
.text_del{/*取り消し線*/
    text-decoration: line-through;
}
.text_waveLine{/*文字の下に波々線が引かれる　うまくいかない・・・*/
    text-decoration: underline;
    text-decoration-style: wavy; 
}
.text_em{/*蛍光マーカー風*/
    text-decoration: underline ;
    text-decoration-color: var(--kiiro);
    text-decoration-thickness: .6em; 
    text-underline-offset: -.3em;
    text-decoration-skip-ink: none;
}
.text_em.text_em__kiiro{
    text-decoration-color:var(--kiiro); 
}
.text_em.text_em__blue{
    text-decoration-color:var(--blue);
}
.text_em.text_em__pink{
    text-decoration-color:var(--pink);  
}
.text_code{/*インラインコード用*/
    font-family: 'Source Code Pro', monospace;
    color: var(--textL);
    letter-spacing: .1em;
    line-height: 3rem;
    padding: 0.01em .5em;
    margin-right:.5em;
    border-radius: 4px;
    background: var(--subL);
}
.text_bold{/*太字*/
    font-weight: bolder;
}
.text_uLine{/*アンダーライン*/
    text-decoration: underline;
}
.text_small{
    font-size: 80%;
}
/*--------*/
.text_background{/*背景色つき*/
    background-color: var(--gray);
}
.text_background.text_background__kiiro,
.text_background__kiiro{
    background-color: var(--kiiro);
}
.text_background.text_background__pink,
.text_background__pink{
    background-color: var(--pink);
}
.text_background.text_background__blue,
.text_background__blue{
    background-color: var(--blue);
}
.text_gray{
    color: var(--gray3);
}
.text_pink{
    color: var(--pink);
}.text_blue{
    color: var(--blue);
}.text_kiiro{
    color: var(--kiiro);
}
/*---------------*/

.text_pin::before{
    content: "";
    display: inline-block;
    width:  10px;
    height: 10px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background: var(--kiiro);
    margin-right: 6px;/*
    transform: translateY(-1px);*/
}
.text_gray{
    color: var(--subDX);
}
.magic{
    display: inline-block;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 33%, var(--kiiro) 33%, var(--kiiro) 66%, var(--pink) 66%, var(--pink) 100%); 
    font-size: 14px;
    letter-spacing: .25em;
    text-indent: .15em;
    text-decoration: none;
    color: rgba(0,0,0,0);
    background-clip: text;
    -webkit-background-clip: text;
    user-select: none;
}