@charset "UTF-8";

:root{
    --oswald-font: "Oswald", sans-serif;
    --emoji-font: "Noto Color Emoji", "Noto Emoji", sans-serif, "apple color emoji", "Oswald";
    --white: white;
    --mintcream: mintcream;
    --aliceblue: aliceblue;
    --cadetblue: cadetblue;
    --orange: orange;
    --royalblue: royalblue;
    --silver: #d9d9d9;
    --slategray: slategray;
    --snow: snow;
    --steelblue: steelblue;
    --grey: grey;
    --darkgrey: #404040;
    --black: black;
    --darkgoldenrod: darkgoldenrod;
    --skyblue: skyblue;
    --hokusaiblue: #192f60;
    --yellow: yellow;
}
/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v210/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752FD8Ghe4.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}/* vietnamese */@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752Fj8Ghe4.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752Fz8Ghe4.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
/* [0] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2) format('woff2');
    unicode-range: U+1f1e6-1f1ff;
}
/* [1] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2) format('woff2');
    unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
/* [2] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2) format('woff2');
    unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;}/* [3] */@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2) format('woff2');
    unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
/* [4] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2) format('woff2');
    unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
/* [5] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2) format('woff2');
    unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;}/* [6] */@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2) format('woff2');
    unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
    }
/* [7] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2) format('woff2');
    unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
/* [8] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2) format('woff2');
    unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;}/* [9] */@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2) format('woff2');
    unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* [10] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.10.woff2) format('woff2');
    unicode-range: U+200d, U+2194-2195, U+2640, U+2642, U+26d3, U+27a1, U+fe0f, U+1f344, U+1f34b, U+1f3c3, U+1f3fb-1f3ff, U+1f426, U+1f468-1f469, U+1f4a5, U+1f525, U+1f642, U+1f6b6, U+1f7e9, U+1f7eb, U+1f9af, U+1f9bc-1f9bd, U+1f9ce, U+1f9d1-1f9d2;
}
/* [11] */
@font-face {
    font-family: 'Noto Color Emoji';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notocoloremoji/v32/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.11.woff2) format('woff2');
    unicode-range: U+1fa89, U+1fa8f, U+1fabe, U+1fac6, U+1fadc, U+1fadf, U+1fae9;
}
body {
    --google-font-color-notocoloremoji:colrv1;
}
/******* 全体設定 ↓ ********/
html{
    scroll-behavior: smooth;
    scroll-padding: 58px;
    font-size: 100%;
}
@media (min-width: 768px){
    html{ scroll-padding: 78px;}
}
body{
    background: var(--snow);
    font-family: var(--emoji-font);
    font-weight: 600;
    font-style: normal;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
}
@media (min-width: 768px){
    body{
    background: linear-gradient(rgba(15, 151, 255, .5) 30%,rgba(0, 179, 255, .3) 70%, rgba(128, 217, 255, .3) 90%, rgba(0, 209, 52, .8) 100%);
    }
}
ul,
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--darkgrey);
    font-family: var(--oswald-font);
}
a:hover{
    text-decoration: underline;
    color: var(--royalblue);
}
p{
    letter-spacing: .15rem;
    line-height: 1.5;
    padding: 0 1rem;
    font-size: 1rem;
    color: var(--black);
    font-family: var(--oswald-font);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media (min-width: 768px){
    p{
        padding: 0 2.5rem;
    }
}
p.center{
    text-align: center;
}
.supplement{
    font-family: var(--oswald-font);
    font-size: .8rem;
    padding-top: .3rem;
    line-height: 0;
}
img{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.iframe img{
    width: 90%;
}
.topicimg{
    width: 300px;
    height: 300px;
}
/******* 全体設定 ↑ *******/

/******* 公開日・更新日 ↓ *******/
.data{
    padding-top: 65px;
    padding-left: 0;
    font-size: .8rem;
    font-family: var(--oswald-font);
}
@media (min-width: 768px){
    .data{ padding-top: 80px;}
}
p.data{
    line-height: 1;
}
/******* 公開日・更新日 ↑ *******/

/******* ロゴ設定 ↓ *******/
.logo_flex{
    display: flex;
    align-items: center;
    place-content: center;
}
.logo{
    width: 100px;
}
@media (min-width: 768px){
    .logo{
        width: 120px;
        height: 50px;
    }
}
.blog{
    padding-top: 30px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--darkgrey);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/******* ロゴ設定 ↑ *******/

/******* トップヘッド ↓ *******/
.pc-header {
    display: block;
    z-index: 10;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--snow);
    font-family: var(--oswald-font);
}
@media (min-width: 768px){
    .pc-header{
        height: 80px;
    }
}
.menu {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 5px;
    border: 1px solid var(--aliceblue);
    border-radius: 50%;
    background: var(--darkgrey);
    cursor: pointer;
    padding: 0;
}
.menu:hover{
    background: var(--black);
}
.menu_text {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--aliceblue);
}
.header_nav {
    display: flex;
    z-index: 10;
    position: absolute;
    top: 0;
    right: -100%;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: transparent;
    font-weight: 700;
    opacity: 0;
    transition: 0.6s;
}
@media (min-width:768px) {
  .header_nav {
    position: static;
    height: 100%;
    opacity: initial;
  }
}
.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: inherit;
}
.header_menu {
    z-index: 100;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
}
@media (min-width:768px) {
    .header_menu {
      display: none;
    }
}
.header_nav.active {
    position: fixed;
    top: 0;
    right: 0;
    background: var(--darkgrey);
    opacity: 1;
    transition: 0.6s;
}
.nav {
    padding-top: 100px;
}
@media (min-width:768px) {
    .nav {
      padding: 0;
    }
}
.nav_list {
    display: block;
    width: 100%;
}
@media (min-width:768px) {
    .nav_list {
      display: flex;
    }
}
.nav_item {
    position: relative;
    width: 100%;
}
.nav_link {
    display: block;
    width: 100%;
    padding: 20px;
    color: var(--snow);
}
@media (min-width: 768px){
    .nav_link{
      color: var(--royalblue);
      font-weight: 700;
      padding-top: 5px;
    }
    .nav_link:hover{
      text-shadow: var(--royalblue) 1.5px 0 10px;
    }
}
@media (max-width: 767px){
    .nav_link:hover{
      text-shadow: var(--snow) 1px 0 10px;
      color: var(--snow);
    }
}
/******* トップヘッド ↑ *******/

