html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}ins{background-color:#fff;color:#000;text-decoration:none}mark{background-color:#fff;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}img{vertical-align:middle;}

.nav-1_inner-wrap ul li:nth-of-type(1) {
    width: 100%;
 font-size: var(--font-L);
}
.nav-1_inner-wrap ul li:nth-of-type(1) a {
    float:left;
}

.orientation-warning {
    display: none;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2em;
    box-sizing: border-box;
    color: #fff;
    color: var(--siro);
    font-size: var(--font-M);
    text-align: left;
    text-shadow: none;
    background: rgba(0, 0, 0, 1.0);
    background-color: rgba(0,0,0,1.0);
}

html.loading body {
  visibility: hidden;
}
.page-static_page .entry-header{
    display: none;
}
.page-static_page article {
    overflow: visible; 
}
.page-static_page .entry-inner {
    width: var(--width) ;
    max-width: var(--max-width);
    margin: 180px auto -200px;
    height: auto !important;
}
.controls {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    margin-bottom: 20px;
    padding: 0 10px;
    font-size: var(--font-S);
    font-weight: var(--weight-r);
}

.controls p {
    display: flex;
    gap: 10px;
    flex-shrink: 1;
    flex-wrap: wrap;
    align-items: baseline;
    min-width: 0;
    margin-right: auto;
    font-size: var(--font-L);
    font-weight: var(--weight-b);
    white-space: normal;
}

.mesh-container p span {
    flex-shrink: 1;
    min-width: 0;
    font-size: var(--font-SS);
    font-weight: var(--weight-r);
    white-space: normal;
}

.controls label {
    display: flex;
    position: relative;
    align-items: center;
    align-self: flex-start;
    padding: 4px 0;
    cursor: pointer;
}

.controls label span {
    white-space: nowrap;
}

.controls input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.controls label span::after {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color);
    transition: width 0s ease;
    content: '';
}

.controls input[type="radio"]:checked + span::after {
    width: 100%;
    transition: width 0.3s ease;
}
.logo-container {
    display: block;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    text-align: center;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250614/20250614212152.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.poster {
    display: block;
    display: flex;
    position: relative;
    aspect-ratio: 3/2;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: auto;
    margin: 40px;
    padding: 30px;
    box-sizing: border-box;
    color: var(--color);
    text-align: left;
    text-shadow: none;
    background-color: var(--siro);
    box-shadow: none;
    transform: rotate(-3deg);
}

.poster2 {
    display: block;
    display: flex;
    position: relative;
    aspect-ratio: 2.4/3;
    writing-mode: vertical-rl;
    justify-content: center;
    align-items: center;
    width: 200px;
    margin: 40px;
    padding: 30px;
    box-sizing: border-box;
    color: var(--color);
    text-align: left;
    text-shadow: none;
    background-color: var(--siro);
    box-shadow: none;
    transform: rotate(-3deg);
    -ms-writing-mode: tb-rl;
}

.poster::before,.poster2::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: var(--siro);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.1);
    content: "";
}

.poster::after {
    position: absolute;
    bottom: 15px;
    left: 10px;
    z-index: -2;
    width: 50%;
    height: 20%;
    max-width: 300px;
    max-height: 100px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
    content: "";
}

.shadow-right2 {
    position: absolute;
    right: 10px;
    bottom: 15px;
    z-index: -2;
    width: 50%;
    height: 20%;
    max-width: 300px;
    max-height: 100px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(3deg);
}

.poster-text {
    position: relative;
    font-family: "Permanent Marker", cursive;
    font-size: var(--font-L);
    font-size: clamp(18px, 2vw, 20px);
    font-style: normal;
    font-weight: 400;
}

.poster-text2 {
    position: relative;
    font-family: "Kiwi Maru", serif;
    font-size: var(--font-L);
    font-weight: 500;
}

.poster-text99::before {
    position: absolute;
    top: -78px;
    left: 50%;
    z-index: 50;
    width: 80px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #d1b48c;
    background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 3px 3px;
    transform: translateX(-50%) rotate(2deg);
    content: '';
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
}

#lucky {
    padding: 14px 20px;
    border: none;
    font-size: var(--font-S);
    box-sizing: border-box;
    color: var(--color);
    font-weight: var(--weight-b);
    background-color: var(--siro);
    border-radius: 4px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
#lucky:hover {
    transform: scale(1.1);

}
#lucky:active {
    transform: scale(1.0);

}
.entry-content p:first-child:not(.page-static_page p) {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden; /* セクション内部でのスクロールを防ぐ */
}
.entry-content p:first-child img {
    width: 200%;
    height: 100%;
    object-fit: cover;
}

html {
    --siro: #fff;
    --color: #442d21;
    --bg-color: #fbf6ee;
    --ex-color: #d9d3c8;   
    --font-XL: 36px;
    --font-LL: 24px;
    --font-L: 20px; 
    --font-M: 16px;
    --font-S: 14px;
    --font-SS: 12px;
    --weight-b: 600;    
    --weight-m: 500;
    --weight-r: 400;
    --width: 90%;
    --max-width: 1200px;    
}

