/* CSS Document */

/*ベース設定*/
html { min-height: 100%;  position: relative;}

body{
margin:0;				/*リセット推奨*/
padding:0;				/*リセット推奨*/
color:#003366;				/*通常のテキストカラー*/
font-size:16px;				/*フォントサイズ*/
font-weight:normal;			/*フォントの太さ普通*/
font-family:"Century Gothic","メイリオ","ＭＳ Ｐゴシック","Meiryo UI",sans-serif;
background-image:url(../img/bg1.gif);
background-repeat:repeat-y;
margin-left:32px;
}

/*各種リセット*/
p,h1,h2,h3,h4,h5,h6 {
 margin-top:0;		
}
img {
 vertical-align: bottom;
}
ul {
 margin:0;
 padding:0;
}

a {
color:#0099FF;				/*通常のリンクテキストカラーは薄いブルー*/
text-decoration:underline;
}
a:hover{
color:#FF9900;				/*マウスが乗った時の通常のリンクテキストカラーは補色のオレンジ*/
}
/*ベース設定end*/

/*一番おおもとの外の部分*/
#wrapper {
 	width:920px;			/*メニュー幅+2■、当初は884が鉄板*/
 	margin-left:auto;
 	margin-right:auto;
 	text-align:left;
					/*TEST background-color:#faebd7;*/
}

/*ヘッダー部分*/
#head{
	width:100%;
	height:auto;
  	display: flex;
	flex-direction: row-reverse;	/*モバイルでPOCをTOP右上に出すため敢えてここで*/
  	justify-content: space-between;	/*■*/
					/*TEST background : #f08080;*/
}

@media print,screen and (max-width: 640px) {	/*【スマホ用start】 */
#wrapper {				
 	width:100%;			/*■*/
 	margin-left:auto;
 	margin-right:auto;
 	text-align:left;
}

#head{
	width:100%;
	height:auto;		
  	display: flex;
  	flex-direction: column;		/*■*/
					/*TEST background: #ffb6c1;*/
}
}						/*【スマホ用end】 */


#head h1	{			/*パンくず2020h2に格下げしたのを2021SEO対策でh1に戻し*/
	margin:0;
	font-size:12px;
	color:#5f9ea0;
	font-weight:normal;
	}

#head div.home	{			/*PORTS OF CALL 2021h2は違和感あるのでただのクラスに格下げ*/
	margin:0;
	text-align:right;
	font-size:20px;
	color:#5f9ea0;
	font-weight:normal;		/*これはケスナ*/
	}
#head div.home a{			/* アンダーライン　PORTS OF CALLだけなし */
	text-decoration:none;
}

.stickytop {
	position: sticky;		/*2020wrapscroll.js使用する必要がなくなった*/
	position: -webkit-sticky;
    	top: 0;				/*ここは調整が必要になるかも*/
}

nav {					/*quoteに下を通らすために余裕をもって*/
    z-index:10;
}

/*本文*/

/*本文 ワールドTOPのみ、表の関係で字を14ptに 2025asuka000 からは参照やめ、mainに統一*/
#topmain	{
	font-size:14px;
	text-align:left;
	clear:both;
}
#topmain p	{
	font-weight:bold;		/*000のように14pxメイン用の見出し浮環*/
	background:url(../img/float.gif) no-repeat center left;
	text-indent:20px;
	font-size:16px;
}


#main	{
	text-align:left;
	clear:both;
}

@media print,screen and (min-width: 640px) {	/*【PC用start】これがないとスマホ用と混ざって壊れる */
#main h2 {				/*自動だと大きくなるので本文と同じサイズに*/
	margin-top: 20px;
	font-size: 100%;
	display: flex;			/*■スマホではdiv区切りでアイコンと行が変わるようにこの行はない*/
	align-items: center;		/*縦位置を文字とimgで揃えるため追加すると、スマホの時センタリングになるね？*/
}
}					/*【PC用end】 */

@media print,screen and (max-width: 640px) {	/*【スマホ用start】 */
#main h2 {				/*自動だと大きくなるので本文と同じサイズに*/
	margin-top: 20px;
	font-size: 100%;
	display: flex;
	flex-direction:column;		/*スマホでは要素を立て並びに*/
	align-content:space-between;
}
}						/*【スマホ用end】 */

