@charset "utf-8";
/* CSS Document */

.header{ border-bottom: 20px solid #888;}
.header2{ height: 200px; display: flex; justify-content: center; background-color: #888;}
.header2 img{ height: 100%;}

.title1{ font-family: "Noto Serif JP", serif; font-size: var(--fontsize-l3); margin-bottom: var(--m-m); text-align: center; }

ol.liston{ max-width: 900px; width: 95%; padding: 3%; border-radius: 10px; margin-left: auto; margin-right: auto; background-color: #fff;}
ol.liston li{ font-family: "Noto Serif JP", serif; list-style: decimal; margin-left: 1.5em; padding-left: 0.5em; color: #000; font-weight: 700; font-size: var(--fontsize-m);}
ol.liston > li{ margin-top: 2em;}
ol.liston > li li{ margin-top: 10px;}
ol.liston li a{ color: #f00; font-weight: 400; font-size: var(--fontsize-m); font-family: "Noto Sans JP", sans-serif;}

ol.liston li span.title2{ color: #000; font-weight: 700; font-size: var(--fontsize-m);}
ol.liston li span.linktext{ font-size: 80%; margin-left: 1em; color: #f00; font-family: "Noto Sans JP", sans-serif;}
ol.liston li span.linktext::before{ content: "[ ";}
ol.liston li span.linktext::after{ content: " ]";}
.footer{ padding: 20px 0; background-color: #888; color: #fff; text-align: center; margin-top: var(--m-l);}
.caution{ max-width: 480px; width: 95%; padding: 2%; border-radius: 10px; margin: var(--m-s) auto 0 auto; background-color: #fff;}
.copyright a{ font-size: 82%;}

.gallery{ max-width: 1200px; width: 90%; margin: var(--m-m) auto; 
  display: grid; grid-template-columns: repeat(auto-fit,minmax(120px, 1fr)); column-gap: 10px; grid-row-gap: 10px;}