body {
    color: var(--color);
    font-family: "Noto Sans JP", sans-serif;
    font-size: var(--font-M);
    font-style: normal;
    font-weight: var(--weight-r);
    line-height: 1.6;
    font-optical-sizing: auto;
    background-color: var(--bg-color);
    opacity: 0;
    animation: fadeInPage 0.5s ease-out forwards;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
@keyframes fadeInPage {
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}

a {
    color: var(--color);
}
.typing-effect-container {
    color: var(--siro);
    font-size: var(--font-L);
}
.typing-effect-container p {
    font-weight: var(--weight-r);
}
.cursor {
    background-color: var(--siro);
    filter: drop-shadow(0 1.5px 1.5px #0009); 
}
.entry-header-menu {
    height: 0;
    visibility: hidden;
}
.hatena-fotolife {
    pointer-events: none;
}
.blog-controlls,.author,.vcard,.entry-footer-time,.entry-footer-subscribe,.archive-date,.hatena-module-custom-category,.pager-arrow,.entry-footer {
    display: none;
}

#blog-title {
    color: var(--siro);
    background-color: var(--color);
}

.page-index #blog-title,.page-entry #blog-title {
    color: var(--color);
    background-color: transparent;
}
.notfound #blog-title {
    color: var(--siro);
    background-color: var(--color);
}
body.page-index:has(.no-entry) #blog-title {
    color: var(--siro);
    background-color: var(--color);
}
.nav-1,
.nav-1 *, /* .nav-1 の全ての子孫 */
.nav-2,
.nav-2 *, /* .nav-2 の全ての子孫 */
.nav-3,
.nav-3 *, /* .nav-2 の全ての子孫 */
.nav-4,
.nav-4 *, /* .nav-4 の全ての子孫 */
.nav-5,
.nav-5 * /* .nav-5 の全ての子孫 */ {
    color:var(--color) !important;
    text-shadow: none !important;
}
/* bodyに .page-index クラスがある場合 */
body.page-index .nav-1_Button,
body.page-index .nav-2_Button,
body.page-index .nav-3_Button,
body.page-index .nav-4_Button,
body.page-index .nav-5_Button,
body.page-index .pager-next a,
body.page-index .pager-prev a {
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) drop-shadow(-1px -1px 1px rgba(255,255,255,0.4));
}
/* bodyに .page-entry クラスがある場合 */
body.page-entry .nav-1_Button,
body.page-entry .nav-2_Button,
body.page-entry .nav-3_Button,
body.page-entry .nav-4_Button,
body.page-entry .nav-5_Button,
body.page-entry .pager-next a,
body.page-entry .pager-prev a {
filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6)) drop-shadow(-1px -1px 1px rgba(255,255,255,0.4));
}
body.page-index:has(.no-entry) .nav-1_Button,
body.page-index:has(.no-entry) .nav-2_Button,
body.page-index:has(.no-entry) .nav-3_Button,
body.page-index:has(.no-entry) .nav-4_Button,
body.page-index:has(.no-entry) .nav-5_Button,
body.page-index:has(.no-entry) .pager-next a,
body.page-index:has(.no-entry) .pager-prev a,
body.page-entry:has(.no-entry) .nav-1_Button,
body.page-entry:has(.no-entry) .nav-2_Button,
body.page-entry:has(.no-entry) .nav-3_Button,
body.page-entry:has(.no-entry) .nav-4_Button,
body.page-entry:has(.no-entry) .nav-5_Button,
body.page-entry:has(.no-entry) .pager-next a,
body.page-entry:has(.no-entry) .pager-prev a {
  filter: none;
}

body.page-index #title a::before,
body.page-index #title a::after,
body.page-entry #title a::before,
body.page-entry #title a::after {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6))
          drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.4));
}
body.page-index:has(.no-entry) #title a::before,
body.page-index:has(.no-entry) #title a::after,
body.page-entry:has(.no-entry) #title a::before,
body.page-entry:has(.no-entry) #title a::after {
  filter: none;
}
.page-index,
.page-entry {
    color:var(--siro);
    text-shadow: 0 1.5px 1.5px #0009;
}
.page-index a,
.page-entry a {
    color:var(--siro);
}
body.page-index:has(.no-entry),.notfound {
    color:var(--color);
    text-shadow: none;
}
body.page-index:has(.no-entry) a,.notfound a {
    color:var(--color);
}
.breadcrumb-gt{
    color:var(--color);
}
.page-index .breadcrumb-gt,
.page-entry .breadcrumb-gt {
    color:var(--siro);
    opacity: 1;
}
#blog-title {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
#blog-title-inner {
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 25px 0;
    transition: 0.3s;
    pointer-events: none;
   
}
#blog-title-content {
    width: 40px;
    height: 40px;
}

#page-number-display {
    position: fixed;
    top: 118px;
    left: 50%;
    z-index: 50;
    width: var(--width);
    max-width: var(--max-width);
    padding: 0 3px;
    box-sizing: border-box;
    transform: translate(-50%, 0%) scale(1.0, 1.0);

}
#top-box,.archive-heading,.setWord {
    position: absolute;
    top: 116px;
    left: 50%;
    z-index: 50;
    width: var(--width);
    max-width: var(--max-width);
    font-weight: var(--weight-r);
    transform: translate(-50%, 0%) scale(1.0, 1.0);

}
.breadcrumb-link span,.breadcrumb-gt,.breadcrumb-child span {
    vertical-align: middle;
}
.breadcrumb-child:nth-of-type(4) span {
    display: inline-block;
    max-width: 170px;
    padding: 2px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#bottom-editarea {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    width: 100%;
    pointer-events: none;

}
#top-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: var(--width);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 25px 0;
    transition: 0.3s;
    pointer-events: none;
}

article{
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;

}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ マストヘッド ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

:root {
  --prism-length: 100px;
  --prism-radius: 90px;
  --face-width: calc(2 * var(--prism-radius) * sin(22.5deg)); /* 八角形の一辺の長さ */
  --face-translateZ: calc(var(--prism-radius) * cos(22.5deg) + 4px); 
  /* 中心から側面までの距離（微調整用） */
  --rotation-duration: 12s; /* 回転の時間 */
}
#masthead {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;

}

#rolling-octagonal-prism-prompt {
    position: absolute;
    bottom: 30px;
    left: 50%;
z-index: 10;
    width: var(--prism-length); /* 八角柱の長さ */;
    height: calc(var(--prism-radius) * 2); /* 八角形の直径 */;
    transform: translateX(-50%) perspective(800px) scale(0.25, 0.25);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    pointer-events: none;
}
.octagonal-prism-body {
    position: absolute;
z-index: 20;
    width: 100%;
    height: 100%;
    animation: rollOctagonalPrism var(--rotation-duration) linear infinite reverse;
    transform-origin: center center;
    transform-style: preserve-3d;
}
.octagonal-face {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--prism-length);
    height: var(--face-width);
    border: 4px solid var(--ex-color);
    box-sizing: border-box;
    background: var(--siro);
    transform: translate(-50%, -50%);
    backface-visibility: hidden; /* 裏面を非表示にして、重なりを軽減 */;
}