#main p.float	{			/*class追加*/
	font-weight:bold;		/*通常の乗船記内用見出し浮環*/
	background:url(../img/float.gif) no-repeat center left;
	text-indent:24px;
}


#main p.funnel	{
	font-weight:bold;		/*通常の乗船記内用見出し郵船ファンネル*/
	background:url(../img/asukaf.gif) no-repeat center left;
	text-indent:24px;
	margin-top: 1em;			/*上の塊と1行余白2020追加*/
}


        #main p + div {  			/*見出しPの直後のdivだけ詰める設定*/
	margin-top: -12px;
	}

div.funnel	{			/*浮き輪のほか、ファンネルの見出しdiv*/
	font-weight:bold;
	background:url(../img/asukaf.gif) no-repeat center left;
	text-indent:20px;
	margin-top: 12px;
	margin-bottom: 6px;
	font-size:16px;
}

div.poc	{				/*浮き輪のほか、アンカーのdiv*/
	font-weight:bold;
	background:url(../img/poc.gif) no-repeat center left;
	text-indent:20px;
	margin-top: 12px;
	margin-bottom: 6px;
	font-size:16px;
}

div.float	{			/*浮き輪pではないdiv用*/
	font-weight:bold;
	background:url(../img/float.gif) no-repeat center left;
	text-indent:20px;
	margin-top: 12px;
	margin-bottom: 6px;
	font-size:16px;
}

					/*蛍光マーカー風のクラス*/
