<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* img.videoThumb ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
img.videoThumb {
    cursor: pointer; /* ãƒžã‚¦ã‚¹ã‚«ãƒ¼ã‚½ãƒ«ãŒç”»åƒã®ä¸Šã«æ¥ãŸã¨ãã«ã€ãƒã‚¤ãƒ³ã‚¿ãƒ¼ã«å¤‰æ›´ã™ã‚‹ */
}

/* img.videoThumb ã®ãƒ›ãƒãƒ¼æ™‚ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
img.videoThumb:hover {
    opacity: 0.8; /* ãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼æ™‚ã«ç”»åƒã®é€æ˜Žåº¦ã‚’80%ã«è¨­å®š */
}

/* .modalContent ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
.modalContent {
    background-color: #fefefe; /* èƒŒæ™¯è‰²ã‚’è¨­å®š */
    margin: 8% auto; 5% /* ä¸Šä¸‹ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚’15%ã€å·¦å³ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚’è‡ªå‹•ã«è¨­å®š */
    padding: 0; /* ãƒ‘ãƒ‡ã‚£ãƒ³ã‚°ã‚’è¨­å®š */
    border: 1px solid #888; /* å¢ƒç•Œç·šã®è‰²ã¨å¤ªã•ã‚’è¨­å®š */
    animation: fadeIn 0.7s ease 0s 1 normal; /* ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®åå‰ã€æ™‚é–“ã€ã‚¿ã‚¤ãƒŸãƒ³ã‚°é–¢æ•°ã€é…å»¶æ™‚é–“ã€åå¾©å›žæ•°ã€æ–¹å‘ã‚’è¨­å®š */
    position: relative; /* ä½ç½®ã‚’è¨­å®š */
    width: 100%; /* å¹…ã‚’100%ã«è¨­å®š */
    aspect-ratio: 17 / 30; /* ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’16:9ã«è¨­å®š */
    max-width: 340px; /* æœ€å¤§å¹…ã‚’600pxã«è¨­å®š */
}

/* .modalContent iframe ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
.modalContent iframe {
    position: absolute; /* çµ¶å¯¾ä½ç½®ã‚’è¨­å®š */
    width: 100%; /* å¹…ã‚’100%ã«è¨­å®š */
    height: 100%; /* é«˜ã•ã‚’100%ã«è¨­å®š */
}

/* button.closeBtn ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
button.closeBtn {
    display: inline-block; /* ãƒ‡ã‚£ã‚¹ãƒ—ãƒ¬ã‚¤ãƒ—ãƒ­ãƒ‘ãƒ†ã‚£ã‚’inline-blockã«è¨­å®š */
    vertical-align: middle; /* åž‚ç›´æ–¹å‘ã®é…ç½®ã‚’ä¸­å¤®ã«è¨­å®š */
    color: #FFF; /* æ–‡å­—è‰²ã‚’ç™½ã«è¨­å®š */
    line-height: 1; /* è¡Œã®é«˜ã•ã‚’1ã«è¨­å®š */
    width: 1.6rem; /* å¹…ã‚’1.6remã«è¨­å®š */
    height: 0.2rem; /* é«˜ã•ã‚’0.2remã«è¨­å®š */
    background: currentColor; /* èƒŒæ™¯è‰²ã‚’ç¾åœ¨ã®æ–‡å­—è‰²ã«è¨­å®š */
    border-radius: 0.1rem; /* ãƒœãƒ¼ãƒ€ãƒ¼ã®è§’ã‚’ä¸¸ã‚ã‚‹ */
    position: absolute; /* çµ¶å¯¾ä½ç½®ã‚’è¨­å®š */
    transform: rotate(45deg); /* è¦ç´&nbsp;ã‚’45åº¦å›žè»¢ã•ã›ã‚‹ */
    border: none; /* ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ãªãã™ */
    right: -35px; /* å³ã‹ã‚‰-35pxã®ä½ç½®ã«é…ç½® */
    top: 7px; /* ä¸Šã‹ã‚‰7pxã®ä½ç½®ã«é…ç½® */
    opacity: 0.6; /* é€æ˜Žåº¦ã‚’60%ã«è¨­å®š */
    transition: 0.2s ease-in-out; /* 0.2ç§’é–“ã§ãƒ—ãƒ­ãƒ‘ãƒ†ã‚£ã‚’å¤‰æ›´ã—ã€å¤‰æ›´ã®é€Ÿåº¦ãŒå…ˆé&nbsp;­ã¨æœ«å°¾ã§ã‚†ã£ãã‚Šã¨ãªã‚‹ã‚ˆã†ã«è¨­å®š */
}