/******* Topに戻るボタン ↓ *******/
#top{
    position: relative;
    display: none;
    z-index: 100;
}
#topBtn{
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 50px;
    height: 50px;
    line-height: 55px;
    border-radius: 50%;
    text-align: center;
    background: var(--darkgrey);
    color: var(--aliceblue);
    padding-left: 0;
    font-size: 0.8rem;
}
    /******* 矢印設定 ↓ *******/
    #topBtn::before {
        content: "〈";
        display: inline-block;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    #topBtn::after {
        content: "〈";
        display: inline-block;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    /******* 矢印設定 ↑ *******/
#topBtn:hover{
    background: var(--black);
}
@media (min-width: 768px){
    #topBtn{
      display: none;
    }
}
.c{
    display: none;
}
/******* Topに戻るボタン ↑ *******/

/******* メインタイトル ↓ *******/
.title{
    font-size: 1.5rem;
    font-family: var(--oswald-font);
    padding-top: 10px;
    position: relative;
    padding: .7rem 1rem .2rem 1rem;

    background: linear-gradient(180deg, royalblue 45%, skyblue, royalblue);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/******* メインタイトル ↑ *******/

/******* サブタイトル ↓ *******/
h2{
    padding: .5rem 1rem;
    font-family: var(--oswald-font);
    font-size: 1rem;
}
/******* サブタイトル ↑ *******/

/******* 目次 ↓ *******/
.table{
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.table h3,
.table a{
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
}
@media (min-width: 768px){
    .table h3,
    .table a{
        padding: .5rem 4rem;
    }
}
/******* 目次 ↑ *******/

/******* セクション共通 ↓ *******/
@media (min-width: 768px){
    section{
        width: 60%;
        margin: auto;
        background: var(--snow);
    }
}
/******* セクション共通 ↑ *******/

/******* 最後に ↓ *******/
.lastly{
    padding-top: 2rem;
}
@media (min-width: 768px){
    .lastly{ text-align: center;}
}
/******* 最後に ↑ *******/

/******* コンタクト設定 ↓ *******/
.contact{
    padding-top: 1rem;
}
.portfolio a{
    color: var(--darkgrey);
}
.portfolio a:hover{
    color: var(--royalblue);
}
.mail{
    text-align: center;
    padding-bottom: 30px;
}
.mail_icon{
    fill: var(--darkgrey);
}
.mail a{
    display: flex;
    flex-direction: column;
    color: var(--darkgrey);
    line-height: .1;
    font-family: var(--oswald-font);
}
.mail_icon:hover{
    fill: var(--black);
}
/******* コンタクト設定 ↑ *******/

/******* 過去ブログ ↓ *******/
.kakoBL{
    line-height: 1.5;
}
.kakoBL a:hover{
    color: var(--royalblue);
}
@media (min-width: 768px){
    .kakoBL{
        padding: 2rem 2rem;
        width: 80%;
        margin: auto;
    }
}

/******* フッター設定 ↓ *******/
footer{
    width: 100%;
    height: 30px;
    text-align: center;
    padding: 10px 0;
    background: var(--silver);
}
footer a{
    color: var(--black);
}
footer span{
    display: inline-block;
    transform: rotate(-20deg);
    font-size: 1.2rem;
    color: darkgoldenrod;
}
/******* フッター設定 ↑ *******/

/******* ↓ sea-snake ↓ *******/
.sea{
    width: 100%;
}
@media (min-width: 768px){
    .sea{
        width: 60%;
        overflow: hidden;
    }
}
.sea-snake{
    animation: sea-snake 10s infinite running;
    -webkit-animation: sea-snake 10s infinite running;
    color: var(--hokusaiblue);
    padding-top: 2rem;
}
@keyframes sea-snake{
    from{ transform: translate(-30%);}
    50%{ transform: translate(32%, 0);}
    to{ transform: translate(100%);}
}
@-webkit-keyframes sea-snake{
    from{ -webkit-transform: translate(-30%);}
    50%{ -webkit-transform: translate(32%, 0);}
    to{ -webkit-transform: translate(100%);}
}
.sea-snake span{
    display: inline-block;
    font-size: .8rem;
    animation: nami .5s ease-in-out infinite alternate;
    -webkit-animation: nami .5s ease-in-out infinite alternate;
}
@keyframes nami{
    from{transform: translate(0);}
    to{transform: translate(5px);}
}
@-webkit-keyframes nami{
    from{-webkit-transform: translate(0);}
    to{-webkit-transform: translate(5px);}
}
.sea-snake span:nth-child(1){
    animation-delay: .65s;
    rotate: -90deg;
}
.sea-snake span:nth-child(2){
    animation-delay: .55s;
    rotate: -90deg;
}
.sea-snake span:nth-child(3){
    animation-delay: .45s;
    rotate: -90deg;
}
.sea-snake span:nth-child(4){
    animation-delay: .35s;
    rotate: -90deg;
}
.sea-snake span:nth-child(5){
    animation-delay: .25s;
    rotate: -90deg;
}
.sea-snake span:nth-child(6){
    animation-delay: .2s;
    color: var(--darkgoldenrod);
    rotate: -90deg;
}
.sea-snake span:nth-child(7){
    animation-delay: 0s;
    color: var(--darkgrey);
    rotate: -90deg;
}
@media (max-width: 767px){
    .sea-snake{
        text-align: center;
        letter-spacing: 0;
    }
    @keyframes sea-snake{
        from{ transform: translate(0%);}
        to{ transform: translate(0%);}
    }
      @-webkit-keyframes sea-snake{
        from{ transform: translate(0%);}
        to{ transform: translate(0%);}
    }
}

/******* ↓ 本文絵文字 ↓ *******/

/* 😅絵文字 ↓ */
.ase,
.ase_2{
    position: absolute;
}
.ase span,
.ase_2 span{
    animation: ase 1.5s infinite ease;
    -webkit-animation: ase 1.5s infinite ease;
}
.ase_2 span{
    animation-delay: .75s;
    -webkit-animation-delay: .75s;
}
@keyframes ase{
    from{ opacity: 0;}
}
@-webkit-keyframes ase{
    from{ opacity: 0;}
}
/* 😅絵文字 ↑ */

/******* pre-code ↓ *******/
.pre-code{
    margin: auto;
}
.code p{
    padding: 0;
}
@media (min-width: 768px){
    .pre-code{
        width: 60%;
    }
    .code{
        margin: auto;
    }
}
p code, li code {
    display: inline-block;
    padding: .1rem .25rem;
    color: var(--black);
    font-family: var(--oswald-font);
    background: var(--yellow);
    width: fit-content;
}
.control{
    place-content: center;
    display: flex;
}
.code-type{
    width: 89.3%;
    background: var(--darkgrey);
    padding: 2px 0 3px 3px;
    border-radius: 5px;
    z-index: 5;

    color: aliceblue;
    font-weight: 600;
    /* display: inline-block; */
    position: absolute;
    font-size: 1rem;
    font-family: "Oswald", sans-serif;
}
@media (min-width: 768px){
    .code-type{
        width: 53.7%;
    }
}
pre{
    position: relative;
    padding: 0;
    font-size: 1rem;
    width: 90%;
    margin: auto;
}
pre code{
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 5px;
    overscroll-behavior: auto;
    scrollbar-color: var(--darkgrey) var(--snow);
    max-height: 300px;
}
.copy-button{
    position: absolute;
    z-index: 7;
    right: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: .7rem;
    font-family: var(--oswald-font);
    background: var(--darkgrey);
    color: var(--aliceblue);
    cursor: pointer;
}
.copy-button:hover{
    text-shadow: var(--snow) 1px 0 10px;
    color: var(--snow);
    box-shadow: 1px 1px var(--snow);
}
/******* pre-code ↑ *******/

/******* 資料 ↓ *******/
.material p{
    font-family: var(--oswald-font);
}
@media (min-width: 768px){
    .material{
        margin: auto;
    }
    .material p{
        padding: 2rem 5rem;
    }
}
/******* 資料 ↑ *******/