.mkrpink	{
	background:linear-gradient(to bottom, rgba(255,153,204,0) 20%, #ff99cc 100%);
}

.mkryellow	{
	background:linear-gradient(to bottom, rgba(255,255,102,0) 20%, #ffff66 100%);
}

.mkrblue	{
	background:linear-gradient(to bottom, rgba(128,255,255,0) 20%, #80ffff 100%);
}

.mkrgreen	{
	background:linear-gradient(to bottom, rgba(102,238,102,0) 20%, #66ee66 100%);
}

/*フッター*/
footer	{
	width: 920px;			/*wrapperと同じに合わせるモバイルは100%■*/
	font-size:10px;
	text-align: center;
	height:15px;			
	bottom: 10px;
	background: #f5f5f5; 
	margin: auto;
}

@media print,screen and (max-width: 640px) {	/*【スマホ用start】 */
footer	{
	width: 100%;			/*■*/
	font-size:10px;
	text-align: center;
	height:15px;			
	bottom: 10px;
	background: #f5f5f5; 
	margin: auto;
}
}						/*【スマホ用end】 */

img	{				/*画像の枠線はデフォルト非表示*/
	border:none;
}

img.border	{			/*画像の枠線を出す場合のクラス*/
	border:solid 1.5px;
}

img.center {				/*class 画像のセンタリング*/
	display:block;
	margin: auto;			/*autoでセンタリングになっている*/
}

img.left {				/*class 画像左置き用*/
	float: left;
	margin: 10px;
}

img.topleft {				/*class 画像左置き・上マージンなし用*/
	float: left;
	margin: 2px 10px 10px 10px;
}

img.right {				/*class 画像右置き用*/
	float: right;
	margin: 10px;
}

img.topright {				/*class 画像右置き・上マージンなし用*/
	float: right;
	margin: 2px 10px 10px 10px;
}

img.inline	{			/*class 192px画像横並び用、テキストが周りこまない*/	
	margin: 10px;	
}

@media print,screen and (min-width: 640px) {	/*【PC用start】これがないとスマホ用と混ざって壊れる */
/*flexbox新装2020*************/

/* 親要素 */
.items {
  display: flex;
  justify-content: center;		/*横方向の位置をそろえる、他だと軸が合わない*/
  align-items: center;			/*縦方向の位置をそろえる*/
}

.items img {				/*flexbox内は画像にマージンを付ける*/
  margin: 20px 20px 10px 20px;		/*下だけ少な目*/
}

/* 子要素 */
.items .item1 {
  flex-basis: 300px;			/*item1sベースの300*/
  					/*TEST background: #f0f8ff;*/
}

.items .item1t {
  margin: 10px 0px;			/*スマホで◆縦の場合先に写真を出すためのorder指定用*/
  flex-basis: 300px;
}

.items .item2 {
  flex-basis: 600px;			/*item1x2* 592/
  					/*TEST background: #ffffe0;*/
}
.items .item2t {			/*スマホ◆縦の場合先に写真を出すためのorder指定用*/
  flex-basis: 600px;
}

.items .item3 {
  flex-basis: 900px;			/*item1x3* 888*/
  margin: 20px 0px;					
  					/*TEST background: #b0c4de;*/
}
}					/*【PC用end】これがないとスマホ用と混ざって壊れる */

@media print,screen and (max-width: 640px) {	/*【スマホ用start】 */
/*flexbox新装2020*************/
/* 親要素 */
.items {
  display: flex;
  flex-direction: column;			/*スマホでは縦に並べる■*/
  justify-content: space-between;		/*横方向の位置をそろえる*/
  align-items: center;				/*縦方向の位置をそろえる*/
  border-bottom: dotted 1px #dcdcdc;		/*スマホのみ薄く区切り線*/
}

.items img {					/*　flexbox内は画像にマージンを付ける */
  margin: 20px;
}

/* 子要素 */
.items .item1 {
  margin: 10px 0px;				/*スマホ◆*/
						/*TEST background: #fbf4b3;汎用コンテナ画像用*/
}

.items .item1t {
  margin: 10px 0px;				/*スマホ◆TXT入力用*/
  order: 9;					/*右に2枚画像がある場合縦にしたとき字だけ最後になるよう正しくは3*/
}

.items .item2 {
						/*TEST background: #0099FF;*/
}

.items .item2t {				/*スマホ◆TXT入力用*/
   order: 9;					/*右に画像がある場合縦にしたとき字が最後になるよう正しくは多分2*/
}

.items .item3 {
  margin: 20px 0px;
  flex-basis:100%;
						/*TEST background: #FF9900;*/
}
	
div.items img {					/* flex内の画像はスマホ時上下に余白を付ける◆ */
  margin: 10px 0px 10px ;
  width: 100% ;
}

}						/*【スマホ用end】 */

.center{				/*2020センタリング汎用*/
  display: block;
  text-align: center;
}

/*テーブルスクロール用追加*/		/*2020画面が狭い時はスクロールバーを付ける*/
.scroll {
 width: 100%;
 overflow-y: hidden;
 overflow-x: auto;
 -ms-overflow-style: -ms-autohiding-scrollbar;
 -webkit-overflow-scrolling: touch;
}
 
table{					/*ちょっとオサレな感じのTEBLEに*/
 border-collapse: collapse;
 margin: 10px auto 20px ;
}
 
th,td{
 border: solid 1px #ccc;
 padding: 3px;
 white-space: nowrap;			/*全体的に改行しない*/
}
 
th{					/*基本使わない。背景灰色で自動的に太字*/
 background: #aaa;
 color: #fff;
}


/* 2021新装スマホでテーブルを縦にアレンジするCSS aria-labelで最初のtdを出すことも出来る */
@media print,screen and (max-width: 640px) {

table {}				/*table class="vertical"と指定する*/

    .vertical {
    width: 100%;
    table-layout:fixed;
}

   .vertical thead {
    display: none;
  }
  
   .vertical tr,
   .vertical td {
    display: block;
/*    white-space: normal;		ノーマルの方はnowrapになっているがこちらは折り返す場合*/
  }
  
  .vertical tr {
    border: 1px solid #dbe1e8;
    box-shadow: 2px 2px rgba(0, 0, 0, .1);
    margin-bottom: 10px;
    padding: 8px 8px 0;
  }
  
  .vertical td {
    border: none;
    border-bottom: 1px solid #dbe1e8;
    text-align: left;
  }

  .vertical td:first-child {
   color:#00bfff;
   font-weight:bold;
}

  .vertical td:last-child {
    border-bottom: none;
    background: #f5f5f5;
  }

  .vertical td::before {		/*1行目の表題を最初のtdに表示させるため*/
    content: attr(aria-label);
    display: inline-block;
    float: left;
    text-align: center;
    padding-right: 20px;
    white-space: nowrap;
  }
  
}

/* tw用CSSボタン*/
.btntw {				/*tw色青色ボタン*/
  display: inline-block;
  padding: 4px 10px;
	text-decoration: none;
	margin-right:4px;
	font-size: 14px;		/*indexは16px、prev nextは13px文字のサイズ*/
  border-radius: 6px;
  color: #ffffff;			/*フォント色*/
	background: #1da1f3;		/*▲ツイッター色*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); /*0.29*/
  border-bottom: solid 3px #5e7fca;	/*▲床の色*/
}
.btntw span {
  display:inline-block;
  transition: .5s;
}

.btntw:hover span {
  -webkit-transform: rotateX(360deg);
	transform: rotateX(360deg);
	color:#ffffff;　		/*リンクオレンジを防ぐため*/
}

.btntw .fa-twitter {
  text-shadow: 2px 2px 0px #4287d6;	/*▲フォントの影色*/
	font-size:24px;			/*ツイッターアイコンの*/
	color:#ffffff; 			/*リンクオレンジを防ぐため*/
}

/* tw用グレーCSSボタン*/
.btntwg {				/*twグレー転ボタン*/
  display: inline-block;
  padding: 4px 10px;
	text-decoration: none;
	margin-right:4px;
	font-size: 14px;		/*indexは16px、prev nextは13px文字のサイズ*/
  border-radius: 6px;
  color: #ffffff;			/*フォント色*/
	background: #b3b3b3;		/*▲ツイッター色をグレーに*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); /*0.29*/
  border-bottom: solid 3px #808080;	/*▲床の色はグレーの場合フォント影と同じに*/
}
.btntwg span {
  display:inline-block;
  transition: .5s;
}

.btntwg:hover span {
  -webkit-transform: rotateX(360deg);
	transform: rotateX(360deg);
	color:#ffffff;　		/*リンクオレンジを防ぐため*/
}

.btntwg .fa-twitter {
  text-shadow: 2px 2px 0px #808080;	/*▲フォントの影色はグレーの場合床と同じに*/
	font-size:24px;			/*ツイッターアイコンの*/
	color:#ffffff; 			/*リンクオレンジを防ぐため*/
}

/* 掲示板ほか汎用CSSボタンブルー（index.htmlと同じ青色）*/
.btnbbs {
  display: inline-block;
  padding: 4px 10px;
	text-decoration: none;
	margin-right:4px;

	font-size: 14px;		/*indexは16px、prev nextは13px文字のサイズ*/
  border-radius: 4px;
  color: #ffffff;			/*フォント色*/
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); 	/*init0.29*/
  border-bottom: solid 3px #5e7fca;
}
.btnbbs:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 掲示板ほか汎用CSSボタンブルー（index.htmlと同じ青色）*/
.btnbbsg {
  display: inline-block;
  padding: 4px 10px;
	text-decoration: none;
	margin-right:4px;

	font-size: 14px;		/*indexは16px、prev nextは13px文字のサイズ*/
  border-radius: 4px;
  color: #ffffff;			/*フォント色*/
  background-image: linear-gradient(#808080 0%, #cccccc 100%);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); 	/*init0.29*/
  border-bottom: solid 3px #808080;	/*▲床の色は濃いグレー*/
}
.btnbbsg:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

/* 202011 引用部分ブロック用 */
blockquote{
    position:relative;
    border:1px solid #a4c1d7;
    border-radius:10px;
    padding:20px 35px;
    background:#f6f6f6;
    z-index:0;			/*マイナスだとリンクが効かないので0にしてnavを10に*/
}

blockquote {
  margin: 0; 			/* ブラウザデフォルトの隙間をリセット */
}

blockquote:before{
    position:absolute;
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    content:'\f10d';
    font-size: 20px;
    color:#b3b3b3;
    top:10px;
    left:10px;
}
blockquote:after{
    position:absolute;
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    content:'\f10e';
    font-size: 20px;
    color:#b3b3b3;
    right:10px;
    bottom:10px;
}
blockquote cite {
    display: block;
    font-size: 0.8rem;
    text-align: right;
    color: #a4c1d7;
    padding-right:20px;
}

/*202101クリックすると展開する用*/
/*全体*/
.hidden_box {
    margin: 10px 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    text-align: center;
    margin: auto;
    padding: 10px 5px;
    position: relative;
    display: block;
    height: 18px;
    cursor: pointer;
    background: #eaf5ff; /*ボタン2025色変更。ホバー時も直す*/
    color: #1e90ff;	/*フォント2025色変更ドジャーブルー*/
    width:256px;	/*ボタン幅*/
/*    border-radius: 5px; ボタン角丸め*/
    transition: .5s;
}
/*アイコンを表示*/
.hidden_box label:after {
    display: inline-block;
    content: '\f078';
    font-family: 'Font Awesome 5 Free';
    padding-left: 5px;
    transition: 0.2s;
    font-weight:700;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    background: rgba( 234, 244, 255, 0.55 ); /*ホバー時ベース2025色変更*/
}

/*アイコンを切り替え*/
.hidden_box input:checked + label:after {
     content: '\f077';
     -ms-transform: rotate(360deg);
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     color: #1e90ff;
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.6s;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3); /*枠線*/
}

/*クリックで中身表示*/
.hidden_box input:checked + label + .hidden_show {
    padding: 20px 20px 0px;
    height: auto;
    opacity: 1;
}

/* 「続きを読む」以下をグラデーションで隠すボタン。戻るボタンでまた隠す202510 */
.cp_box1 {
  position: relative;
}
.cp_box1 input {
  display: none;
}
/*開くためのボタンとテキストを隠すグラデーションの設定*/
.cp_box1 label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  bottom: -10px;
  width: 100%;
  height: 4rem; 	/* ■グラデーションの高さ32px */
  cursor: pointer;
  text-align: center;
  /* 以下グラデーションは背景を自身のサイトに合わせて設定してください 白の場合はこれで良さげ */
  background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);
}
/* 開いた時にグラデーションを消す */
.cp_box1 input:checked + label {
  background: inherit;
}
.cp_box1 input:checked + label {
  /* display: none ; 閉じるボタンを消す場合コメントアウトを外す */
}
.cp_box1 .cp_container {
  overflow: hidden;
  height: 4rem; 	/* ■開く前に見えている部分の高さ 64px */
  transition: all 0.5s;
}
/*続きをよむボタン*/
.cp_box1 label:after,
.cp_box1 label::before {
  content: '';
  position: absolute;
  line-height: 2rem; 	/* ■ボタンの高さ */
}
.cp_box1 label:after {	/* ■ボタンのデザイン */
  z-index: 2;
  bottom: 20px;
  width: 12em;
  content: '続きを読む';
  color: #ffffff;
  background: #6495ed;	/* ■ボタン色 オリジナルは黒っぽかった#1b2538 */
  border-radius: 20px;
}
.cp_box1 label::before {
  position: absolute;
  bottom: 38px;
  left: calc(50% - 3.5em);
  z-index: 3;
  width: 10px;
  height: 5px;
  background: #ffffff;
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}
/*閉じるボタン*/
.cp_box1 input:checked + label:after {
  content: '閉じる';
}
.cp_box1 input:checked + label:before {
  left: calc(50% - 2.5em);
  transform: scale(1, -1);
}
.cp_box1 input:checked ~ .cp_container {
  height: auto;
  padding-bottom: 24px; /* ■閉じるボタンのbottomからの位置 */
  transition: all 0.5s;
}

/* 「続きを読む」ボタンを押したらピロっと下にテキストが出てくる202510
.cp_box2 {
  width: auto;
  margin: 30px auto;
}

/*続きを読むボタン*/
.cp_box2 label {
  font-weight: normal;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  margin: auto;
  padding: 0.3em 1em;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
  color: #6495ed;			/* フォント色 元はda3c41 */
  border: 1px solid #6495ed;		/* 縁取り色 */
  border-radius: 3px;
}
/*＋マーク*/
.cp_box2 label::after {
  position: absolute;
  content: '';
  right: 16px;
  width: 16px;
  height: 16px;
  background: #6495ed;			/* 背景色 */
  clip-path: polygon(0 40%, 40% 40%, 40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%);
}
.cp_box2 label:hover::after {
  color: #ffffff;			/* フォント色 */
}
/*hover*/
.cp_box2 label:hover {
  transition: all 0.3s;
  color: #ffffff;			/* フォント色 */
  background: rgba(100, 149, 237 ,0.7);	/* 背景色218, 60, 65 */
}
.cp_box2 label:hover::after {
  background: #ffffff;			/* 背景色 */
}
/*-マーク*/
.cp_box2 input:checked ~ label::after {
  background: #6495ed;					/* 背景色 */
  clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}
/*hover*/
.cp_box2 input:checked ~ label:hover::after {
  background: #ffffff;					/* 背景色 */
}
.cp_box2 div.cp_container2 {
  position: relative;
  z-index: 10;
  overflow: hidden;
  height: 0;
  margin-top: -1px;
}
.cp_box2 input:checked ~ div.cp_container2 {
  transition: height 0.5s ease-in-out;
}
/* 高さを設定 */
.cp_box2 input:checked ~ div.cp_container2 {
  height: auto;
}

.cp_box2 input {	/*2番目の要素にあった時はチェックボックスが隠れなかったので下におろした*/
display: none;
}



/*発注後11/16 h3のところボタン改変のため修正*/
/*ボタンのCSSをstyle2019から移植し文字サイズ修正*/
/*ボタンのCSSグレー版追加*/
/*2021アコーディオン展開用ボタン追加*/
/*2021パくずをh1にサイト名はただのdivに日付群をh2に修正*/
/*2021テーブル表題+2列スマホ用展開vertical追加*/


/* メニューのmarginとliをpをリセット */
#menu p {
  margin: 0;
}
#menu ul {
  list-style: none;
}
#menu a {
  text-decoration: none;
}