/* 各面の配置と回転、8角形なので360/8=45度ずつ回転 */
.face-1 {
  transform: translate(-50%, -50%) rotateX(0deg) translateZ(var(--face-translateZ));
}
.face-2 {
  transform: translate(-50%, -50%) rotateX(45deg) translateZ(var(--face-translateZ));
}
.face-3 {
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(var(--face-translateZ));
}
.face-4 {
  transform: translate(-50%, -50%) rotateX(135deg) translateZ(var(--face-translateZ));
}
.face-5 {
  transform: translate(-50%, -50%) rotateX(180deg) translateZ(var(--face-translateZ));
}
.face-6 {
  transform: translate(-50%, -50%) rotateX(225deg) translateZ(var(--face-translateZ));
}
.face-7 {
  transform: translate(-50%, -50%) rotateX(270deg) translateZ(var(--face-translateZ));
}
.face-8 {
  transform: translate(-50%, -50%) rotateX(315deg) translateZ(var(--face-translateZ));
}
@keyframes rollOctagonalPrism {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-360deg);
  }
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 記事詳細 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


.entry-inner {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    
}

.entry-header {
    display: flex;
    position: absolute;
    bottom: calc(15px + env(safe-area-inset-bottom)/2);
    left: 50%;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    width: var(--width);
    max-width: var(--max-width);
    padding: 0 3px;
    box-sizing: border-box;
    transition: 0.3s;
    transform: translate(-50%, 0%) scale(1.0, 1.0);
}

.date {
    order: 3;
    margin-left: 1px;
    font-family: "Libre Barcode 128 Text", systpx-ui;
    font-size: var(--font-XL);
    font-style: normal;
    font-weight: var(--weight-r);
    cursor:text;
  display:none;
}
.date a {
    pointer-events: none;

}
.entry-title {
    font-size: var(--font-LL);
    font-weight: var(--weight-r);
   margin-bottom: 5px    
}
.entry-title a {
    max-width: 280px;
    padding-bottom: 2px;
    overflow: hidden;
    font-weight: var(--weight-r);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.entry-categories {
    display: flex;
    margin-bottom: 10px;
    margin-left: 1px;
}
.entry-categories a::first-letter {
    text-transform: uppercase;
}
.entry-categories p:nth-of-type(1)::before {
    display: none;
}
.entry-categories p::before {
    display: inline-block;
    margin: 0 10px;
    white-space: pre;
    transform: translate(0%, -2%) rotate(0deg) scale(0.8, 0.8);
    content: '|';
    font-weight: 900;
}

.breadcrumb-gt{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ページ上部ナビ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


#title {
  width: 40px;
  height: 40px;
  pointer-events: auto;
  position: relative;

}
#title a {
  display: block;
  width: 40px;
  height: 40px;

  position: relative;

  font-size: 0; 
  line-height: 0;
}

#title a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--siro);
  border-radius: 4px;
  box-sizing: border-box;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250612/20250612104231.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 0.5px) calc(50% + 0px);
  background-size: 110%;
  
  opacity: 1;
  z-index: 2;
  animation: imageCrossfade1 12s infinite;
}

#title a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--siro);
  border-radius: 4px;
  box-sizing: border-box;
  background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250617/20250617225846.png");
  background-repeat: no-repeat;
  background-position: calc(50% + 0px) calc(50% + 0px);
  background-size: 90%;
  
  opacity: 0;
  z-index: 1;
  animation: imageCrossfade2 12s infinite;
}


@keyframes imageCrossfade1 {
  0% { opacity: 1; z-index: 2; }
  40% { opacity: 1; z-index: 2; }
  
  50% { opacity: 0; z-index: 1; }
  
  90% { opacity: 0; z-index: 1; }
  
  100% { opacity: 1; z-index: 2; }
}

@keyframes imageCrossfade2 {
  0% { opacity: 0; z-index: 1; }
  40% { opacity: 0; z-index: 1; }
  
  50% { opacity: 1; z-index: 2; }
  
  90% { opacity: 1; z-index: 2; }
  
  100% { opacity: 0; z-index: 1; }
}

.nav-1_Button {
    display: block;
    width: 40px;
    height: 40px;
    margin-right:5px;
    cursor: pointer;
    pointer-events: auto;
}

.nav-2_Button {
    display: block;
    width: 40px;
    height: 40px;
    margin-right:5px;
    cursor: pointer;
    pointer-events: auto;
}
.nav-3_Button {
    display: block;
    width: 40px;
    height: 40px;
    margin-right:5px;
    cursor: pointer;
    pointer-events: auto;
}
.nav-4_Button {
    display: block;
    width: 40px;
    height: 40px;
    margin-right:5px;
    cursor: pointer;
    pointer-events: auto;
}
.nav-5_Button {
    display: block;
    width: 40px;
    height: 40px;

    cursor: pointer;
    pointer-events: auto;
}
.close_button {
    display: block;
    position: absolute;
    top: 78px;
    right: calc(10% + 20px);
    z-index: 5000;
    width: 40px;
    height: 40px;
    cursor: pointer;
    pointer-events: auto;
}
.nav-1_Button span,.nav-2_Button span,.nav-3_Button span,.nav-4_Button span,.nav-5_Button span,.close_button span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap; /* テキストが折り返されないようにする */;
    clip: rect(0, 0, 0, 0); /* IE8+ */;
    clip-path: inset(50%); /* モダンブラウザ */;
}


