*{ 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, aside{ background-color: #fff; }

  aside .rightbtns { column-count: 2; column-gap: 3px; margin-bottom:12px; }
  aside .rightbtns li { page-break-inside:avoid; break-inside:avoid; }


/* メインリンク（各カテゴリ） */
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; }

/* サイドメニュー表示設定 */
  /* 矢印の描画（共通）ここから */
  aside li{ margin-bottom: 3px; display:block; position:relative; }
  aside li:after{
    content: " "; display: inline-block;
    position: absolute; right: 8px; bottom: 0.5em; width: 6px; height:6px;
    border-bottom: 1px solid #333; border-right: 1px solid #333; transform: rotateZ(-45deg)
  }
  /* 矢印の描画（共通）ここまで */

  /* 航行警報・水路通報・灯台表・水路誌 ここから */
  aside .topinf {
    background-color: #396CD9;
    background-image: url(../img/top-rightinf.jpg);
    background-repeat: no-repeat;
    background-position: 1px;
    padding-left: calc(30% + 3px);
    padding-top: 4px;
    margin-bottom: 6px;
    line-height:1.1;
    border-width: 5px 0 5px 0; border-style: solid; border-color: #B7B7B7;
    list-style-type: none;
    font-weight:bold;
  }
  aside .topinf a { text-decoration: none; color:#fff; display: block; padding:2px; }
  aside .topinf a:hover { background-color: #ffeeca; color:#f00; }
  /* 航行警報・水路通報・灯台表・水路誌 ここまで */

  /* サイドメニューの構成 ここから */
  aside .rightbtns{ margin-bottom:8px; }
  aside .rightbtns li {
    height:auto;
    overflow: hidden;
    aspect-ratio: 225/70;
    width:calc(100% - 2px);
    line-height:1;
    border:1px solid #a6c7e0;
  }
  aside .rightbtns a span{
    text-align: right;
    font-size:0.7em;
    text-decoration: none; color:#44c;
    position: absolute; right: 0px; bottom: 0px;
    padding: 4px 18px 4px 0;
    width: calc(100% - 18px);
    background-color: rgba(255, 255, 255, 0.7);
  }
  aside .rightbtns img{ height:100%; width:auto; display:block; margin:auto; padding:auto;}
  aside .rightbtns a:hover img{ filter: alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; }
  /* サイドメニューの構成 ここまで */

/* お知らせと報道資料 */
main.toppage dl { margin: 8px; padding-bottom:8px; }
main.toppage a { text-decoration:none; color:#444; }
main.toppage dl a { color:#000; }
main.toppage dl a:hover { text-decoration:underline; }
main.toppage dl dd a:hover { background-color:#339; color:#fff; }

main.toppage dl > h2 {
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #b7b7b7;
  background-color: #a7c7e7;
  font-size:1.3em;
  padding-left: 0.7em;
  vertical-align:bottom;
  margin-bottom:5px;
}
main.toppage dl > h2 > a { height:100%;float:right; margin-right:10px;line-height: 2; font-size:0.7em; }
main.toppage dt { float:left; margin: 2px 6px 4px 6px; padding: 0 64px 0 6px; }
main .oshirase { background:url(../img/news-inf.gif) right no-repeat; }
main .mainte { background:url(../img/news-mainte.gif) right no-repeat; }
main .topics { background:url(../img/news-topics.gif) right no-repeat; }
main .press { background:url(../img/news-press.gif) right no-repeat; }
main.toppage dd { display:block; margin: 2px 0px 4px 0px; margin-bottom: 4px; padding-left: 20px; width:95%;}
main.toppage dd:before { content: url(../img/li.png); vertical-align: middle; padding-right:6px; }

/* 記事 */
.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;
    border-color: #307eae;
    border-style: solid;
    border-width: 1px 1px 1px 6px;
    padding: 5px;
    margin:16px 16px 10px 16px;
}

main.article article{
  margin: 14px 12px 0 12px;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 0 1px 1px #6495ed, 0 0 3px 2px;
  display: flex;
  background-color: #fff5ee;
}
main.article .itemArea h2{ margin-bottom:10px; border-bottom: dashed 1px #999; }
main.article article a {
    color: #35a;
    text-decoration: underline;
}
main.article article a:hover {
  color:#f55;
}

/* サイトマップ */
main.article .sitemap { display:block; font-size:1.5em; width:100%; }
main.article .sitemap li{ list-style:none; }
main.article .sitemap a { text-decoration:none; color:black; padding-left:20px; }
main.article .sitemap > li { page-break-inside: avoid; break-inside: avoid; padding: 8px; }
main.article .sitemap > li > a { display:block; background-color:#59d; }
main.article .sitemap > li > a: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); }
main.article .sitemap > li > div { font-size:0.7em; }
main.article .sitemap > li > div li:before{ content:"┣" }
main.article .sitemap > li > div li:last-child:before{ content:"┗" }
main.article .sitemap > li > div a:hover{ text-decoration:underline; }

/*___フッター部分ここから___*/
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; }
  aside { grid-column: 3/4; 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:hover > div { display:flex; justify-content:center; } /* マウスオーバーで表示 */

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; }

  /* 記事 */
  main.article .itemArea > ul {padding: 2em; column-gap:0; }
  main.article .itemArea > ul > li { padding:6px; page-break-inside: avoid; break-inside: avoid; }

  main.article .itemArea   { position: static; padding: 4px 0 12px 20px; width: calc(100% - 200px); height: auto; }
  main.article .itemArea ul { 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; }
  aside { grid-column: 1/2; grid-row: 3/4; }
  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列に並べる */

  /* サイドメニュー（右カラム） */
  aside { max-width:100%; padding: 0 10px 0 10px; }
  aside .rightbtns { column-count: 2; column-gap: 3px; margin-bottom:12px; }
  aside .rightbtns li { page-break-inside:avoid; break-inside:avoid; }

  /* ドロワー（最上段メニュー） */
  nav, main, aside, 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; }
  /* 記事 */
  main.article article{ flex-direction:column-reverse; }
  main.article .itemArea > ul { column-count:1; }
  main.article .itemArea   { position: static; padding: 0px 0 15px 6px; width: calc(100% - 12px); 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:300px; }
  main.article .photoCaption img{ box-shadow: 0 0 2px 2px #eee; border:solid 4px #fff; width: 300px; }


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