#page_top{					/*2020TOPに行くボタン新装*/
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #a4c1f4;				/*◆メニュー1層と同じ色に モバイルの方もなおすこと*/
  opacity: 0.8;					/*デフォは0.6だったけど薄過ぎたら上げる*/
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*色を変えられるCSSボタン*/		/*2020*/
#pagenavi .btnfwbk {			/*ページ送り用*/
  display: inline-block;		/*色はメニュー基本色と合わせるため、メニュー用このCSSで定義*/
  margin: 2px 0px 2px;			/*上下と詰まり過ぎないよう*/
  width:50px;
  text-align:center;
  padding: 2px;
  text-decoration: none;
  font-weight:bold;
  font-size:13px;
  border-radius: 4px;
  color: #ffffff;			/*フォント色、下の行は◆100%の方色をメニュー基本色と合わせる*/
  background-image: linear-gradient(#cee2ea 0%, #87ceeb 100%); /*◆0%の方はチャートで彩度を適度に薄くする*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);	
  border-bottom: solid 3px #6396aa;	/* ◆底の色は明度を下げる*/
}

/* ハンバーガメニューの子メニューの表示切替用チェックボックスを非表示に */
.cssacc {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
}

@media print,screen and (min-width: 640px) {	/* 640px以上の幅の場合に適応される【PC】 */

#menu {
	margin: 0px auto;			/*中央揃え*/
	width:918px;				/*882が144の時ピッタリ*/
}