.nav-1_Button::before {
    display: block;
    width: 40px;
    height: 40px;

    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250612/20250612200910.png");
    background-repeat: no-repeat;
    background-position: center calc(50% + 0px);
    background-size: cover;
    background-size:90%;
    content: "";
    border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;

}
.nav-2_Button::before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250610/20250610145651.png");
    background-repeat: no-repeat;
    background-position: center calc(50% - 0px);
    background-size: 73%;
    content: "";
    border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
}
.nav-3_Button::before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250612/20250612200914.png");
    background-repeat: no-repeat;
    background-position: center calc(50% + 0px);
    background-size: 58%;
    content: "";
    border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
}
.nav-4_Button::before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250612/20250612201352.png");
    background-repeat: no-repeat;
    background-position: center calc(50% + 0px);
    background-size: 100%;
    content: "";
    border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
}
.nav-5_Button:before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250610/20250610145656.png");
    background-repeat: no-repeat;
    background-position: center calc(50% + 0px);
    background-size: 80%;
    content: "";
    border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
}
.close_button:before {
    display: block;
    width: 40px;
    height: 40px;;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163446.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    content: "";
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ハンバーガーメニュー 1 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#nav-1_check {
    display: none;
}
.nav-1_inner {
    position: fixed;
    top: calc(-100vh - 55px);
    left: 0;
    z-index: 3000;
    width: 100%;
    width: calc(100% + 35px);
    height: calc(100vh + 55px);
    padding-right: 35px;
    box-sizing: border-box;
    overflow: auto;

    background-color: var(--bg-color);
    transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
    pointer-events: auto;
    
}
.nav-1_inner-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--width);
    max-width: var(--max-width);
    margin: 55px auto 0;
    padding: 80px 0  calc(80px + env(safe-area-inset-bottom));
    box-sizing: border-box;

}
.nav-1_inner-wrap ul:before {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: var(--font-L);
    content: "Category";
}
.nav-1_inner-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
  
}
.nav-1_inner-wrap ul li {
    margin: 10px 20px;

}
.nav-1_inner-wrap ul li a::first-letter {
    text-transform: uppercase;
}
#nav-1_check:checked ~ .nav-1_inner {
    top: -55px;
}




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ハンバーガーメニュー 2 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#nav-2_check {
    display: none;
}
.nav-2_inner {
    position: fixed;
    top: calc(-100vh - 55px);
    left: 0;
    z-index: 3000;
    width: 100%;
    width: calc(100% + 35px);
    height: calc(100vh + 55px);
    padding-right: 35px;
    box-sizing: border-box;
    overflow: auto;

    background-color: var(--bg-color);
    transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
    pointer-events: auto;
}
.nav-2_inner-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--width);
    max-width: var(--max-width);
    margin: 55px auto 0;
    padding: 80px 0  calc(80px + env(safe-area-inset-bottom));
   
    box-sizing: border-box;
}
.nav-2_inner-wrap ul:before {
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: var(--font-L);
    content: "Best 10 Images";
}
.nav-2_inner-wrap ul {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
     margin-left:-2px;
}
.nav-2_inner-wrap ul li {
    margin: 10px 20px;
}
.nav-2_inner-wrap ul li a {
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
      padding-left:2px;
}
#nav-2_check:checked ~ .nav-2_inner {
    top: -55px;
}
.hatena-module-custom-ranking {
    display: none;
}

.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(1) a:before {
    display: inline-block;
    margin-right: 13px;
    font-family: "Material Symbols Outlined";
    transform: translate(0%, 11%) rotate(0deg) scale(1.5, 1.5);
    content: "\ecb3";
  
}
.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(2) a:before {
    display: inline-block;
    margin-right: 13px;
    font-family: "Material Symbols Outlined";
    transform: translate(0%, 10%) rotate(0deg) scale(1.25, 1.25);
    content: "\f783";
}
.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(3) a:before {
    display: inline-block;
    margin-right: 13px;
    font-family: "Material Symbols Outlined";
    transform: translate(0%, 10%) rotate(0deg) scale(1.25, 1.25);
    content: "\f782";
}
.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(4) a:before {
    display: inline-block;
    margin-right: 13px;
    font-family: "Material Symbols Outlined";
    transform: translate(0%, 11%) rotate(0deg) scale(1.1, 1.1);
    content: "\e8e5";
}
.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(5) a:before {
    display: inline-block;
    margin-right: 13px;
    font-family: "Material Symbols Outlined";
    transform: translate(0%, 11%) rotate(0deg) scale(1.1, 1.1);
    content: "\e8e5";
}
.hatena-module-custom-ranking .hatena-urllist li:nth-of-type(n + 6) a::before {
    display: inline-block;
    margin-right: 13px;
    content: "・";
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ハンバーガーメニュー 3 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#nav-3_check {
    display: none;
}
.nav-3_inner {
    position: fixed;
    top: calc(-100vh - 55px);
    left: 0;
    z-index: 3000;
    width: 100%;
    width: calc(100% + 35px);
    height: calc(100vh + 55px);
    padding-right: 35px;
    box-sizing: border-box;
    overflow: auto;
    overflow: auto;
    background-color: var(--bg-color);
    transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
    pointer-events: auto;
}
.nav-3_inner-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--width);
    max-width: var(--max-width);
    margin: 55px auto 0;
    padding: 80px 0  calc(80px + env(safe-area-inset-bottom));
    box-sizing: border-box;

}

#nav-3_check:checked ~ .nav-3_inner {
    top: -55px;
}

.mesh-container {
    display: flex;
    position: relative;

      flex-direction: column;
    
    width: 100%;
    max-width: 500px;
    padding-bottom: calc(30px + env(safe-area-inset-bottom));
    color: var(--color);
    background-color: var(--bg-color);
}

