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

.lnav{ margin-top: 2.0em;}
.lnav *{ margin-top: 0;}
.lnav ul{ display: grid; gap: 2px 2%; grid-template-columns: repeat(5, 1fr); }
.lnav ul li{ flex: 1;}
.lnav a{ display: flex; background: #ae9466; color: #fff; text-decoration: none; padding: 0.7em 1.0em; line-height: 1.3; font-size: 86%; opacity: 0.5; font-size: 140%; text-align: center; height: 100%; align-items: center; justify-content: center;}
.lnav a.active{ opacity: 1;}
.lnav a span{}
@media screen and ( max-width: 480px ) {
  .lnav ul{ grid-template-columns: repeat(2, 1fr);}
}

.fig_addnote{ position: relative;}
.fig_addnote img{ display: block;}
.fig_addnote figcaption{ display: block; margin: 0; padding: 0.7em; position: absolute; right: 0; bottom: 0; font-size: 77%; color: #fff;}

.items{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.0em;}
.items.items03{ grid-template-columns: repeat(3, 1fr);}
.items.items02{ grid-template-columns: repeat(2, 1fr);}
.items .colspan02{ grid-column: span 2; }
.items .rowspan02{ grid-row: span 2; }
.items figure{ display: block;}
.items figure img{ display: block;}
.items h3{ text-align: center; font-size: 116%; line-height: 1.5;}
.items .btitle{ text-align: left; border-bottom: solid 1px #666;}
.items p{ margin: 1.0em 0 0 0; font-size: 93%; line-height: 1.5;}
.items .caption{ font-size: 86%;}
@media screen and ( max-width: 480px ) {
  .items,
  .items.items03{ grid-template-columns: repeat(2, 1fr); gap: 0 1.0em;}
}

.gridflex{ display: grid; grid-auto-columns: grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 2%;}
@media screen and ( max-width: 480px ) {
  .gridflex{ display: block;}
}

.flowguide{}
.flowguide article{ border: solid 1px #ae9466; padding: 1.5em;}
.flowguide h3{ margin: 0; font-size:108%; color: #ae9466; font-weight: 600;}
.flowguide p{ margin: 1.0em 0 0 0; font-size: 93%; line-height: 1.5;}