#menu ul { /*リスト全体*/
list-style: none;
margin-top: -2px;
padding: 0;
font-family: "Century Gothic","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
list-style-type: none; 
}

#menu li { /*リストの1段目*/
margin-left: 1px;				/*もとはmargin-left:3px;のみ*/
margin-right: 2px;
float: left; 
min-width: 150px; 				/*リストの最小幅設定init144*/
white-space: nowrap;
}

#menu a,
#menu label { 					/*1段目のメニュー文字*/ 
font-size: 14px; 
line-height: 14px; 
color: #003f66;					/*◆メニュー文字色②次に選ぶ*/
text-decoration: none;
text-align: center; 				/*1段目は文字を中央合わせに*/ 
padding: 5px 10px; 
background-color: #87ceeb; 			/*◆背景色①最初に選ぶ*/
display: block; 
margin-bottom: 0;
}

#menu a:hover,
#menu label:hover {
color: #e69074;					/*◆マウスオン時の文字色④背景の補色系、薄かったら濃くする*/
background-color :#add8e6; 			/*◆マウスオン時の背景色③は①系の薄色*/
}  

#menu ul ul {  					/*2段目以降*/
padding-top: 2px;
display: none; 
position: absolute; 
z-index: 10;
}  

#menu ul ul a,
#menu ul ul label	{ 			/*2段目*/ 
font-size: 13px; 
line-height: 13px; 
color: #00264d;					/*2段目の◆◆メニュー文字⑥色は1段目と同じで良いかも*/
text-align: left; 				/*2段目以降は左寄せにもどす*/ 
border-top: solid 1px #97bbc7; 			/*2段目以降のメニュー枠上〇 薄め*/
border-right: solid 1px #103440; 		/*2段目以降のメニュー枠右□ 濃いめ*/
border-bottom: solid 1px #103440; 		/*2段目以降のメニュー枠下□ */
border-left: solid 1px #97bbc7; 		/*2段目以降のメニュー枠左〇 */
background-color: #71acc5; 			/*2段目の◆◆背景色⑤大人しい配色の濃色*/
} 