@media (max-width: 768px) {

.modalContent {
    background-color: #fefefe; /* èƒŒæ™¯è‰²ã‚’è¨­å®š */
    margin: 10% auto; /* ä¸Šä¸‹ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚’15%ã€å·¦å³ã®ãƒžãƒ¼ã‚¸ãƒ³ã‚’è‡ªå‹•ã«è¨­å®š */
    padding: 0; /* ãƒ‘ãƒ‡ã‚£ãƒ³ã‚°ã‚’è¨­å®š */
    border: 1px solid #888; /* å¢ƒç•Œç·šã®è‰²ã¨å¤ªã•ã‚’è¨­å®š */
    animation: fadeIn 0.7s ease 0s 1 normal; /* ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®åå‰ã€æ™‚é–“ã€ã‚¿ã‚¤ãƒŸãƒ³ã‚°é–¢æ•°ã€é…å»¶æ™‚é–“ã€åå¾©å›žæ•°ã€æ–¹å‘ã‚’è¨­å®š */
    position: relative; /* ä½ç½®ã‚’è¨­å®š */
    width: 100%; /* å¹…ã‚’100%ã«è¨­å®š */
    aspect-ratio: 17 / 30; /* ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’16:9ã«è¨­å®š */
    max-width: auto; /* æœ€å¤§å¹…ã‚’600pxã«è¨­å®š */
    width: 90%;
}

button.closeBtn {
    display: inline-block; /* ãƒ‡ã‚£ã‚¹ãƒ—ãƒ¬ã‚¤ãƒ—ãƒ­ãƒ‘ãƒ†ã‚£ã‚’inline-blockã«è¨­å®š */
    vertical-align: middle; /* åž‚ç›´æ–¹å‘ã®é…ç½®ã‚’ä¸­å¤®ã«è¨­å®š */
    color: #FFF; /* æ–‡å­—è‰²ã‚’ç™½ã«è¨­å®š */
    line-height: 1; /* è¡Œã®é«˜ã•ã‚’1ã«è¨­å®š */
    width: 1.6rem; /* å¹…ã‚’1.6remã«è¨­å®š */
    height: 0.2rem; /* é«˜ã•ã‚’0.2remã«è¨­å®š */
    background: currentColor; /* èƒŒæ™¯è‰²ã‚’ç¾åœ¨ã®æ–‡å­—è‰²ã«è¨­å®š */
    border-radius: 0.1rem; /* ãƒœãƒ¼ãƒ€ãƒ¼ã®è§’ã‚’ä¸¸ã‚ã‚‹ */
    position: absolute; /* çµ¶å¯¾ä½ç½®ã‚’è¨­å®š */
    transform: rotate(45deg); /* è¦ç´&nbsp;ã‚’45åº¦å›žè»¢ã•ã›ã‚‹ */
    border: none; /* ãƒœãƒ¼ãƒ€ãƒ¼ã‚’ãªãã™ */
    right: 0px; /* å³ã‹ã‚‰-35pxã®ä½ç½®ã«é…ç½® */
    top: -20px; /* ä¸Šã‹ã‚‰7pxã®ä½ç½®ã«é…ç½® */
    opacity: 0.6; /* é€æ˜Žåº¦ã‚’60%ã«è¨­å®š */
    transition: 0.2s ease-in-out; /* 0.2ç§’é–“ã§ãƒ—ãƒ­ãƒ‘ãƒ†ã‚£ã‚’å¤‰æ›´ã—ã€å¤‰æ›´ã®é€Ÿåº¦ãŒå…ˆé&nbsp;­ã¨æœ«å°¾ã§ã‚†ã£ãã‚Šã¨ãªã‚‹ã‚ˆã†ã«è¨­å®š */
}

}


/* button.closeBtn:before ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
button.closeBtn:before {
    content: ''; /* å†…å®¹ã‚’ç©ºã«è¨­å®š */
    position: absolute; /* çµ¶å¯¾ä½ç½®ã‚’è¨­å®š */
    top: 0; /* ä¸Šã‹ã‚‰0ã®ä½ç½®ã«é…ç½® */
    left: 0; /* å·¦ã‹ã‚‰0ã®ä½ç½®ã«é…ç½® */
    width: 100%; /* å¹…ã‚’100%ã«è¨­å®š */
    height: 100%; /* é«˜ã•ã‚’100%ã«è¨­å®š */
    background: inherit; /* èƒŒæ™¯è‰²ã‚’è¦ªè¦ç´&nbsp;ã‹ã‚‰ç¶™æ‰¿ */
    border-radius: inherit; /* ãƒœãƒ¼ãƒ€ãƒ¼ã®è§’ã‚’è¦ªè¦ç´&nbsp;ã‹ã‚‰ç¶™æ‰¿ */
    transform: rotate(90deg); /* è¦ç´&nbsp;ã‚’90åº¦å›žè»¢ã•ã›ã‚‹ */
}

/* button.closeBtn ã®ãƒ›ãƒãƒ¼æ™‚ã®ã‚¹ã‚¿ã‚¤ãƒ«å®šç¾© */
button.closeBtn:hover {
    opacity: 1; /* ãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼æ™‚ã«é€æ˜Žåº¦ã‚’100%ã«è¨­å®š */
}

/* fadeIn ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®å®šç¾© */
@keyframes fadeIn {
  0% {
    opacity: 0; /* é–‹å§‹æ™‚ç‚¹ã§ã®é€æ˜Žåº¦ã‚’0%ã«è¨­å®š */
    transform: translateY(30px); /* é–‹å§‹æ™‚ç‚¹ã§ã®è¦ç´&nbsp;ã®ä½ç½®ã‚’Yè»¸æ–¹å‘ã«30pxä¸‹ã«ç§»å‹• */
  }
  100% {
    opacity: 1; /* çµ‚äº†æ™‚ç‚¹ã§ã®é€æ˜Žåº¦ã‚’100%ã«è¨­å®š */
  }
}

/* fadeOut ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®å®šç¾© */
@keyframes fadeOut {
  0% {
    opacity: 1; /* é–‹å§‹æ™‚ç‚¹ã§ã®é€æ˜Žåº¦ã‚’100%ã«è¨­å®š */
  }
  100% {
    opacity: 0; /* çµ‚äº†æ™‚ç‚¹ã§ã®é€æ˜Žåº¦ã‚’0%ã«è¨­å®š */
    transform: translateY(60px); /* çµ‚äº†æ™‚ç‚¹ã§ã®è¦ç´&nbsp;ã®ä½ç½®ã‚’Yè»¸æ–¹å‘ã«60pxä¸‹ã«ç§»å‹• */
  }
}</pre></body></html>