.gradient-preview {
    width: 100%;
    aspect-ratio: 16/9;
    margin-bottom: 20px;
    border-radius: 10px;
    resize: both;
    overflow: auto;
    position: relative; 
}
#cssOutput {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
    padding: 20px 30px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: var(--font-S);
    line-height: 2;
    background-color: var(--bg-color);
    box-shadow: inset 6px 6px 12px rgba(220, 215, 209, 0.7), inset -6px -6px 12px rgba(255, 255, 255, 0.7);
    resize: vertical;
}
#cssOutput:focus {
    outline: none;
}
.button-group {
    width: 100%;
  display: flex;
  text-align: center;
  
  gap:20px;
}

#copyBtn2 {
  flex-grow: 1;
}
.m-btn {
  flex-grow: 1;
    padding: 20px 30px;
    border: none;
    border-radius: 10px;
    font-size: var(--font-M);
    font-weight: var(--weight-m);
    background-color: var(--bg-color);
    box-shadow: 8px 8px 16px rgba(220, 215, 209, 0.7), -8px -8px 16px rgba(255, 255, 255, 0.8);

       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    cursor: pointer;
}
.m-btn:active {
    box-shadow: inset 6px 6px 12px rgba(220, 215, 209, 0.7), inset -6px -6px 12px rgba(255, 255, 255, 0.8);

}
#downloadBtn{
    width: 100%;
 
  }
textarea::-webkit-scrollbar {
    width: 12px;
}
textareay::-webkit-scrollbar-track {
    border-radius: 15px;
    background: #d9d3c8;;
}
textarea::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background: var(--color);
}
@supports not selector(::-webkit-scrollbar) {
    textarea {
    scrollbar-color: var(--color);
    }

}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ハンバーガーメニュー 4 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#nav-4_check {
    display: none;
}
.nav-4_inner {

    position: fixed;
    top: calc(-100vh - 55px);
    left: 0;
    z-index: 3000;
    width: 100%;
    width: calc(100% + 35px);
    height: calc(100vh + 55px);
    padding-right: 35px;
    box-sizing: border-box;
    overflow: auto;

    background-color: var(--bg-color);
    transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
    pointer-events: auto;
}


.nav-4_inner-wrap {
line-height: 2.0;
    flex-direction: column;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--width);
    max-width: 530px;
    margin: 55px auto 0;
    padding: 120px 0  calc(80px + env(safe-area-inset-bottom));
   
    box-sizing: border-box;
}
#nav-4_check:checked ~ .nav-4_inner {
    top: -55px;
}


.nav-4_inner p:nth-of-type(1) {
    margin: 0 30px 20px;
    font-size: var(--font-S);
}


.nav-4_inner p:nth-of-type(2) {
    margin: 0 30px 20px;
    font-size: var(--font-S);
}
.nav-4_inner p:nth-of-type(3) {
    margin: 0 30px 25px;
    font-size: var(--font-S);
}
.nav-4_inner p:nth-of-type(4) {
    margin: 0 30px 25px;
    font-size: var(--font-S);
}

.nav-4_inner p:nth-of-type(5) {
    margin: 0 30px 30px;
   font-size: var(--font-S);
}
.nav-4_inner p:nth-of-type(6) {
    margin: 0 30px 50px;
   font-size: var(--font-S);
}
.nav-4_inner p:nth-of-type(7) {
    margin: 0 30px 45px;
   font-size: var(--font-S);
}
.nav-4_inner p:nth-of-type(8) {
    margin: 0 30px 45px;
 
}

.nav-4_inner p:nth-of-type(1) a {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: rgba(68, 45, 33, 0.2);
    text-decoration-thickness: 0.5em; /* 線の太さ */;
    text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */;
    text-decoration-skip-ink: none;
        margin: 0 5px;
    /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}
.nav-4_inner p:nth-of-type(4) a {
    display: inline-block;
    text-decoration: underline;
    text-decoration-color: rgba(255, 0, 0, 0.5);
    text-decoration-thickness: 0.5em; /* 線の太さ */;
    text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */;
    text-decoration-skip-ink: none;
        margin: 0 5px;
    /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ハンバーガーメニュー 5 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


#nav-5_check {
    display: none;
}
.nav-5_inner {
    display: flex;
    position: fixed;
    top: -100vh;

    left: 0;
    z-index: 3000;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;    
    box-sizing: border-box;
    overflow: auto;
    transition: all 1s cubic-bezier(.87,-.41,.19,1.44);
    pointer-events: none;
}
.nav-5_inner-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: var(--width);
    max-width: var(--max-width);
    pointer-events: auto;
       flex-direction: column;
    gap: 20px;
}
#nav-5_check:checked ~ .nav-5_inner {
    top: 0px;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 検索関係 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



