@charset "UTF-8";
/**----------------------------------**/
iframe.youtube{
    aspect-ratio: 16/9;
    border-radius: var(--br);
}
.dot{
    width: 1.2em;
    height: 1.2em;
    background: var(--subL);
    border-radius: 222px;
    position: relative;
    transform: translateY(3px);
    display: inline-block;
    margin: 0;
}
.dot::after{
    content: "";
    width: .75em;
    height: .75em;
    background: var(--sub);
    border-radius: 222px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.m_r{
    margin-right: 6px;
}
.m_l{
    margin-left: 6px;
}
/**----------------------------------**/

hr{
    display: block;
    width: 100%;
    margin: 16px 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-weight: 400;
}
h1,.h1{ font-size: 2.6rem;}
h2,.h2{ font-size: 2rem;}
h3,.h3{ font-size: 1.7rem;}
h4,.h4{ font-size: 1.5rem;}

a{
    color: var(--textL);
    text-decoration: underline;
}
a:hover{
    text-decoration: none;
}
a:visited{
    color: var(--text);
}

/*-----------------------------------------*/


.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;
    background-color: var(--bgA2);
    border: var(--border);
    border-radius: 222px; 
    backdrop-filter: blur(1px);
}
.toTop a:hover{
    transform: translateY(-3px);
    transition: transform .2s;
}


/*----------------------------------------*/


h2::before{
    content: "#";
    color: var(--subDX);
    display: inline-block;
    margin-right: .25em;
    letter-spacing: 0;
    font-size: 2.2rem;

    content: "tag"; 
  font-family: 'Material Symbols Rounded';
  
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
    vertical-align: bottom;
}

h2{
    font-size: 2.4rem;
    margin-bottom: .5em;

}

h3::before,
.h3::before{
    content: "tagtag"; 
    font-family: 'Material Symbols Rounded';
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
    vertical-align: bottom;

    letter-spacing: 0;
    font-size: 1.5rem;
    color: var(--subDX);
    display: inline-block;
    margin-right: .25em;
}
h3,.h3{
    font-size: 2rem;
    margin: 1em 0 .25em 0;
    /*
    border-bottom: 2px dotted var(--sub);
    width: fit-content;
    min-width: 70%;
    */

}
h4,.h4{
    border-bottom: 1px solid var(--sub);
    width: fit-content;
    min-width: 16%;
}


/*----------------------------------------*/
.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_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{
    margin: 16px 0;
}

.item_ul li{
    line-height: 1.8em;
}

.item_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{
    margin-left: 1em;
}

.item_ul li>ul>li::before{
    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_ol{
    display: block;
    margin:16px auto;
}
.item_ol>li{
    list-style: none;
    position: relative;
    padding-left: 32px;
}
.item_ol li::before{
    content: "01";
    display: inline-block;
    color: var(--subDX);
    font-size: 13px;
    font-weight: 500;
    line-height: 30px;
    width: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    top:-.1em;
    z-index: 2;
}
.item_ol li:nth-child(2)::before{content: "02";}
.item_ol li:nth-child(3)::before{content: "03";}
.item_ol li:nth-child(4)::before{content: "04";}
.item_ol li:nth-child(5)::before{content: "05";}
.item_ol li:nth-child(6)::before{content: "06";}
.item_ol li:nth-child(7)::before{content: "07";}
.item_ol li:nth-child(8)::before{content: "08";}
.item_ol li:nth-child(9)::before{content: "09";}
.item_ol li:nth-child(10)::before{content: "10";}
.item_ol li:nth-child(11)::before{content: "11";}
.item_ol li:nth-child(12)::before{content: "12";}
.item_ol li:nth-child(13)::before{content: "13";}
.item_ol li:nth-child(14)::before{content: "14";}
.item_ol li:nth-child(15)::before{content: "15";}
.item_ol li:nth-child(16)::before{content: "16";}
.item_ol li:nth-child(17)::before{content: "17";}
.item_ol li:nth-child(18)::before{content: "18";}
.item_ol li:nth-child(19)::before{content: "19";}
.item_ol li:nth-child(20)::before{content: "20";}
.item_ol li:nth-child(21)::before{content: "21";}
.item_ol li:nth-child(22)::before{content: "22";}


/*--------------------------------*/
img:not([class]):not([id]){
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    margin: 16px 0;
    object-fit: cover;
    border-radius: var(--br);
    border: var(--border);
    background-color: var(--pink);
}
/*----------------------------------------------------------*/
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::before{
    content: "open_in_new"; 
    font-family: 'Material Symbols Rounded';
    font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 20;
     vertical-align: bottom;
}
.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%;
    }
}


/*----------------------------------------------------------*/
.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;
}