#menu li li {					/*2段目のリスト項目*/ 
margin-left: 0;
clear: left; 
position: relative; 
width: 100%;
filter: alpha(opacity=80); 
-moz-opacity: 0.8; 
}  

#menu ul ul ul { 				/*3段目以降*/
padding-top: 0;
top: 0; 
left: 100%; 
}  

#menu ul li:hover > ul,
.c-hd:hover >ul {  				/*リスト展開*/
display: block; 
}  

#menu li li  li{ 				/*3段目以降のリスト項目*/ 
min-width: 96px; 				/*リストの最小幅設定*/
}  


/*ページナビ*/
#pagenavi	{
	margin-bottom: 20px;			/*下写真とのスペース*/
	height:auto;
	width:100%;				/*100%にするとグイーンともっと右端に行ってしまう */
  	display: flex;
	justify-content: flex-end;		/*モバイルはcenter■*/
						/*TEST background: #009E96;*/
}

   .menu-trigger {				/*モバイル用のメニューは表示しない*/
      display: none;
      -webkit-appearance: none;
      appearance: none;
      border: none;
      background: transparent;
    }   
}						/*PC用設定END*/

/*モバイル用メニュー*/

@media screen and (max-width: 640px) {		/* 640pxまでの幅の場合に適応される【スマホ】 */ 
  .menu-trigger { 				/* ハンバーガーメニューのボタン */ 
    width: 40px;
    height: 36px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    outline: none;
    background-color: #fff; 			/* ボタンの背景色を変えたいときはここを変更■ */ 
    border-color: #9fd9f6; 			/* ボタンの枠の色を変えたいときはここを変更initb4b4b4■ */
    border-width: 1px;				/* 指定なく2pxになっていたので1pを指定*/
  }
  .menu-trigger,
  .menu-trigger span {
       display: inline-block;
       transition: 0.5s; 			/* ハンバーガー⇔×の切り替えスピードinit0.4 */ 
    }
  .menu-trigger span { 				/* 三本線の設定を変えたいときはここを変更 */ 
    position: absolute;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: #90b3f2;			/* 三本線の色init8a8a8a。pagenaviボタンと合わせてみた■*/
    transform: translate(-50%, -50%);
  }
  .menu-trigger span:nth-of-type(1) {
    top: 8px;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 50%;
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 6px;
  }
  .menu-trigger.active span:nth-of-type(1) {
    top: 49%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    bottom: 43%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .l-menu {/* メニュー展開時の背景の設定 */ 
    display: none;
    width: 83vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 90px 7% 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: -1;
  }
  .l-menu.active {
    display: block;
    z-index: 2;
  }
  .l-g-nav-list{
    display: block;
  }
  .l-menu li {
    width: 100%;
    line-height: 3;
    text-align: left;
    border-bottom: 1px solid #8a8a8a;;
  }
  .submenu { /* 子メニューのアコーディオンメニューは最初隠れている */ 
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding-left: 20px;
    transition: .5s;
  }
  .submenu li {
      border: none;
  } 
  #menu li p {
    position: relative;
  }
  .arrow {
    position: relative;
    display: block;
    color: #0099FF;
  }
  .arrow::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f107';
    font-size: 20px;
    position: absolute;
    top: 50%; right: 5px;
    transform: translateY(-50%);
  }
  .cssacc:checked + .arrow:after { /* 子メニューを表示時のアイコン回転 */ 
    transform: translateY(-50%) rotate(180deg);
  }
  .cssacc:checked + .arrow + .submenu { /* 親メニューを押したときに子メニューを表示 */ 
    height: auto;
    opacity: 1;
  }

  #pagenavi	{
    margin-bottom: 20px;			/*下写真とのスペース*/
    height:36px;				/*AUTOだったのをハンバーガに合わせてみた*/
    width:100%;					/*目いっぱい幅を取る*/
      display: flex;
    justify-content: center;			/*モバイルはこれ■*/
    align-items: center;			/*モバイルはこれ■*/
    width: 100%;				/*モバイルはこれ◆*/
  }
}