.search-container {
    display: flex;
    z-index: 10;
    flex-shrink: 1;
    align-items: center;
    width: 80%;
    min-width: 200px;
    max-width: 400px;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color:var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow:1px 1px 1px rgba(0,0,0,0.6);
}
/* 検索アイコンのスタイル */
.search-icon {
    flex-shrink: 0; /* アイコンは縮まないように固定 */;
    margin: 0 10px 0 10px;
    color: var(--color);
        width: 20px;
    height: 20px;
}
/* フォームのスタイル */
.search-box {
    display: flex;
    flex-grow: 1;
    align-items: center;
    width: auto !important;
    min-width: 100px !important;
    background-color: transparent;
}
/* 検索入力フィールドのスタイル */
.search-box-input {
    flex-grow: 1; /* 残りのスペースを全て埋めるように設定 */;
    width: auto;
    min-width: 50px !important;
    padding: 5px 0;
    border: none;
    color: var(--color);
    font-size: var(--font-M);
    background-color: transparent;
    outline: none;
    caret-color: var(--color);
}
/* placeholderのスタイル */
.search-box-input::placeholder {
    color: var(--color);
    font-size: var(--font-S);
    opacity: 0.5;
    opacity: 0;
}
/* inputにフォーカスしたときにplaceholderを消す */
.search-box-input:focus::placeholder {
    color: transparent;
}
/* 検索ボックスのテキスト選択時のみスタイルを適用 */
.search-box-input::selection {
    color: var(--siro);
    background: var(--ex-color);
}
/* Firefox 用の ::selection (ベンダープレフィックス) */
.search-box-input::-moz-selection {
    color: var(--siro);
    background: var(--ex-color);
}
/* 検索ボタンのスタイル */
.search-box-button {
    display: flex;
    flex-shrink: 0; /* ボタンは縮まないように固定 */;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    margin-left: 5px;
    padding: 5px 0;
    border: none;
    border-radius: 15px;
    color: var(--color);
    font-size: var(--font-M);
    background: none;
    transition: background-color 0.2s ease;
    cursor: pointer;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
.search-box-button:hover {

  transform: scale(1.2);
}
.search-box-button:active {

  transform: scale(1.0);
}

/* チェックマークアイコンのスタイル */
.send-icon {
    width: 20px;
    height: 20px;
    color: var(--color);
    vertical-align: middle;
}

.search-result-form {
    display: none;
}
.setWord {
    padding:0;
}
.setWord:before {
    content: 'Results for "';
}
.setWord:after {
    content: '"';
}
.highlight {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--color) !important;
    font-weight: var(--weight-r) !important;
    background-color: transparent !important;
}
.search-result + p {
    position: absolute;
    top: calc(96px + 80px);
    left: 50%;
    width: var(--width);
    max-width: var(--max-width);
    transform: translate(-50%, 0%) scale(1.0, 1.0);
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 記事、一覧表示 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.archive-entries section {
    width: 100%;
    height: 100vh;
}

.archive-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1260px;
    margin: 180px auto 0;
    padding: 0 30px 80px;
        align-items: flex-start;
}
.archive-entry,.archive-entry--placeholder {
    display: flex !important;
    flex-direction: column;
    width: 280px !important;
    height: auto !important;
    padding: 0 20px 40px;
    box-sizing: border-box;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;

 
    align-items: flex-start;
}
.entry-thumb-link {
    display: block;
    order: -1;
    width: 100%;
    margin-bottom: 18px;
    box-sizing: border-box;
    overflow: hidden;
}
.entry-thumb {
    aspect-ratio: 3/2;
    width: 100% !important;
    height: auto !important;
}
.archive-entries .entry-title {
    margin: 0 0 5px;
    font-size: var(--font-M);
}
.archive-entries .categories {
    margin: 0 10px 0 -9px;
    font-size: var(--font-S);
}
.archive-entries .categories a::first-letter {
    text-transform: uppercase;
}
.archive-entries .categories a {
    margin-left: 10px;
}
@media screen and (max-width: 620px) {
    .archive-entry,.archive-entry--placeholder {
    width: 100% !important;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    }

}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ページャー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


.pager {
    display: flex;
    position: fixed;
    bottom: calc(30px - env(safe-area-inset-bottom) / 2);
    left: 50%;
    z-index: 200;
    justify-content: flex-end;
    width: var(--width);
    max-width: var(--max-width);
    padding: 0 !important;
    transition: 0.3s;
    transform: translate(-50%, 0%) scale(1.0, 1.0);
    pointer-events: none;
}
.pager-prev {
    width: 40px;
    height: 40px;
}
.pager-next {
    width: 40px;
    height: 40px;
    margin-left: 20px;
}
.pager-next a,.pager-prev a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    text-indent: 101%;
    white-space: nowrap;
        pointer-events: auto;
}
.pager-next a:before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20251002/20251002165121.png");
    background-repeat: no-repeat;
    background-position: 50% center;
    background-size: 100%;
    content: "";

}
.pager-prev a:before {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20251002/20251002165125.png");
    background-repeat: no-repeat;
    background-position: 50% center;
    background-size: 100%;
    content: "";
}

/* bodyに .page-index クラスがある場合 */
body.page-index .pager-next a:before {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163454.png");
}
body.page-index .pager-prev a:before {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163458.png");
}
/* bodyに .page-entry クラスがある場合 */
body.page-entry .pager-next a:before {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163454.png");
}
body.page-entry .pager-prev a:before {
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163458.png");
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ページ右ナビ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



#section-indicator {
    display: none;
    position: fixed;
    top: 50px;
    left: 50%;
    z-index: 20;
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    font-size: 1.2em;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translateX(-50%);
}
#dot-navigation {
    display: flex;
    position: fixed;
    top: 50%;
    right: 5%;
    z-index: 50;
    gap: 5px;
    flex-direction: column;
    transform: translateY(-50%);
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* 初期は円形 */;
    background-color: var(--siro);
    box-shadow: 0 1.5px 1.5px #0009;
    transition: background-color 0.3s, transform 0.2s, width 0.3s, height 0.3s, border-radius 0.3s;
    will-change: transform;
    cursor: pointer;
    /* transitionプロパティを更新 */
}
.dot.active {
    width: 10px;   /* アクティブ時の幅 */;
    height: 35px;  /* アクティブ時の高さ（縦長） */;
    border-radius: 20px; /* 縦長に合わせた角丸 */;
    background-color: var(--siro);
    transform: scale(1.0); /* 基本サイズを維持 */;
}

.notfound #dot-navigation,.page-entry #dot-navigation {
display:none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ホバー系 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

a,.nav-1_Button,.nav-2_Button,.nav-3_Button,.nav-4_Button,.nav-5_Button,.close_button,.entry-categories a span,.breadcrumb-link,.breadcrumb-child-link,#showImagePopupLink,#popup-close-button {
will-change: transform;
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);

}

a:hover,a:focus,.nav-1_Button:hover,.nav-1_Button:focus,.nav-2_Button:hover,.nav-2_Button:focus,.nav-3_Button:hover,.nav-3_Button:focus,.nav-4_Button:hover,.nav-4_Button:focus,.nav-5_Button:hover,.nav-5_Button:focus,.close_button:hover,.close_button:focus,.entry-categories a span:hover,.entry-categories a span:focus,.breadcrumb-link:hover,.breadcrumb-link:focus,.breadcrumb-child-link:hover,.breadcrumb-child-link:focus,#showImagePopupLink:hover,#showImagePopupLink:focus,#popup-close-button:hover,#popup-close-button:focus {
   transform: scale(1.1);


