*{ padding: 0; margin: 0; }

/*____全体レイアウト____*/
body {
  background-color: #a7c7e0;
  display:grid;
  grid-template-rows: minmax(0,auto) minmax(262px,max-content) minmax(0,auto);
  column-gap: 0;
  row-gap: 0;
}
main{ background-color: #fff; }

/* メインリンク（各カテゴリ） */
nav { position: relative; width: 100%; }
nav ul li.now { background-color: #369; }
nav > ul { display: table; table-layout: fixed; text-align: center; width: 100%; }
nav > ul > li { display: table-cell; list-style: none; line-height: 2; font-weight: bold; background-color:#59d; }
nav > ul > li > a { display: block; padding: 8px 0; color: #fff; text-decoration: none; font-size: 14px;  }
nav > ul > li:hover { background: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 4px), linear-gradient(#4174e1, #396cd9); }
nav ul li > div { display:none; } /* マウスオーバーしていないときは非表示 */

/* 各カテゴリページのメインリンク */
header .logo{ line-height: 1; width:100%; position:relative; } 
header .logo img{ max-width: 100%; height: auto; width: 100%; vertical-align: top; }
header .logoe{ line-height: 1; width:100%; position:relative; } 
header .logoe img{ max-width: 100%; height: auto; width: 100%; vertical-align: top; }

/* 記事 */
ol li{ list-style:none; }
.textBox {
  background-color:white;
  margin : 12px 10px 0 10px;
  border: 3px double #307EAE;
  padding: 12px;
}
.textBox a{ text-decoration: underline; color:#444; }
.textBox a:hover { background-color:#339; color:#fff; }
main.article h1{
  padding: 10px;
  margin: 12px 10px 0 10px;
  box-shadow: 0 0 1px 1px #6495ed, 0 0 3px 2px;
  border-radius: 5px;
  background-image: linear-gradient(#f0f8ff ,#87cefa);
  font-size: 180%;
}
main.article h1 span{
  border-left: solid 5px #307eae; padding-left: 10px; margin-left: 5px;
}

main.article h2{
    font-size: 140%;
    line-height: 1;
    background: url(./img/barbg1.gif);
    border-color: #307eae;
    border-style: solid;
    border-width: 1px 1px 1px 6px;
    padding: 5px;
    margin:16px 16px 10px 16px;
}

main.article h3{
    margin: 12px 8px 4px 8px;
    width: 90%;
    font-size: 110%;
    border-left: 2px solid #00A651;
    border-bottom: 1px dotted #00A651;
    padding-left: 12px;
}

main.article ul{
  margin-left:2.5em;
}
main.article ul li{
  margin:2px;
  padding-right:1em;
}

main.article table{
  width:95%;
  margin:12px auto 0px auto;
  text-align:center;
  font-size:1.3em;
}
main.article th{
  padding-right:.7em;
  border-right:dotted 1px #666;
}

main.article td{
  width:15%;
  font-size:1.2em;
  font-weight:800;
}

main.article table a{
  display:block;
  padding:8px;
}

main.article article{
  margin: 14px 12px 0 12px;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 0 1px 1px #6495ed, 0 0 3px 2px;
  background-color: #fff5ee;
}

main.article a {
  color: #35a;
  text-decoration: underline;
}

main.article a:hover {
  color:#f55;
}

/*___フッター部分ここから___*/
footer article{
  padding :7px;
  text-align:center;
  background-color: #d8e0e7; 
}
  /*__トップへ戻るボタンここから__*/
  #gotopBox{
    display: block;
    position: fixed; right: 16px; bottom: 64px; height: 40px; width: 40px;
    text-align: center; font-size: 25px; color: #396cd9;

    background: #e4e3e2;
    background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#d3cecd));
    background: -moz-linear-gradient(top,  #eaeaea,  #d3cecd);
    background: -o-linear-gradient(top,  #eaeaea,  #d3cecd);
    background: -ms-linear-gradient(top,  #eaeaea,  #d3cecd);
    background: linear-gradient(top,  #eaeaea,  #d3cecd);

    border: 1px solid #dcd9d8;
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
    -moz-box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
    box-shadow: inset 0 2px 1px rgba(255,255,255,0.6), 0 0 1px #c7c5c1;
  }
  #gotopBox:hover {
    background: #eaeaea;
    background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#e4e3e2));
    background: -moz-linear-gradient(top,  #eaeaea,  #e4e3e2);
    background: -o-linear-gradient(top,  #eaeaea,  #e4e3e2);
    background: -ms-linear-gradient(top,  #eaeaea,  #e4e3e2);
    background: linear-gradient(top,  #eaeaea,  #e4e3e2);
    -webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 1px rgba(0,0,0,0.1);
    border-bottom:none;
  }
  #gotopBox:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
  #gotopBox a{ text-decoration: none; display:block; color:#000; }
  #gotopBox a:hover{ color: #e66; }
  /*__トップへ戻るボタンここまで__*/

/*___フッター部分ここまで___*/

/*____全体レイアウトここまで____*/

/*____PC用レイアウトここから____*/
@media screen and (min-width: 801px)
{
  /* 全体 */
  body  { grid-template-columns: 8% 3fr minmax(400px,1fr) 8%; }
  header{ grid-column: 2/4; grid-row: 1/2; }
  main  { grid-column: 2/3; grid-row: 2/3; }
  footer{ grid-column: 2/4; grid-row: 3/4; }

  main.article{ grid-column: 2/4; grid-row: 2/3; padding-bottom:12px; }

  /* 各カテゴリページではロゴの左上をクリックするとトップページに戻れるようにしています */
  header .logo figcaption{ position:absolute; top:4%; left:1.3%;display:block; height:56%; width:32%; }
  header .logo figcaption a { display:block; height:100%; width:100%; }
  header .logoe figcaption{ position:absolute; top:4%; left:1.3%;display:block; height:69%; width:52%; }
  header .logoe figcaption a { display:block; height:100%; width:100%; }

nav ul li > div {
  padding-top: 8px;
  position: absolute; top:100%; left:0; width:100%; background-color:#fff; z-index:118;
  border-bottom: 52px solid rgba(144,144,144,1);
}

nav ul li > div ul { list-style: none; margin: 0px;}
nav ul li > div > ul { width:calc(100% - 20px); }
nav ul li > div > ul > li{ width:100%; margin-bottom:8px; display:inline-block; transition: .8s; }
nav ul li > div > ul > li a { text-decoration:none; color:#000; display:block; }
nav ul li > div > ul > li:hover > a { background-color:#888; }
nav ul li > div > ul > li > ul { margin-left:15px; text-align:left; }
nav ul li > div > ul > li > ul >li a:before {
  display:inline-block;
  content:  url(../img/li.png);
  vertical-align:sub;
  padding-right: 4px;
}
nav ul li > div > ul > li > ul >li > a { padding-left:20px; }
nav ul li > div > ul > li > ul >li > a:hover { text-decoration:underline; }

  /* ドロワー（最上段メニュー） */
  .drawer                        { background-color: #396cd9; display: flex; align-items: center; font-size:0.9em; padding:5px 0 5px 12px;}
  .drawer li                     { list-style: none; padding-right:12px; text-align: center; }
  .drawer li:last-child          { margin-left: auto; }
  .drawer li a                   { display: block; color: #fff; text-decoration: none; }
  .drawer li a:hover             { color: #f60; }
  .navtext-container, .navtext, .nav-t, .navbtn, .navicon { display:none; } /* スマホ用メニューを消しておく */

  /* サイトマップ */
  main.article .sitemap { column-count:3; column-gap:12px; }

  /* 記事 */
.photCaption {
    float:left;
    font-size: 75%;
    line-height: 1;
    width: 200px;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(238, 238, 238);
    border-image: initial;
    padding: 5px;
    margin-right:12px; 
    border-radius: 5px;
    height:100%;
}

  main.article .itemArea > ul { column-count:2; column-gap:0; }
  main.article .itemArea > ul > li { padding:6px; page-break-inside: avoid; break-inside: avoid; }

.itemarea{
  padding:0 12px 0 8px;
  width:100%;
}

  main.article .itemArea   { position: static; padding: 10px 0 15px 20px; width: calc(100% - 200px); height: auto; }
  main.article .itemArea h2{ margin-bottom:10px; }
  main.article .itemArea ul { list-style:none; margin-top:4px; }

  /* 画像の大きさ */
  main.article .photoCaption{ position: sticky; width:200px; }
  main.article .photoCaption img{ box-shadow: 0 0 2px 2px #eee; border:solid 4px #fff; width: 200px; }

}
/*____PC用レイアウトここまで____*/

/*____スマホ用レイアウトここから____*/
@media screen and (max-width: 800px)
{
  /* 全体 */
  body  { grid-template-columns: 100%; }
  header{ grid-column: 1/2; grid-row: 1/2; }
  main  { grid-column: 1/2; grid-row: 2/3; }
  footer{ grid-column: 1/2; grid-row: 4/5; }
  main.article{ grid-column: 1/5; grid-row: 2/3; padding-bottom:12px; }

  /* ヘッダー画像（大ロゴ） */
   /* 文字サイズ設定や検索窓は隠す */
  header figure.logo { display:none; } /* 各カテゴリページの大ロゴは隠す */

  /* ロゴタイトル */
  main .logotitle figcaption { font-family: "游明朝"; font-size: 4.5vw; }
  main .logotitle figcaption > span:nth-of-type(1) { position: absolute; top:21%; left:24%; }
  main .logotitle figcaption > span:nth-of-type(2) { display:none; } /* キャッチコピーを隠す */

  /* メインリンク（各カテゴリ） */
  nav > ul > li { float:left; width:50%; }  /* 半分にして */
  nav > ul > li:nth-child(2n+1) { clear: both; } /* 2つごとに折り返して2列に並べる */

  /* ドロワー（最上段メニュー） */
  nav, main, footer,div.hako { position:relative; top:52px; } /* メニューの高さ分下げる */

  .nav-t{ display:none; } /* チェックボックスを消す */
  .headermenu { position:fixed; width:100%; height:52px; z-index:118; }
  .navtext{
    position:absolute;
    width:100%; height: 52px;
    display: flex;
    justify-content:center;
    align-items: center;
    background-color: rgb(55,55,55);
  }
  .navtext a { text-decoration:none; letter-spacing: 4px; font-size: 20px; color:#ddd; }
  .navtext a:hover { color:#f60; }

  .drawer{
    position: absolute; top:0;
    width:100%; height:auto;
    margin-top:52px; /* タイトルの高さ分下げる */
    background:rgba(55,55,55,.9);
    transform: scale(1,0);
    transform-origin:top;
    display: flex;
    flex-direction:column;
  }
  .drawer li {
    list-style:none;
    width:100%; height:100%;
    background-color:#333;
    border-top: 1px solid rgb(75,75,75);
    margin: 0 1px;
  }
  .drawer a{
    display:block; margin: 5px; padding: 16px;
    text-align:center; text-decoration:none; letter-spacing: 2px; color:#ddd;
   }
  .drawer a:hover{ background:rgba(225,225,225,.7); color:#fff; }

  /* クリックしたらメニューを出す */
  .drawer a, .drawer li { opacity: 0; }
  .nav-t:checked ~ .drawer{ transform: scale(1,1); transform-origin:top; } 
  .nav-t:checked ~ .drawer a,
  .nav-t:checked ~ .drawer li { opacity:1; transition: .3s; }
  /* ハンバーガーの位置決め */
  .navbtn{ display:inline-block; position: relative; cursor: pointer; padding: 24px 14px; }
  .navicon, .navicon:before, .navicon:after { transition: .3s; display: block; background: #ddd; }
  /* 真ん中の棒 */
  .navicon{ position: relative; height: 3px; width: 26px; }
  /* 上と下の棒 */
  .navicon:before, .navicon:after { content:""; position: absolute; height:100%; width:100%; }
  .navicon:before  { top: 9px; }
  .navicon:after{ bottom: 9px; }
  /* クリックすると棒が回転して×マークになる */
  .nav-t:checked ~ .navbtn .navicon { background-color:rgb(55,55,55); }
  .nav-t:checked ~ .navbtn .navicon:before{ transform:rotate(-45deg); }
  .nav-t:checked ~ .navbtn .navicon:after { transform:rotate(45deg); }
  .nav-t:checked ~ .navbtn:not(.steps) .navicon:before  { top:0; }
  .nav-t:checked ~ .navbtn:not(.steps) .navicon:after{ bottom:0; }

  /* サイトマップ */
  main.article .sitemap { column-count:1; }

  /* 記事 */
.photCaption {
    font-size: 75%;
    line-height: 1;
    width: 200px;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(238, 238, 238);
    border-image: initial;
    padding: 5px;
    border-radius: 5px;
    margin-top: 7px;
    height:100%;
}
  main.article .kiji { flex-direction:column-reverse; }

.itemarea{
  padding:0 12px 0 8px;
  width:calc(100% - 16px);
}

  main.article .itemArea > ul { column-count:1; }
  main.article .itemArea   { position: static; padding: 10px 0 15px 20px; width: calc(100% - 100px); height: auto; }
  main.article .itemArea h2{ margin-bottom:10px; }
  main.article .itemArea ul { list-style:none; margin-top:4px; }

  /* 画像の大きさ */
  main.article .photoCaption{ position: sticky; width:100px; }
  main.article .photoCaption img{ box-shadow: 0 0 2px 2px #eee; border:solid 4px #fff; width: 100px; }


}
/*____スマホ用レイアウトここまで____*/