<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>NDL Web Archiving Project (WARP)</title>
    
    
  
    <meta name="description">
    <!-- <meta
            name="viewport"
            content="width=1200, viewport-fit=cover"/> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    
  <style>.privacy-confirmation[data-astro-cid-bbdvxe3m]{background-color:#fff;bottom:.5rem;border-radius:.5rem;box-shadow:0 1px 8px #0000003d;display:grid;gap:1rem;grid-template-rows:auto auto 1fr;left:.5rem;max-height:calc(100dvh - 1rem);padding:1.5rem 0 0;position:fixed;width:33.75rem;z-index:999;overflow-y:auto}.privacy-confirmation[data-astro-cid-bbdvxe3m]>[data-astro-cid-bbdvxe3m]{padding:0 1.5rem}.privacy-confirmation[data-astro-cid-bbdvxe3m] .details[data-astro-cid-bbdvxe3m]{margin-bottom:-1rem}.privacy-confirmation[data-astro-cid-bbdvxe3m] .privacy-confirmation-msg[data-astro-cid-bbdvxe3m]{margin-bottom:0}.privacy-confirmation[data-astro-cid-bbdvxe3m] .privacy-confirmation-buttons[data-astro-cid-bbdvxe3m]{padding:1rem 1.5rem}@media (min-width: 769px){.privacy-confirmation[data-astro-cid-bbdvxe3m] .privacy-confirmation-buttons[data-astro-cid-bbdvxe3m] .pc-buttons[data-astro-cid-bbdvxe3m]{gap:2rem;grid-template-columns:auto 1fr auto auto}}@media (max-width: 768px){.privacy-confirmation[data-astro-cid-bbdvxe3m] .privacy-confirmation-buttons[data-astro-cid-bbdvxe3m] .pc-buttons[data-astro-cid-bbdvxe3m]{gap:1rem;padding:1rem;grid-template-rows:auto auto auto}.privacy-confirmation[data-astro-cid-bbdvxe3m]{bottom:0;right:0;width:100dvw;height:-moz-fit-content;height:fit-content;left:0;max-height:calc(100dvh - 8rem);border-radius:0!important;padding:1rem 0 0}.privacy-confirmation[data-astro-cid-bbdvxe3m]>[data-astro-cid-bbdvxe3m]{padding:0 1rem}}.base-list[data-astro-cid-bbdvxe3m]{align-items:flex-start;display:flex;flex-direction:column}.base-layout-column[data-astro-cid-bbdvxe3m]{display:flex;flex-direction:column}
.announcer-only[data-astro-cid-nwj3var2]{border:none!important;clip:rect(0,0,0,0)!important;height:.01em!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:.01em!important}body{--warp-header-height: max(99px, 5vh)}.warp-header[data-astro-cid-nwj3var2]{min-height:var(--warp-header-height)}.warp-calendar[data-astro-cid-nwj3var2]{height:-moz-fit-content;height:fit-content}.warp-frame[data-astro-cid-nwj3var2]{width:100%;height:100svh}.warp-frame[data-astro-cid-nwj3var2].with-header{height:calc(100svh - var(--warp-header-height))}
.base-select[data-astro-cid-hpqslfv4]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-position:center right 8px;background-size:16px;background-repeat:no-repeat;background-image:url(/assets/img/selectarrow-down.svg)}
</style>
<link rel="stylesheet" href="/assets/cheatsheet.CQpJ8uNT.css">
<style>.loading-overlay[data-astro-cid-ypwnghc7]{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000a6;color:#fff;padding:20px;border-radius:5px;z-index:9999}.htmx-request[data-astro-cid-ypwnghc7] .htmx-indicator[data-astro-cid-ypwnghc7],.htmx-request[data-astro-cid-ypwnghc7].htmx-indicator{display:block}.block-overlay[data-astro-cid-ypwnghc7]{display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffff80;z-index:100;pointer-events:auto}
body{--warp-header-height: max(99px, 5vh)}.warp-header[data-astro-cid-5fitwqtt]{min-height:var(--warp-header-height)}.warp-calendar[data-astro-cid-5fitwqtt]{height:-moz-fit-content;height:fit-content}.warp-frame[data-astro-cid-5fitwqtt]{width:100%;height:100svh}.warp-frame[data-astro-cid-5fitwqtt].with-header{height:calc(100svh - var(--warp-header-height))}.print-text-decoration-none[data-astro-cid-5fitwqtt]{text-decoration:none;--tw-text-opacity: 1;color:rgb(0 115 181 / var(--tw-text-opacity))}
</style><script type="module" src="/assets/hoisted.BVEEhDxe.js"></script></head>
  
  
  
  <div x-cloak x-data="{cookieDetailsShow: false }" x-show="$store.cookieStatus.shown === true" class="fixed bottom-0 z-[900]" data-astro-cid-bbdvxe3m>
  <div class="privacy-confirmation border-4 border-nav-primary text-text-heading" data-astro-cid-bbdvxe3m>
    <div class="flex items-center" data-astro-cid-bbdvxe3m>
      <img class="flex h-[54px] flex-none" src="/assets/img/logo-square.svg" alt="National Diet Library Web Archiving Project (WARP)" data-astro-cid-bbdvxe3m>
      <h4 class="warp-h4" data-astro-cid-bbdvxe3m>Our use of Cookies on NDL Web Archiving Project (WARP)</h4>
    </div>
    <p class="warp-text-body-s privacy-confirmation-msg" data-astro-cid-bbdvxe3m>
      <span data-astro-cid-bbdvxe3m>We used necessary cookies to make our website（https://warp.ndl.go.jp/）work as library services. We would also like to set analytics cookies that help us make improvements by measuring how you use our website. These cookies will be set only if you accept. You can revoke your consent with effect for the future at any time via the cookie settings.</span>
    </p>
    <div class="base-layout-column details gap-3" x-show="cookieDetailsShow" data-astro-cid-bbdvxe3m>
      <section class="base-layout-column gap-3" data-astro-cid-bbdvxe3m>
        <h4 class="warp-h4" data-astro-cid-bbdvxe3m>Strictly Necessary Cookies : Always Enabled</h4>

        <ul class="base-list warp-text-body-s" data-astro-cid-bbdvxe3m>
          <li class="flex" data-astro-cid-bbdvxe3m>
            <svg aria-hidden="true" role="img" height="26" width="16" overflow="visible" data-astro-cid-bbdvxe3m>
              <use href="/assets/icon/interface.svg#listmarker" data-astro-cid-bbdvxe3m></use>
            </svg>
            <span data-astro-cid-bbdvxe3m>Necessary cookies enable core functionality such as security, network management and accessibility.</span>
          </li>
          <li class="flex" data-astro-cid-bbdvxe3m>
            <svg aria-hidden="true" role="img" height="26" width="16" overflow="visible" data-astro-cid-bbdvxe3m>
              <use href="/assets/icon/interface.svg#listmarker" data-astro-cid-bbdvxe3m></use>
            </svg>
            <span data-astro-cid-bbdvxe3m>You may disable these by changing your browser settings, but this may affect how the website functions.</span>
          </li>
        </ul>
      </section>
      <section class="base-layout-column gap-3" data-astro-cid-bbdvxe3m>
        <h4 class="warp-h4" data-astro-cid-bbdvxe3m>Accept all Cookies : Usage Patterns Analytics Cookies</h4>

        <ul class="base-list warp-text-body-s" data-astro-cid-bbdvxe3m>
          <li class="flex" data-astro-cid-bbdvxe3m>
            <svg aria-hidden="true" role="img" height="26" width="16" overflow="visible" data-astro-cid-bbdvxe3m>
              <use href="/assets/icon/interface.svg#listmarker" data-astro-cid-bbdvxe3m></use>
            </svg>
            <span data-astro-cid-bbdvxe3m>By using our website&#39;s statistical function, we collect website analytics information about usage patterns of website to evaluate and improve our services.</span>
          </li>
        </ul>
      </section>
      <section class="base-layout-column gap-3" data-astro-cid-bbdvxe3m>
        <p class="warp-text-body-s" data-astro-cid-bbdvxe3m>
          <span data-astro-cid-bbdvxe3m>Cookies are small text files that are stored on your device (smartphone, tablet, laptop, etc.) when you visit our websites. For any question in relation to our policy on cookies, please see</span>
          <a href="/en/info/privacypolicy" data-astro-cid-bbdvxe3m>Privacy Policy</a>
          <span data-astro-cid-bbdvxe3m>.</span>
        </p>
      </section>
    </div>
    <div class="privacy-confirmation-buttons" data-astro-cid-bbdvxe3m>
      <p class="warp-text-body-s" data-astro-cid-bbdvxe3m>About our use of cookies;</p>
      <div class="pc-buttons grid" data-astro-cid-bbdvxe3m>
        <button class="rounded flex items-center justify-center font-medium disabled:pointer-events-none disabled:cursor-default px-[11px] py-[5px] font-medium text-sm gap-[2px] bg-transparent text-primary border-transparent px-[6px] py-1 hover:bg-[#f0f8ff] hover:border-transparent pl-[7px] pl-[3px] pr-[7px] pr-[3px] h-8" x-show="!cookieDetailsShow" x-on:click="cookieDetailsShow = !cookieDetailsShow" data-astro-cid-bbdvxe3m>
  
  
          <span data-astro-cid-bbdvxe3m>Details</span>
        
  
</button>
        <button class="rounded flex items-center justify-center font-medium disabled:pointer-events-none disabled:cursor-default px-[11px] py-[5px] font-medium text-sm gap-[2px] bg-transparent text-primary border-transparent px-[6px] py-1 hover:bg-[#f0f8ff] hover:border-transparent pl-[7px] pl-[3px] pr-[7px] pr-[3px] h-8" x-show="cookieDetailsShow" x-on:click="cookieDetailsShow = !cookieDetailsShow" data-astro-cid-bbdvxe3m>
  
  
          <span data-astro-cid-bbdvxe3m>Hide details</span>
        
  
</button>
        <div class="max-[768px]:hidden min-[769px]:w-8" data-astro-cid-bbdvxe3m></div>
        <button class="rounded flex items-center justify-center font-medium disabled:pointer-events-none disabled:cursor-default px-[11px] py-[5px] font-medium text-sm gap-[2px] bg-primary text-text-oncolor border-primary hover:bg-primary-hover disabled:bg-disable hover:border-primary-hover pl-[7px] pr-[7px] min-h-8 w-full min-[769px]:w-32 focus-visible:min-[769px]:hover:h-6" @click="$store.cookieStatus.core()" data-astro-cid-bbdvxe3m>
  
  
          <span data-astro-cid-bbdvxe3m>Stricty Necessary Cookies</span>
        
  
</button>
        <button class="rounded flex items-center justify-center font-medium disabled:pointer-events-none disabled:cursor-default px-[11px] py-[5px] font-medium text-sm gap-[2px] bg-primary text-text-oncolor border-primary hover:bg-primary-hover disabled:bg-disable hover:border-primary-hover pl-[7px] pr-[7px] min-h-8 w-full min-[769px]:w-32 focus-visible:min-[769px]:hover:h-6" id="cookieAcceptButton" @click="$store.cookieStatus.all()" data-astro-cid-bbdvxe3m>
  
  
          <span data-astro-cid-bbdvxe3m>Accept all Cookies</span>
        
  
</button>
      </div>
    </div>
  </div>
</div>
  <div id="announcer" aria-live="assertive" class="announcer-only" data-astro-cid-nwj3var2>NDL Web Archiving Project (WARP)</div>
  <noscript class="flex w-full items-center gap-6 border-b border-nav-primary bg-nav-accent px-3 py-[5px] text-text-oncolor">
    <p class="noscript_attention wrap" data-astro-cid-nwj3var2>This website uses JavaScript. Please enable JavaScript.</p>
  </noscript>
  <div x-data="{open: true, calendar: false}" data-astro-cid-nwj3var2>
    <input type="hidden" id="contents-banner-waybackUrl" name="waybackUrl" hx-get="/en/web/update-banner" hx-trigger="change" hx-target="#contents-banner" hx-swap="outerHTML" x-on:submit.prevent data-astro-cid-nwj3var2>

    <nav x-show="open" class="warp-header relative flex flex-col border-b border-white bg-nav-primary drop-shadow max-lg:h-full" data-astro-cid-nwj3var2>
      <div id="contents-banner" data-astro-cid-5fitwqtt>
  <div class="min-xl:items-center relative flex gap-1 px-3 py-[8px] max-xl:flex-col md:gap-3" hx-get="/en/web/partials/create-banner?instanceId=81196589&amp;targetUrl=jsln.umin.jp/css/main.css&amp;timepoint=20230920204029&amp;waybackUrl=/20230920/20230920114029/jsln.umin.jp/css/main.css" hx-trigger="load" x-clock hx-swap="innerHTML" aria-live="polite" data-astro-cid-5fitwqtt>
    <div class="flex max-md:flex-col md:gap-3" data-astro-cid-5fitwqtt>
      <div class="flex items-center max-sm:h-[54px] sm:w-[54px]" data-astro-cid-5fitwqtt>
        <a href="/en/" id="header-logo" data-astro-cid-5fitwqtt>
  
          <img class="h-[54px] max-sm:hidden" src="/assets/img/logo-square.svg" alt="National Diet Library Web Archiving Project (WARP)" data-astro-cid-5fitwqtt>
          <img class="h-[40px] sm:hidden" src="/assets/img/logo-content-phone.svg" alt="National Diet Library Web Archiving Project (WARP)" data-astro-cid-5fitwqtt>
        
</a>
      </div>
      
      <div class="flex items-center gap-3 md:justify-center" data-astro-cid-5fitwqtt>
        <div class="mt-[-4px] flex flex-col gap-1 text-text-oncolor" data-astro-cid-5fitwqtt>
          <div class="flex items-center gap-1" data-astro-cid-5fitwqtt>
            <div data-astro-cid-5fitwqtt>
              <span id="oldest-date" class="text-nav-disabled" aria-label="Move to the oldest archived page" data-astro-cid-5fitwqtt>
                <svg class="inline-block" width="24" height="24" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#arrow-circle-double-left"></use>
</svg>
              </span>
            </div>
            <div data-astro-cid-5fitwqtt>
              <span id="pre-date" class="text-nav-disabled" aria-label="Move to previous archived page" data-astro-cid-5fitwqtt>
                <svg class="inline-block" width="24" height="24" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#arrow-circle-left"></use>
</svg>
              </span>
            </div>
            <span id="snapshot-date" class="break-keep" data-astro-cid-5fitwqtt>As of 2023/09/20</span>
            <div data-astro-cid-5fitwqtt>
              <span id="post-date" class="text-nav-disabled" aria-label="Move to next archived page" data-astro-cid-5fitwqtt>
                <svg class="inline-block rotate-180" width="24" height="24" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#arrow-circle-left"></use>
</svg>
              </span>
            </div>
            <div data-astro-cid-5fitwqtt>
              <span id="latest-date" class="text-nav-disabled" aria-label="Move to the latest archived page" data-astro-cid-5fitwqtt>
                <svg class="inline-block rotate-180" width="24" height="24" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#arrow-circle-double-left"></use>
</svg>
              </span>
            </div>
          </div>
        </div>
        
        <div class="flex items-center" data-astro-cid-5fitwqtt>
          <button id="calendar-button-open" type="button" class="warp-text-body-s h-[54px] rounded-[4px] border border-nav-primary px-1 disabled:pointer-events-none disabled:cursor-default" data-open="Open archived dates in a calendar format" :aria-label="$el.dataset.open" disabled data-astro-cid-5fitwqtt>
            <span class="flex h-8 items-center justify-center" data-astro-cid-5fitwqtt>
              <svg class="inline-block h-6 w-6 text-nav-disabled" width="24px" height="24px" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#calendar"></use>
</svg>
            </span>
            <span class="warp-text-body-s text-nav-disabled max-md:text-xs max-sm:hidden" data-astro-cid-5fitwqtt>Select day in calendar</span>
          </button>
        </div>
      </div>
    </div>

    <div class="flex gap-1 max-sm:flex-col sm:items-center sm:gap-3" data-astro-cid-5fitwqtt>
      
      <div class="flex max-sm:hidden" data-astro-cid-5fitwqtt>
        <button id="link-source" type="button" class="warp-text-body-s flex cursor-pointer flex-col items-center justify-center rounded-[4px] border-nav-primary px-1 text-nav-disabled hover:no-underline disabled:pointer-events-none disabled:cursor-default max-sm:flex max-sm:flex-row sm:h-[54px]" disabled data-astro-cid-5fitwqtt>
          <span class="flex h-8 items-center justify-center" data-astro-cid-5fitwqtt>
            <svg class="inline-block h-6 w-6 text-nav-disabled" width="24px" height="24px" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#link-source"></use>
</svg>
          </span>
          <span class="warp-text-body-s text-nav-disabled max-md:text-xs" data-astro-cid-5fitwqtt>Go to link source</span>
        </button>
      </div>
      <p class="warp-text-caption items-center break-keep text-nav-disabled sm:hidden" data-astro-cid-5fitwqtt>Go to link source</p>
      <div class="flex justify-center" data-astro-cid-5fitwqtt>
        <div class="relative max-sm:w-full" data-astro-cid-5fitwqtt>
          
          <input type="text" class="w-full rounded-[4px] border border-text-border bg-gray-600 px-2 py-[6px] max-sm:w-full sm:max-xl:w-[450px] xl:w-[275px]" placeholder="Search within this archived site" disabled data-astro-cid-5fitwqtt>
          <button class="absolute right-2 top-1 text-text-sub disabled:pointer-events-none disabled:cursor-default" id="content_search_button" type="button" aria-label="Search" disabled data-astro-cid-5fitwqtt>
  <svg class="inline-block" width="24" height="24" aria-hidden="true" role="img">
  
  <use href="/assets/icon/interface.svg#search"></use>
</svg>
</button>
        </div>
      </div>
    </div>
  </div>

  <div class="absolute right-3 top-2 ml-auto flex h-[54px] items-center justify-end gap-3 sm:pr-2" data-astro-cid-5fitwqtt>
    <!-- URLコピーボタン -->
    <div x-data="{ copied: false }" class="relative inline-block max-sm:hidden" data-astro-cid-5fitwqtt>
      <button class="rounded flex items-center justify-center font-medium disabled:pointer-events-none disabled:cursor-default text-text-oncolor hover:bg-[#6f4eaf] visited:text-text-oncolor warp-text-body-s flex cursor-pointer flex-col items-center justify-center rounded-[4px] font-light hover:no-underline ml-auto px-1" id="copy-url" @click="navigator.clipboard.writeText(window.location.href); copied = true ;setTimeout(() => copied = false, 1000);" data-astro-cid-5fitwqtt>
  
  
        <span class="flex h-8 items-center justify-center" data-astro-cid-5fitwqtt>
          <svg class="inline-block h-6 w-6" width="24px" height="24px" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#copy"></use>
</svg>
        </span>
        <span class="max-md:text-xs max-sm:hidden" data-astro-cid-5fitwqtt>Copy URL</span>
      
  
</button>
      <template x-if="copied" data-astro-cid-5fitwqtt>
        <div x-transition.opacity.duration.300ms class="absolute rounded bg-white px-2 py-1 text-sm font-medium text-text-sub shadow" style="white-space: nowrap;" data-astro-cid-5fitwqtt>
          <p data-astro-cid-5fitwqtt>Copied</p>
        </div>
      </template>
    </div>
    <div class="flex flex-col items-center gap-1 break-keep" data-astro-cid-5fitwqtt>
      
      
      <span class="max-sm:h-4 sm:h-5" data-astro-cid-5fitwqtt>
      </span>
      
      
      <p class="flex items-center justify-center font-normal text-text-oncolor max-sm:text-xs sm:text-sm" data-astro-cid-5fitwqtt>Printable</p>
      
    </div>
    <a id="header-help" href="/en/info/help#section5" class="warp-link-onocolor warp-text-caption flex flex-col items-center" data-astro-cid-5fitwqtt>
      <svg class="inline-block" width="24" height="24" aria-hidden="true" role="img" data-astro-cid-5fitwqtt>
  
  <use href="/assets/icon/interface.svg#questionmark-circle"></use>
</svg>
      <span class="break-keep max-sm:hidden" data-astro-cid-5fitwqtt>Help</span>
    </a>
  </div>
</div>

      <div class="flex h-full w-full flex-grow gap-1 border-b border-nav-primary bg-nav-accent px-3 py-[5px] text-text-oncolor max-lg:flex-col" data-astro-cid-nwj3var2>
        
        <p class="warp-text-label-mini" style="line-height:14px;" data-astro-cid-nwj3var2>You are viewing an archived web page captured by the National Diet Library, Japan. Please note that the information on this web page may be out of date.</p>
        
        <a id="help-copyright" class="warp-text-label-mini !text-text-oncolor underline" style="line-height:14px;" href="/en/info/help#section5-4" data-astro-cid-nwj3var2>About the copyright of this archived web page</a>
      </div>
      <button x-on:click="open = false" class="absolute bottom-0 right-3 flex h-[20px] w-[114px] items-center justify-center rounded-t-[8px] border border-nav-accent bg-nav-primary" aria-label="Minimize the WARP banner" data-astro-cid-nwj3var2>
        <svg class="inline-block" width="18px" height="13px" aria-hidden="true" role="img" data-astro-cid-nwj3var2>
  
  <use href="/assets/icon/interface.svg#close-up"></use>
</svg>
      </button>
    </nav>
    <div x-show="calendar && open" x-cloak class="warp-calendar absolute w-full bg-bg-main drop-shadow" data-astro-cid-nwj3var2>
      <div id="show_calendar" data-astro-cid-nwj3var2>
        <!-- 初期表示では空、クリック時にここへカレンダーが挿入される -->
        <div x-data="{ month:9, year:2023, tmpCalendar:[{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Jan&quot;,&quot;dateOffset&quot;:0,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Feb&quot;,&quot;dateOffset&quot;:3,&quot;noOfDays&quot;:28,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Mar&quot;,&quot;dateOffset&quot;:3,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Apr&quot;,&quot;dateOffset&quot;:6,&quot;noOfDays&quot;:30,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;May&quot;,&quot;dateOffset&quot;:1,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Jun&quot;,&quot;dateOffset&quot;:4,&quot;noOfDays&quot;:30,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Jul&quot;,&quot;dateOffset&quot;:6,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Aug&quot;,&quot;dateOffset&quot;:2,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Sep&quot;,&quot;dateOffset&quot;:5,&quot;noOfDays&quot;:30,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Oct&quot;,&quot;dateOffset&quot;:0,&quot;noOfDays&quot;:31,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Nov&quot;,&quot;dateOffset&quot;:3,&quot;noOfDays&quot;:30,&quot;event&quot;:{}},{&quot;days&quot;:[&quot;Sun&quot;,&quot;Mon&quot;,&quot;Tue&quot;,&quot;Wed&quot;,&quot;Thu&quot;,&quot;Fri&quot;,&quot;Sat&quot;],&quot;year&quot;:2023,&quot;month&quot;:&quot;Dec&quot;,&quot;dateOffset&quot;:5,&quot;noOfDays&quot;:31,&quot;event&quot;:{}}], currentYear:2026,fix : true }" data-astro-cid-ypwnghc7>
  <div id="partials_calendar" data-astro-cid-ypwnghc7>
    <div id="loading" class="htmx-indicator block-overlay" data-astro-cid-ypwnghc7>
      <span class="loading-overlay" data-astro-cid-ypwnghc7>Loading</span>
    </div>
    <div class="flex flex-col pt-6 sm:pb-8" data-astro-cid-ypwnghc7>
      <div class="flex flex-col items-center justify-center sm:gap-[9px]" data-astro-cid-ypwnghc7>
        <form id="calendar-year-change" hx-get="/en/web/partials/calendar" hx-target="#partials_calendar" hx-swap="outerHTML" hx-trigger="submit" x-on:submit.prevent hx-indicator="#loading" data-astro-cid-ypwnghc7>
          <input type="hidden" name="timepoint" value="20230920204029" data-astro-cid-ypwnghc7>
          <input type="hidden" name="waybackUrl" value="/20230920/20230920114029/jsln.umin.jp/css/main.css" data-astro-cid-ypwnghc7>
          <input type="hidden" name="oldest" :value="$store.calendarDate.oldest.substring(0, 4)" data-astro-cid-ypwnghc7>
          <input type="hidden" name="latest" :value="$store.calendarDate.latest.substring(0, 4)" data-astro-cid-ypwnghc7>
          <div class="mx-auto flex items-center justify-center gap-2 max-sm:flex-col" data-astro-cid-ypwnghc7>
            <label data-astro-cid-ypwnghc7>
              <select class="base-select rounded-[20px] border border-separator bg-white py-1 pl-[11px] pr-[25px] text-text-main outline-primary w-24" disabled data-astro-cid-ypwnghc7 data-astro-cid-hpqslfv4>
  
                <option data-astro-cid-ypwnghc7>2023</option>
              
</select>
            </label>
            
            <div class="mr-4 flex items-center gap-2 max-sm:ml-auto sm:absolute sm:right-0" data-astro-cid-ypwnghc7>
              <span class="warp-text-label-mini" data-astro-cid-ypwnghc7>legend</span>
              <div class="border-gray relative flex size-[18px] items-center justify-center rounded-[5px] border-[3px] text-[9px]" data-astro-cid-ypwnghc7>
                <svg class="inline-block absolute -right-1 -top-2 z-20" width="14" height="14" aria-hidden="true" role="img" data-astro-cid-ypwnghc7>
  
  <use href="/assets/icon/interface.svg#status-refusal-calendar"></use>
</svg>
              </div>
              <span class="warp-text-label-mini" data-astro-cid-ypwnghc7>Available only at the NDL</span>
            </div>
          </div>
        </form>

        <div data-astro-cid-ypwnghc7>
          <div id="tmp_calendar" class="flex items-center gap-4 px-6 py-4" data-astro-cid-ypwnghc7>
            <!-- 前月ボタン -->
            <button class="text-primary sm:hidden" @click="month = (month === 1 ? 12 : month - 1)" data-astro-cid-ypwnghc7>
  <svg class="inline-block" width="24" height="24" aria-hidden="true" role="img">
  
  <use href="/assets/icon/interface.svg#arrow-circle-left"></use>
</svg>
</button>
            <div class="grid flex-1 grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6" data-astro-cid-ypwnghc7>
              <template x-for="(calendar, index) in tmpCalendar" :key="index" data-astro-cid-ypwnghc7>
                <div :class="{'block sm:block': month === index + 1,'hidden sm:block': month !== index + 1}" data-astro-cid-ypwnghc7>
                  <div class="className rounded-[6px] bg-bg-main p-2 drop-shadow" data-astro-cid-ypwnghc7>
                    <div class="flex flex-col gap-[5px]">
  <div class="flex items-center justify-center">
    <p class="text-[10px] font-bold text-text-sub">
      <span x-text="calendar.month"></span>
      <span></span>
    </p>
  </div>
  <div class="grid grid-cols-7 gap-[5px] border-b border-separator text-[9px] text-text-sub">
    <template x-for="(day, index) in calendar.days" :key="index">
      <div class="flex size-[18px] items-center justify-center" x-text="day">
      </div>
    </template>
  </div>

  <div class="grid grid-cols-7 gap-[5px]">
    <template x-for="i in calendar.dateOffset">
      <div class=""></div>
    </template>
    <template x-for="date in calendar.noOfDays" :key="date">
      <div class="relative flex size-[20px] items-center justify-center rounded-[5px] text-[9px]" :class="{'border-[3px] border-gray':calendar.event[date] && !calendar.event[date].internet && !calendar.event[date].warn, 'border-[3px] text-primary border-primary bg-primary-whitish':calendar.event[date] && calendar.event[date].internet && !calendar.event[date].warn, 'border-[3px] border-secondary text-secondary bg-secondary-whitish':calendar.event[date] && calendar.event[date].warn}">
        <template x-if="calendar.event[date]">
          
          
            <a class="flex h-full w-full items-center justify-center hover:no-underline" :id="'date-link-' + month + '-' + date" :href="calendar.event[date].link" x-text="date" data-year="2023" data-ariatext="Archived webpage on" :aria-label="$el.dataset.ariatext + ' ' + date + ' ' + month + ' ' + $el.dataset.year + ($el.dataset.internet || '')">
            </a>
          
        </template>
        <template x-if="!calendar.event[date]">
          <div class="flex items-center justify-center" x-text="date"></div>
        </template>
        <template x-if="calendar.event[date] && !calendar.event[date].internet">
          <svg class="inline-block absolute -right-1 -top-2 z-20" width="14" height="14" aria-hidden="true" role="img">
  
  <use href="/assets/icon/interface.svg#status-refusal-calendar"></use>
</svg>
        </template>
      </div>
    </template>
  </div>
</div>
                  </div>
                </div>
              </template>
            </div>
            <!-- 次月ボタン -->
            <button class="text-primary sm:hidden" @click="month = (month === 12 ? 1 : month + 1)" data-astro-cid-ypwnghc7>
  <svg class="inline-block rotate-180" width="24" height="24" aria-hidden="true" role="img">
  
  <use href="/assets/icon/interface.svg#arrow-circle-left"></use>
</svg>
</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
      </div>
    </div>
    <button x-cloak x-on:click="open = true" x-show="!open" class="absolute right-3 top-0 flex h-[20px] w-[114px] items-center justify-center rounded-b-[8px] border-b border-l border-r border-white bg-nav-primary drop-shadow-md" aria-label="Maximize the WARP banner" data-astro-cid-nwj3var2>
      <svg class="inline-block rotate-180" width="18px" height="13px" aria-hidden="true" role="img" data-astro-cid-nwj3var2>
  
  <use href="/assets/icon/interface.svg#close-up"></use>
</svg>
    </button>
    <iframe aria-live="polite" title="NDL Web Archiving Project (WARP)" id="pywb-frame" class="warp-frame" :class="{'with-header':open}" src="/20230920/20230920114029/jsln.umin.jp/css/main.css" seamless="seamless" allow="autoplay; fullscreen" name="___wb_replay_top_frame" data-astro-cid-nwj3var2>
    </iframe>
  </div>

  

</html>


<script>
  const iframe = document.querySelector('#pywb-frame')
  let firstDispFlag = true

  // iframeの画面遷移時にURLを書き変える
  iframe.onload = function (e) {
    let nowIframe = document.querySelector('#pywb-frame')
    let reg = new RegExp('^' + window.location.origin + '/[0-9]+/', 'g')
    let pathPrefix = '/web/'

    const announcerTitle = document.getElementById('announcer')

    // 日英対応
    if (window.location.pathname.startsWith('/en/')) {
      pathPrefix = '/en/web/'
    }

    let redirectURL = ''
    // iframe内からWARP独自のリダイレクトIDが取得できた場合はリダイレクトする
    let redirectURLElements = nowIframe.contentWindow.document.querySelectorAll(
      'input[name=warpWaybackErrorRedirectURL]'
    )

    redirectURLElements.forEach((redirectURLElement) => {
      // ブラウザURLに表示されているコンテンツURL
      let checkRedirectURLRegExp = new RegExp(
        '^' +
          nowIframe.contentWindow.location.origin +
          '/[0-9]{8}/[0-9]{14}[a-z_]*/',
        'g'
      )
      let checkRedirectURL = nowIframe.contentWindow.location.href.replace(
        checkRedirectURLRegExp,
        ''
      )

      // エラー画面に表示されているコンテンツURL
      let checkRedirectURLSourceRegExp = new RegExp(
        '^(.*/web/[0-9]{14}/|/[0-9]{8}/[0-9]{14}[a-z_]*/)',
        'g'
      )
      let checkRedirectURLSource = redirectURLElement.value
        .replace('/wayback/error?targetUrl=', '')
        .replace(checkRedirectURLSourceRegExp, '')

      // iframeのURLとエラー画面のリダイレクトURLが一致した場合、エラー画面に遷移する
      // iframe内の個々の表示項目(tplファイルなど)がアーカイブされてないが、コンテンツを表示するための対応
      if (checkRedirectURLSource === checkRedirectURL) {
        redirectURL = redirectURLElement.value
        return
      }
    })

    if (redirectURL !== '') {
      window.location.replace(redirectURL)
      return
    }

    document.title = nowIframe.contentWindow.document.title

    if (document.title === '') {
      document.title = nowIframe.contentWindow.location.pathname
        .split('/')
        .pop()
    }
    // アクセシビリティ（音声）のためのタイトル情報取得
    if (announcerTitle) {
      announcerTitle.textContent = document.title
      nowIframe.title = document.title
    }

    // URL内の日付部分を取得
    let utcDateString = nowIframe.contentWindow.location.href
      .replace(reg, '')
      .slice(0, 14)

    // アドレスバーの書き換えURL作成
    let delReg = new RegExp(
      '^' +
        window.location.origin +
        '(/[0-9]{14}/|/[0-9]{8}/[0-9]{14}[a-z_]*/)',
      'g'
    )
    let contentsUrl = nowIframe.contentWindow.location.href.replace(delReg, '')

    let addBarUrl =
      window.location.origin +
      pathPrefix +
      convertUtcYmdHmsToJstYmdHms(utcDateString) +
      '/' +
      contentsUrl

    window.history.replaceState({}, '', addBarUrl)

    // 初期表示の場合はバナーをそのまま表示する
    if (!firstDispFlag) {
      let bannerWaybackUrlRegExp = new RegExp(
        '^' + nowIframe.contentWindow.location.origin,
        'g'
      )

      //URLからインスタンスグループ部分を取得
      let instanceGroup = nowIframe.contentWindow.location.href
        .replace(bannerWaybackUrlRegExp, '')
        .slice(0, 10)

      // URLの日付部分をUTCからJSTに変換したURLを生成
      let bannerWaybackUrl =
        instanceGroup +
        convertUtcYmdHmsToJstYmdHms(utcDateString) +
        '/' +
        contentsUrl

      // HTMX(非同期)でbanner更新をするためにコンテンツのパスを設定しchangeイベントを発火
      let inputElement = document.getElementById('contents-banner-waybackUrl')
      inputElement.setAttribute('value', bannerWaybackUrl)
      const event = new Event('change', { bubbles: true })
      inputElement.dispatchEvent(event)
    }

    firstDispFlag = false
  }

  iframe.contentWindow.addEventListener('hashchange', function () {
    console.log('hash-change', iframe.contentWindow)
    window.history.replaceState(
      {},
      '',
      '#' + iframe.contentWindow.location.hash
    )
    window.location.hash = iframe.contentWindow.location.hash
  })

  function convertUtcYmdHmsToJstYmdHms(utcStr) {
    // UTCの "YYYYMMDDHHMMSS" 形式から Date を作成
    const year = parseInt(utcStr.slice(0, 4), 10)
    const month = parseInt(utcStr.slice(4, 6), 10) - 1 // 月は0始まり
    const day = parseInt(utcStr.slice(6, 8), 10)
    const hour = parseInt(utcStr.slice(8, 10), 10)
    const minute = parseInt(utcStr.slice(10, 12), 10)
    const second = parseInt(utcStr.slice(12, 14), 10)

    // UTCとしてのDateを作成
    const utcDate = new Date(Date.UTC(year, month, day, hour, minute, second))

    // JST（+9時間）に変換
    const jstDate = new Date(
      utcDate.toLocaleString('en-US', { timeZone: 'Asia/Tokyo' })
    )

    // パディング関数
    const pad = (n) => n.toString().padStart(2, '0')

    const y = jstDate.getFullYear()
    const m = pad(jstDate.getMonth() + 1)
    const d = pad(jstDate.getDate())
    const h = pad(jstDate.getHours())
    const min = pad(jstDate.getMinutes())
    const s = pad(jstDate.getSeconds())

    return `${y}${m}${d}${h}${min}${s}`
  }
</script>