a {
     text-decoration: none;
 }

 a:link {
     color: #ffffff;
 }

 a:visited {
     color: #ffffff;
 }

 a:hover {
     color: #ffff00;
 }

 #menu {
     color: #ffffff;
 }

 #menu a:link {
     color: #ffffff;
 }

 #menu a:visited {
     color: #c0c0c0;
 }

 #menu a:hover {
     color: #ffff00;
 }

 h1 {
     font-size: 3vw;
 }

 h1 a {
     font-size: 3vw;
 }

 h2 {
     padding-top: 10px;
     display: block;
     border-top: 2px solid #808080;
 }

 /*斎藤秋圃*/

 div.index {

     font-size: 80%;
 }

 div.index a:link {
     color: #ffffff;
 }

 div.index a:visited {
     color: #c0c0c0;
 }

 div.index a:hover {
     color: #ffff00;
 }

 p.text01 a:link {
     color: #0000ff;
 }

 p.text01 a:visited {
     color: #800080;
 }

 p.text01 a:hover {
     color: #ffff00;
 }

 div.label a:link {
     color: #0000ff;
 }

 div.label a:visited {
     color: #800080;
 }

 div.label a:hover {
     color: #ffff00;
 }

 span.italic {
     font-style: italic;
 }

 .small {
     text-align: left;
     font-size: 80%;
 }

 .big {
     font-size: 120%;
 }

 .smaller {
     text-align: left;
     font-size: 60%;
 }

 .small_center {
     text-align: center;
     font-size: 80%;
 }

 .small_white {
     font-size: 80%;
     background: #ffffff;
 }

 .white {
     color: #ffffff;
 }

 .strong_red {
     color: red;
     font-weight: bold;
 }

 body {
     background: #aab9a8;
 }

 body.top {
     background: #8b0000;


 }

 #menu {

     background: #8b0000;
 }

 #menu li {
     text-align: left;
     list-style-type: none;
 }



 /*メニュー画像*/
 #contents {
     margin: 40px 0 0 10px;
     grid-gap: 5px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(4, 1fr);
 }

 .a {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
 }

 .b {
     grid-column: 2 / 3;
     grid-row: 1 / 2;
 }

 .c {
     grid-column: 1 / 2;
     grid-row: 2 / 3;
 }

 .d {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
 }

 .e {
     grid-column: 1 / 3;
     grid-row: 3 / 4;
 }

 /*恵斎と秋圃　図柄を含めた図柄･筆法の模倣*/
 .before_after_image > img {
     margin: 0px auto;
     max-width: 100%;
 }

 .before_after_arrow {
     position: relative;
     width: 60px;
     height: 60px;
     color: #808080;

 }

 .before_after_arrow:before,
 .before_after_arrow:after {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     content: "";
 }

 .before_after_arrow:before {
     right: -50px;
     width: 0px;
     height: 0px;
     border: 40px solid transparent;
     border-left: 50px solid currentColor;
 }

 .before_after_arrow:after {
     left: -10px;
     width: 40px;
     height: 40px;
     background-color: currentColor;
 }


 .zoom {
     text-align: center;
 }



 /*画像リスト*/
 .cssgrid {
     text-align: center;
     margin-top: 50px;
     width: 80%;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-auto-rows: 1fr;
     grid-gap: 0.3em;
     padding: 0.3em 0.3em 0;
     margin: 0;
     justify-content: start;
 }

 .cssgrid > div {
     vertical-align: top;
     overflow: auto;
     min-width: 0;
     padding: 0;
     font-size: 90%;
     height: auto;

 }

 .cssgrid > div > img {}

 /*全頁画像*/
 .csslist {
     text-align: center;
     margin-top: 50px;
     width: 80%;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
     grid-auto-rows: 1fr;
     grid-gap: 0.3em;
     padding: 0.3em 0.3em 0;
     margin: 0;
     justify-content: start;
     flex-flow: column-reverse nowrap;
 }

 .csslist > div {
     vertical-align: top;
     overflow: hidden;
     min-width: 0;
     padding: 0;
     font-size: 90%;
     height: auto;

 }
   /*利用上の注意*/
   .middle {
   vertical-align:middle;
   margin:0 5px;
}

 .csslist > div > img {}

 @media only screen and (max-width: 767px) {

     h1 {
         font-size: 4vw;
     }

     .gazou {
         display: flex; 
     }
  .gazou2 {
   display: flex; 
   flex-direction:column;
     }
    .small_center {
     text-align: left;
     font-size: 80%;
 }

     /*恵斎と秋圃　図柄を含めた図柄･筆法の模倣*/
     .before_after_arrow {
         margin: 30px auto;
         transform: rotate(90deg);
     }

     .before_after {
         padding: 10px 0px;
         border-bottom: 2px solid #808080;
         text-align: center;
     }

     dd {

         margin-bottom: 20px;

     }

     /*画像縮小*/
     .zoom {

         width: 100%
     }

     .zoom img {

         width: 90%;
         height: auto;
     }

     /*全頁画像詳細ページ*/
     .frame {
         margin: 0;
         display: block;
         width: 100%;
     }

     .pager div {
         float: left;

     }
     .pager div.pager_back {
           text-align: left;
     }

     .pager div.pager_forward {
         text-align: right;

     }

     .zoom2 {

         width: 90%
     }

     .zoom2 img {

         width: 100%;
         height: auto;
     }
  
   /*横長画像縮小*/
   img.small {
   
   max-width:100%;
   height:auto;
   }
    /*講演会 画像拡大*/
  .kan {
       overflow:auto;
       }
  .kan img {
     max-width:120%;
     height:auto;
       }

 }

 @media only screen and (min-width: 768px) {
     h1 {
         font-size: 24px;
     }

     h1 a {
         font-size: 24px;
     }

     #wrap {

         overflow: hidden;
         height: auto;
         background: #aab9a8;
     }

     #menu {
         width: 20%;
         background: #8b0000;
         color: #ffffff;
         padding-left: 20px;
         padding-bottom: 50px;
         float: left;
     }

     .title {
         text-align: center;
         padding: 30px 20px 20px;
     }

     .label {
         text-align: center;
     }


     #menu ul {
         padding: 15px 5px;
         margin: 0;
     }

     #menu li {

         line-height: 3em;

     }

     #menu div.pagemenu li {

         line-height: 1.5em;

     }


     #contents {
         width: 400px;

         float: left;
     }

     main {
         width: 75%;
         padding-left: 10px;
         float: left;
     }

     p.text01 {

         line-height: 145%
     }

     img.yohaku {
         margin: 0 10px;
     }

     .label {
         overflow: hidden;
         width: 90%;
         margin: 0;
         padding: 0;
         width: 90%;

     }

     .label_left {
         margin-top: 20px;
         width: 50%;
         float: left;
     }

     .label_right {
         margin-top: 20px;
         text-align: center;
         width: 40%;
         float: left;
     }

     .gazou {
         display: flex;
         
     }
       .gazou2 {
         display: flex;
           justify-content:center;
     }

     .gazou,.gazou2 a {
         padding: 5px;
     }

     p.text01 {
         clear: both;
     }

     p.text02 {
         clear: both;
     }

     /*文章内画像回り込み*/
     div.right_position {
         margin-right: 30%;
         float: right;
     }

     /*恵斎と秋圃　図柄を含めた図柄･筆法の模倣*/

     .title2 {
         float: left;
         text-align: center;
         width: 70%;
     }

     .before_after_label {
         padding: 10px 0;
         border-bottom: 2px solid #808080;
         border-top: 2px solid #808080;
     }

     .before_after {
         width: 100%;
         display: flex;
         justify-content: space-between;
         align-items: center;
         position: relative;
         padding: 10px 10px 30px 0px;
         border-bottom: 2px solid #808080;
     }

     .before_after_image {
         width: calc(50% - 60px);
     }

     .before_after_arrow {
         position: absolute;
         top: 30%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
     }

     /*注釈*/



     dt {
         float: left;
     }

     dd {
         margin-left: 80px;
         margin-bottom: 20px;

     }

     .material {
         display: block;
     }

     .material > div {
         float: left;
         width: 25%;
     }




     .click {
         clear: both;
     }

     /*全頁画像紹介ページ*/
     .flex-2 {
         display: -webkit-flex;
         display: flex;
         justify-content: center;

     }

     .flex-2 div {
         padding: 10px;
     }

     /*全頁画像詳細ページ*/

     div.label > div.pager {
         width: 100%
     }
 }

 .pager div {
     float: left;

 }

 .pager div.pager_back {
     width: 20%;
     text-align: left;
 }

 .pager div.pager_forward {
     width: 20%;
     text-align: right;
 }

 .pager_center {
     width: 60%;
 }

 .zoom2 {

     width: 100%;
     text-align: center;
 }

 }