/*   animation: purunWobbly 0.4s cubic-bezier(.87,-.41,.19,1.44);
    animation-iteration-count: 1;
    will-change: transform; */
}
a:active,.nav-1_Button:active,.nav-2_Button:active,.nav-3_Button:active,.nav-4_Button:active,.nav-5_Button:active,.close_button:active,.entry-categories a span:active,.breadcrumb-link:active,.breadcrumb-child-link:active,#showImagePopupLink:active,#popup-close-button:active {

  transform: scale(1.0);

}
.entry-title a,.nav-1_inner-wrap ul li a,#showImagePopupLink {
    display:block;
}
.entry-categories a,.breadcrumb-link,.breadcrumb-child-link,.hatena-module-custom-ranking .hatena-urllist li a,#page-number-display a,.categories a{
    display:inline-block;
}

.bounce-top {
    animation: bounce-top .9s linear both;
}


@keyframes bounce-top {
    0% {
    transform: translateY(-12px);animation-timing-function:ease-in;opacity:1;
    }

    24% {
    opacity: 1;
    }

    40% {
    transform: translateY(-8px);animation-timing-function:ease-in;
    }

    65% {
    transform: translateY(-4px);animation-timing-function:ease-in;
    }

    82% {
    transform: translateY(-2px);animation-timing-function:ease-in;
    }

    93% {
    transform: translateY(-1px);animation-timing-function:ease-in;
    }

    25%,55%,75%,87% {
    transform: translateY(0);animation-timing-function:ease-out;
    }

    100% {
    transform: translateY(0);animation-timing-function:ease-out;opacity:1;
    }

}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 404 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



.no-entry .entry-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-entry .entry-content {
    aspect-ratio: 1.46/1;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250613/20250613180511.png");
    background-repeat: no-repeat;
    background-position: center calc(50% + 40px);
    background-size: auto 70%;
}
.notfound #top-box {
display:none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Light Box ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



.popupLink {
    position: absolute;
    top: 50%;
    left: 50%;
    filter: drop-shadow(0 1.5px 1.5px #0009);
    transform: translate(-50%, -50%);
}
.popupLink a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250630/20250630153541.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px); /* 背景をぼかす */
    -webkit-backdrop-filter: blur(5px); /* Safari対応 */
}
/* 画像ポップアップ本体 */
/* 画像ポップアップ本体 */
#image-popup {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 7777;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    transform: translate(-50%, -50%) scale(0.8); /* 初期スケールを小さく */
    opacity: 0; /* 初期透明度を0に */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/* ポップアップ表示時のアニメーション */
#image-popup.is-active {
    transform: translate(-50%, -50%) scale(1); /* 通常サイズに拡大 */
    opacity: 1; /* 不透明に */
}

/* ポップアップ閉じる時のアニメーション（is-closingクラスはJavaScriptで追加） */
#image-popup.is-closing {
    transform: translate(-50%, -50%) scale(0.8); /* 縮小 */
    opacity: 0; /* 透明に */
    /* 閉じる時も同じtransitionを使いますが、durationは調整できます */
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
/* ポップアップ内の画像コンテナ */
#image-popup-content {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    height: 100%;
}
/* ポップアップ内の画像（ズーム可能な画像） */
#image-popup-content img.zoomable-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 1280px;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-out;
    transform-origin: 50% 50%;
    user-select: none;
    -webkit-user-drag: none;
}
#popup-zoom-toggle-button {
    display: none;
}
#popup-close-button {
    position: absolute;
    top: 20px;
    right: 5%;
    z-index: 1001;
    width: 40px;
    height: 40px;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250608/20250608163450.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    transition: background-color 0.2s;
    cursor: pointer;
       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}
#image-popup-content #popup-zoom-toggle-button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
color: var(--siro);
    font-size: var(--font-SS);
background-color: var(--color);

    cursor: pointer;
       transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
           font-weight: var(--weight-b);
               border:2px solid var(--siro);
    box-sizing: border-box;
    border-radius: 4px;
   
}
#image-popup-content #popup-zoom-toggle-button:hover {
   transform: scale(1.1);
   }
#image-popup-content #popup-zoom-toggle-button:active {
   transform: scale(1.0);
   }
/* ポップアップ表示時にbodyに適用するクラス */
body.no-scroll {
    position: fixed !important;
    width: 100%;
    overflow: hidden !important;
}

.notfound .popupLink {
display:none;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ Scrollbar ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



body::-webkit-scrollbar {
    width: 24px;
}
body::-webkit-scrollbar-track {
    background:  #d9d3c8;;
    border-radius: 15px;
}
body::-webkit-scrollbar-thumb {
    background: var(--color);
    border-radius: 15px;
    border: 4px solid var(--ex-color);
}
@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color:var(--color);
    }
    
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ローダー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

        
#loader-wrapper {
    display: flex; /* Flexboxでコンテンツを中央寄せ */;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    justify-content: center; /* 水平方向の中央寄せ */;
    align-items: center; /* 垂直方向の中央寄せ */;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.loader {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}
.loader span {
    width: 4px;
    height: 50px;
    background: var(--color);
    animation: scale 0.9s ease-in-out infinite;
    will-change: transform;
}
.loader span:nth-child(2) {
    background: var(--color);
    animation-delay: -0.8s;
}
.loader span:nth-child(3) {
    background: var(--color);
    animation-delay: -0.7s;
}
.loader span:nth-child(4) {
    background: var(--color);
    animation-delay: -0.6s;
}
.loader span:nth-child(5) {
    background: var(--color);
    animation-delay: -0.5s;
}

@keyframes scale {
 0%, 40%, 100% {
  transform: scaleY(0.05);
 }

 20% {
  transform: scaleY(1);
 }
}
#loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ スライドショー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



.slideshow-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.slideshow-item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    filter: none;
    transition: opacity 1s ease-in-out, transform 1s ease-out, filter 1s ease-out;
    transform-origin: center center;
}
.slideshow-item.active {
    z-index: 3;
    opacity: 1;
    filter: none !important;
    transform: none !important;
}
.custom-content-1 {
    z-index: 10;
}


.typing-effect-container {
    display: inline-block;
    position: relative;
    z-index: 10;

    text-align: center;
}
.typing-effect-container p {
    padding: 0 60px;

    line-height: 1.5;
    letter-spacing: 1.6px;
    white-space: pre-wrap;
    word-wrap: break-word;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.cursor {
    display: inline-block;
    position: absolute;
    bottom: calc(50% - 1.6em);
    left: 50%;
    z-index: 10;
    width: 2px;
    height: 1.2em;

    transition: left 0.05s ease-out, top 0.05s ease-out, opacity 0.3s ease;
    animation: flash var(--cursor-blink-speed, 0.5s) infinite alternate;
    transform: translateY(-50%);
  
}
.cursor.hidden-cursor {
    opacity: 0;
    animation: none;
}
@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.cursor.hidden-cursor {
    animation: none;
    opacity: 0 !important;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ イースターエッグ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



#shutter::after {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888;
    width: 100%;
    height: 100vh;
    background-color: #666666;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250614/20250614212152.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    content: '';
    transform: translateY(-100%);
    animation: shutter 1s forwards cubic-bezier(0.3, 0, 0.7, 1);
}
@keyframes shutter {
    0% {
    transform: translateY(-100%); /* 開始時も同様に */;
    }
    100% {
    transform: translateY(0%);
    }
}
#curtain_open::before,#curtain_open::after {
    display: block;
    position: fixed;
    top: 0;
    z-index: 8888;
    width: 50%;
    height: 130vh;
    background-color: #990000;
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250524/20250524182926.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    visibility: hidden;
    content: '';
}
#curtain_open::before {
    left: 0%;
    animation: curtain_open_l 3s;
}
#curtain_open::after {
    right: 0%;
    animation: curtain_open_r 3s;
}
@keyframes curtain_open_l {
    0% {
    visibility: visible;
    }
    20% {
    transform: rotate(0deg) translateX(0%); box-shadow: 2px 2px 4px rgba(0,0,0,5);
    }
    100% {
    transform: rotate(0deg) translateX(-100%); box-shadow: 2px 2px 4px rgba(0,0,0,5);
    }
}
@keyframes curtain_open_r {
    0% {
    visibility: visible;
    }
    20% {
    transform: rotate(0deg) translateX(0%); box-shadow: 2px 2px 4px rgba(0,0,0,5);
    }
    100% {
    transform: rotate(0deg) translateX(100%); box-shadow: 2px 2px 4px rgba(0,0,0,5);
    }
}
#curtain::before,#curtain::after {
    display: block;
    position: fixed;
    top: 0;
    z-index: 8888;
    width: 50%;
    height: 130vh;
    background-color: var(--bg-color);
    background-image: url("https://cdn-ak.f.st-hatena.com/images/fotolife/i/in-doors/20250524/20250524182926.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    content: '';
}
#curtain::before {
    left: 0;
    animation: curtain_l 3s;
}
#curtain::after {
    right: 0;
    animation: curtain_r 3s;
}
@keyframes curtain_l {
    0% {
    transform: rotate(0deg) translateX(-100%); box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    60% {
    transform: rotate(0deg) translateX(-50%) skewX(-4deg); box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    100% {
    transform: rotate(0deg) translateX(0%); box-shadow: 2px 2px 4px rgba(0,0,0,5);
    }
}
@keyframes curtain_r {
    0% {
    transform: rotate(0deg) translateX(100%); box-shadow: -2px 2px 4px rgba(0,0,0,0.5);
    }
    60% {
    transform: rotate(0deg) translateX(50%) skewX(4deg); box-shadow: -2px 2px 4px rgba(0,0,0,0.5);
    }
    100% {
    transform: rotate(0deg) translateX(0%); box-shadow: -2px 2px 4px rgba(0,0,0,5);
    }
}
#goodbye {
    animation: goodbye 12s forwards;
    transform-origin:center top;
}
@keyframes goodbye {
    0% {
    opacity: 1;
    transform: scale(1) translateZ(0);
    }
    100% {
    opacity: 0;
    transform: scale(0.1) translateZ(-500px);
    }
}
#ground {
    animation: ground 2.5s infinite cubic-bezier(0.3, 0.8, 0.7, 1);
    animation-iteration-count: 2;
  
}
@keyframes ground {
    0%, 25% {
    transform: translateY(0) scale(1);
    }
    30% {
    transform: translateY(25px) scale(1.15, 0.85);
    }
    40% {
    transform: translateY(-15px) scale(0.9, 1.1);
    }
    50% {
    transform: translateY(10px) scale(1.05, 0.95);
    }
    60% {
    transform: translateY(-5px) scale(0.98, 1.02);
    }
    65%, 100% {
    transform: translateY(0) scale(1);
    }
}
#brubru2 {
    animation: brubru2 0.1s linear;
    animation-iteration-count: 15;
    
}
@keyframes brubru2 {
    0% {
    transform: translate(0px, 0px) rotateZ(0deg);
    }
    25% {
    transform: translate(2px, 2px) rotateZ(1deg);
    }
    50% {
    transform: translate(0px, 2px) rotateZ(0deg);
    }
    75% {
    transform: translate(2px, 0px) rotateZ(-1deg);
    }
    100% {
    transform: translate(0px, 0px) rotateZ(0deg);
    }
}
#roll {
    animation: roll 1.5s linear 1;
      
}
#roll:active {
    animation-play-state: paused;
}
@keyframes roll {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}