@charset "utf-8";
@import url("gnav.css");
/*
 * 目次（日本語サイト）
 ----------------------------------------
 * 1. container、flexボックス
 ----------------------------------------
 * 1-1 .container-xx
 * 1-2 .container-xx > .row
 * 1-3 .container-xx > .row > .col-x
----------------------------------------
 * 2. リストマーク
 ----------------------------------------
 * 2-1 スクエア矢印
 * 2-2 先頭横棒
----------------------------------------
 * 3. 表組
 ----------------------------------------
 * 3-1 外枠なし横罫
 * 3-2 
 ----------------------------------------
 * 4. リンク
 ----------------------------------------
 * 4-1 テキスト末尾　矢印
 * 4-2 テキスト末尾ダウンロードic
 * 4-3 テキスト末尾外部リンクic
 * 4-4 テキスト末尾PDFアイコン（拡張子pdfで自動付与）
 ----------------------------------------
 * 5. 画像
 ----------------------------------------
 * 5-1 ホバー時に背景画像をズーム
 * 5-2 ホバー時に画像をズーム
 * 5-3 画像切り替え（PC or SP）
 * 5-4 画像の位置調整
 ----------------------------------------
 * 6. ボタン
 ----------------------------------------
 * 6-1 primary
 * 6-2 secondary
 * 6-3 外部リンクボタン
 * 6-4 外部リンクボタン（Large）
 * 6-5 ダウンロードボタン
 * 66-6 ダウンロード（Large）
 * 6-7 ダウンロード（角丸）
 * 6-8 スクロールdown
 * 6-9 PAGE TOP
 ----------------------------------------
 * 7. フォント
 ----------------------------------------
 * 7-1 html
 * 7-2 h1～h4
 * 7-3 装飾
----------------------------------------
 * 8. 微調整
----------------------------------------
 * 8-1 改行
 * 8-2 float
 * 8-3 float解除
----------------------------------------
 * 9. レイアウト
----------------------------------------
 * 9-1 header
 * 9-2 footer
 * 9-3 main
 * 9-4 バナー
 ----------------------------------------
 * 10. HOME
----------------------------------------
 * 10-1 h1～h4
 * 10-2 hero
 * 10-3 ニュース・活動
 * 10-4 APDAについて
 * 10-5 APDAの活動
 * 10-6 JPFPについて
 * 10-7 社会への貢献と成果
 */
 
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
	font-family: 'Noto Sans JP', sans-serif , Roboto;
	color: #353535;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
a:link {
 text-decoration: none;
}
a:visited {
}
a:hover {
}
a:active {
}
/************************************************* 
*	1. container、flexボックス
**************************************************/
/*--------------------
  1-1 .container-xx
--------------------*/
/* .container-xx */
.container-fluid,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container-ss {
	width: 100%;
}
/*--------------------
  1-2 .container-xx > .row
--------------------*/
.row {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	justify-content: space-between;
}
/*--------------------
  1-3 .container-xx > .row > .col-x
--------------------*/
.col-2,
.col-3,
.col-4,
.col-5 {
	width: 100%;
	margin-bottom: 2em;
	text-align: left;
}
.col-1 img,
.col-2 img,
.col-3 img,
.col-4 img,
.col-5 img {
	display: block;
	width: 100%;
	margin-bottom: 1em;
}
.col-1 h2,
.col-2 h2,
.col-3 h2,
.col-4 h2,
.col-5 h2 {
	margin-bottom: 1em;
}
.col-1 h3,
.col-2 h3,
.col-3 h3,
.col-4 h3,
.col-5 h3 {
	margin-bottom: 1em;
}
@media all and (min-width: 481px) {
/* container-xx > .row > .col-x */
.col-2,
.col-3,
.col-4,
.col-5 {
	margin-bottom: 40px;
}
.col-2 {
	flex: 0 1 calc((100% - 40px) / 2);
}
.col-3 {
	flex: 0 1 calc((100% - 40px) / 2);
}
.col-4 {
	flex: 0 1 calc((100% - 40px) / 2);
}
.col-5 {
	flex: 0 1 calc((100% - 40px) / 2);
}
}
@media all and (min-width: 769px) {
/* container-xx > .row > .col-x */
.col-3 {
	flex: 0 1 calc((96% - 20px) / 3);
}
.col-4 {
	flex: 0 1 calc((96% - 50px) / 3);
}
.col-5 {
	flex: 0 1 calc((96% - 50px) / 3);
}
/* flexレイアウト　最後の要素だけ左寄 （common.js）*/
.col-3-flexstart:after {
	display: block;
	content:"";
	width: calc((96% - 20px) / 3);
	height: 0;
}
.col-3-flexstart:before {
	display: block;
	content:"";
	width: calc((96% - 20px) / 3);
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
.col-4-flexstart:after {
	display: block;
	content:"";
	width: calc((96% - 50px) / 4);
	height: 0;
}
.col-4-flexstart:before {
	display: block;
	content:"";
	width: calc((96% - 50px) / 4);
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
.col-5-flexstart:after {
	display: block;
	content:"";
	width: calc((96% - 50px) / 5);
	height: 0;
}
.col-5-flexstart:before {
	display: block;
	content:"";
	width: calc((96% - 50px) / 5);
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
}
@media all and (min-width: 992px) {
/* .container-xx */
.container-xl{
	max-width: 1500px;
	margin: 0 auto;
}
.container-lg{
	width: 90%;
	min-width: 700px;
	margin: 0 auto;
}
.container-md{
	max-width: 1200px;
 	margin: 0 auto;
}
.container-sm{
	width: 60%;
	min-width: 700px;
 	margin: 0 auto;
}
.container-ss {
	width: 50%;
	min-width: 640px;
 	margin: 0 auto;
}

.container-md.bg-wh {
	padding: 4em;
}
/* container-xx > .row > .col-x */
.col-4 {
	flex: 0 1 calc((96% - 50px) / 4);
}
.col-5 {
	flex: 0 1 calc((96% - 50px) / 5);
}

/* flexレイアウト　最後の要素だけ左寄 （common.js）*/
.col-5-flexstart:after {
	display: block;
	content:"";
	width: calc((96% - 50px) / 5);
	height: 0;
}
.col-5-flexstart:before {
	display: block;
	content:"";
	width: calc((96% - 50px) / 5);
	height: 0;
	order: 1;  /* 疑似要素beforeの順番を必ず指定する*/
}
}

/* for only IE */
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, .col-2,
*::-ms-backdrop, .col-3,
*::-ms-backdrop, .col-4,
*::-ms-backdrop, .col-5 {
	min-height: 0%;
}
}
@media all and (min-width: 481px) and (-ms-high-contrast: none) {
*::-ms-backdrop, .col-2 {
	flex: 0 1 48%;
  }
*::-ms-backdrop, .col-3 {
	flex: 0 1 48%;
  }
*::-ms-backdrop, .col-4 {
	flex: 0 1 48%;
  }
*::-ms-backdrop, .col-5 {
	flex: 0 1 48%;
  }
}
@media all and (min-width: 769px) and (-ms-high-contrast: none) {
*::-ms-backdrop, .col-2 {
	flex: 0 1 32%;
  }
*::-ms-backdrop, .col-3 {
	flex: 0 1 32%;
  }
*::-ms-backdrop, .col-4 {
	flex: 0 1 32%;
  }
*::-ms-backdrop, .col-5 {
	flex: 0 1 32%;
  }
}
@media all and (min-width: 992px) and (-ms-high-contrast: none) {
*::-ms-backdrop, .col-2 {
	flex: 0 1 48%;
  }
*::-ms-backdrop, .col-3 {
	flex: 0 1 32%;
  }
*::-ms-backdrop, .col-4 {
	flex: 0 1 24%;
  }
*::-ms-backdrop, .col-5 {
	flex: 0 1 19%;
  }
}
/************************************************* 
*	2. リストマーク
**************************************************/
/* --------------------
  2-1 スクエア矢印
-------------------- */
ul.dl-list {
	padding-left: 2em;
	margin-bottom: 4em;
	line-height: 2;
}
ul.dl-list li {
	list-style-image:url(../images/list-mark-quare.gif);
}
/* --------------------
  2-2 先頭横棒
-------------------- */
ul.ul-list {
	padding-left: 1em;
	margin-bottom: 2em;
	color: #083380;
	line-height: 2;
 }
ul.ul-list li:before {
	content:"―";
	display: inline-block;
	margin-right: 8px;
	font-size: 0.875rem;/*14px*/
}
ul.ul-list:last-of-type {
	margin-bottom: 0;
}
/************************************************* 
*	3. 表組
**************************************************/
/* --------------------
  3-1 外枠なし横罫
-------------------- */
.dsc-dl dl {
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	width: 100%;
	margin: 10px 0;
	border-top: 1px solid #ddd;
}
.dsc-dl dt {
	width: 30%;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}
.dsc-dl dd {
	width: 70%;
	padding: 10px 0;
	border-bottom: 1px solid #ddd;
}
/************************************************* 
*	4. リンク
**************************************************/
/* --------------------
  4-1 テキスト末尾　矢印
-------------------- */
.ar-link {
	display: flex;
	align-items: center;
	transition:all .7s;
} 
.ar-link::after {
	content: '';
	width: 20px;
	height: 6px;
	border-bottom: solid 1px #353535;
	border-right: solid 1px #353535;
	transform: skew(45deg);
	margin-left: 5px;
	margin-bottom: 2px; /*margin-bottom: 10px;*/
}
.ar-link:hover {
	color: #aaa;
}
/* --------------------
  4-2 テキスト末尾
      ダウンロードic
-------------------- */
.dl-link {
	display: flex;
	align-items: top;
	transition:all .7s;
} 
.dl-link::after {
	content:url(../images/i_dot_downoad.gif);
	width: 7px;
	height: 12px;
	margin-left: 5px;
}
a.dl-link {
	color: #092d91;
	text-decoration: underline;
} 
.dl-link:hover {
	text-decoration: none;
}
/* --------------------
  4-3 テキスト末尾
      外部リンクic
-------------------- */
.out-link {
	display: flex;
	align-items: top;
	transition:all .7s;
} 
.out-link::after {
	content:url(../images/i_dot_outside.gif);
	width: 7px;
	height: 12px;
	margin-left: 5px;
}
a.out-link {
	color: #092d91;
	text-decoration: underline;
} 
.out-link:hover {
	text-decoration: none;
} 
/* --------------------
  4-4 テキスト末尾PDFアイコン
      拡張子pdfで自動付与
-------------------- */
a.pdf[href $='.pdf']    {
    background:url(../images/ic_pdf.png) no-repeat center right;
    margin:0;
    padding:2px 24px 2px 0;
    color: inherit;
	transition:all .7s;
}
a.pdf[href $='.pdf']:hover  {
	/*opacity: .7;*/
	color: #aaa;
}
/************************************************* 
*	5. 画像
**************************************************/
/* --------------------
  5-1 ホバー時に背景画像をズーム
-------------------- */
a.zoom {
	position: relative;  /*親要素を決める*/
	overflow: hidden;  /*背景拡大時のはみ出しを非表示*/
	/*background: #000;  カラーフィルターは黒*/
}
a.zoom:after {
	position: absolute;  /*子要素を固定*/
	content: "";  /*疑似要素の中身は空（必須）*/
	display: block;  /*フィルターの高さと幅を指定のためブロック要素に変更*/
	width: 100%; /*カラーフィルター幅は画像いっぱいに*/
	height: 100%;　/*カラーフィルター高さは画像いっぱいに*/
	top: 0;　/*カラーフィルターをトップに固定*/
	background: url(******.png) no-repeat center center; /*画像のパスを指定*/
	transition: all .3s ease;  /*変化のスピードと動き*/
	background-size: cover;  /*背景画像のプロパティはカバー*/
}
a.zoom:hover {opacity: 1;}
a.zoom:hover:after {
	/*opacity: .3!important;  ホバー時に透過させてフィルターがかかる*/
	transform: scale(1.05); /*画像の拡大比率（１０５％）*/
}
/* --------------------
  5-2 ホバー時に画像をズーム
-------------------- */
.thum {
	overflow: hidden;
	position: relative;
	margin-bottom: 1em;
}
.thum::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all .8s ease;
}
.thum img {
	transition: all .8s ease;
}
/*a:hover .thum::before {
	background: rgba(0,0,0,.5);
}*/
a:hover .thum img {
	transform: scale(1.05);/*scale(1.05)*/
}
/* IE10・11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.thum img {
	max-width: 100%;
	flex-shrink:0;
	/* Flex box bug avoidance */
}
}

/* reuse.css custom */
.col-3 a.zoom {
	display: block;
	width: 100%;
	height: calc(213px + 7vw);
	margin-bottom: 1em;
}
.col-4 a.zoom {
	display: block;
	width: 100%;
	height: calc(213px + 2vw);
	margin-bottom: 1em;
}
.col-5 a.zoom {
	display: block;
	width: 100%;
	height: calc(100px + 2vw);
	margin-bottom: 1em;
}
@media all and (-ms-high-contrast: none) {
/* for IE */
.col-3 a.zoom {
	display: block;
	width: 100%;
	height: 300px;/*calc(213px + 7vw);*/
	margin-bottom: 1em;
}
.col-4 a.zoom {
	display: block;
	width: 100%;
	height: 300px;/*calc(213px + 7vw);*/
	margin-bottom: 1em;
}
.col-5 a.zoom {
	display: block;
	width: 100%;
	height: calc(213px + 2vw);
	margin-bottom: 1em;
}
}
/* --------------------
   5-3 画像切り替え（PC or SP）
-------------------- */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 769px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

/* --------------------
   5-4 画像の位置調整
-------------------- */
figure.center {text-align: center!important;}
figure.left {text-align: left!important;}
figure.right {text-align: right!important;}

/************************************************* 
*	6. ボタン
**************************************************/
/* --------------------
  6-1 primary
-------------------- */
.btn-primary {
	display: inline-block;
	position: relative;
	min-width: 15em;
	background: #000a44;
	height: 52px;
	line-height: 52px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
  }
.btn-primary:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
	background: #083380;
}
.btn-primary:hover:before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn-primary a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
 	width: 100%;
 }
.btn-primary a:hover {
 	color: #fff;
 	opacity: 1;
 }
.btn-primary:after {
 	position: absolute;
 	top: 50%;
 	right: 1em;
	 width: 0.5em;
 	height: 0.5em;
 	transform: translateY(-50%) rotate(45deg);
 	border-right: 2px solid currentColor;
 	border-top: 2px solid currentColor;
 	content: "";
 	color: #fff;
}
@media all and (max-width: 769px) {
.btn-primary {
	display: block;
}
}
/* --------------------
  6-2 secondary
-------------------- */
.btn-secondary {
	display: inline-block;
	position: relative;
	min-width: 15em;
	height: 47px;
	line-height: 47px;
	border: 1px solid #000a44;
	overflow: hidden;
	/*font-size: 16px;*/
	text-align: center;
	text-decoration: none;
	color: #000a44;
}
.btn-secondary:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
	background: #000a44;
}
.btn-secondary:hover:before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn-secondary a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
}
 .btn-secondary a:hover {
	color: #fff;
	opacity: 1;
	}
.btn-secondary:after {
	position: absolute;
	top: 50%;
	right: 1em;
	width: 0.5em;
	height: 0.5em;
	transform: translateY(-50%) rotate(45deg);
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	color: #000a44;
}
.btn-secondary:hover:after {
	color: #fff;
}
/* --------------------
  6-3 外部リンクボタン
-------------------- */
.btn-outside {
	display: inline-block;
	position: relative;
	min-width: 15em;
	background: #000a44;
	height: 47px;
	line-height: 47px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	}
.btn-outside:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
	background: #083380;
}
.btn-outside:hover:before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn-outside a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
}
.btn-outside a:hover {
	color: #fff;
	opacity: 1;
}
.btn-outside:after {
	position: absolute;
	top: 50%;
	right: 1em;
 	width: 9px;
 	height: 9px;
 	content: "";
 	background:url(../images/i_dot_outside_wh.gif) no-repeat center center;
}
/* --------------------
  6-4 外部リンクボタン（Large）
-------------------- */
.btn-outside-large {
	display: block;
	position: relative;
	min-width: 15em;
	background: #000a44;
	height: 60px;
	line-height: 60px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}
.btn-outside-large:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
	background: #083380;
}
.btn-outside-large:hover:before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn-outside-large a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
 }
.btn-outside-large a:hover {
	color: #fff;
	opacity: 1;
 }
.btn-outside-large:after {
	position: absolute;
	top: 50%;
	right: 1em;
	width: 9px;
	height: 9px;
	content: "";
	background:url(../images/i_dot_outside_wh.gif) no-repeat center center;
}
/* --------------------
  6-5 ダウンロードボタン
-------------------- */
.btn-dl {
	display: inline-block;
	position: relative;
	min-width: 15em;
	background: #000a44;
	height: 47px;
	line-height: 47px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
}
.btn-dl:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
	background: #083380;
}
.btn-dl:hover:before {
	transform: scaleX(1);
	transform-origin: left;
}
.btn-dl a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
}
.btn-dl a:hover {
	color: #fff;
	opacity: 1;
}
.btn-dl:after {
	position: absolute;
	top: 50%;
	right: 1em;
	width: 7px;
	height: 12px;
	content: "";
	background:url(../images/i_dot_downoad_wh.gif) no-repeat center center;
}
@media all and (max-width: 767px) {
.btn-dl {
	display: block;
}
}
/* --------------------
  6-6 ダウンロード（Large）
-------------------- */
.btn-dl-large {
 	display: block;
 	position: relative;
 	min-width: 15em;
 	background: #000a44;
 	height: 60px;
 	line-height: 60px;
	text-align: center;
 	text-decoration: none;
	color: #fff;
	overflow: hidden;
  }
.btn-dl-large:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
 	transform-origin: right;
 	transition: transform .7s cubic-bezier(.19, 1, .22, 1);
 	background: #083380;
}
.btn-dl-large:hover:before {
 	transform: scaleX(1);
	transform-origin: left;
}
.btn-dl-large a {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
 }
.btn-dl-large a:hover {
	color: #fff;
	opacity: 1;
 }
.btn-dl-large:after {
	position: absolute;
	top: 50%;
	right: 1em;
	width: 9px;
	height: 9px;
	content: "";
	background:url(../images/i_dot_downoad_wh.gif) no-repeat center center;
}
/* --------------------
  6-7 ダウンロード（角丸）
-------------------- */
.btn-download {
	min-width: 150px;
	padding: 10px 10px;
	border-radius: 50px;
	color: #000a44;
	font-size: 0.875rem;
	/*font-family: 'Roboto', sans-serif;*/
	text-align: center;
	border: 1px solid #000a44;
	white-space: nowrap;
	line-height: 1;
	
}
.btn-download > *:first-child {
	width: calc(100% - 10px * 3);
}
.btn-download::after {
	content: '';
	display: inline-block;
	padding: 0;
	width: 7px;
	height: 12px;
	background:url(../images/i_dot_downoad.gif) no-repeat center bottom;
	margin-left: 15px;
}
.btn-download:hover {
	opacity: 0.5;
}
a.btn-download:link, a.btn-download:active, a.btn-download:hover, a.btn-download:visited {
	color: #000a44;
	text-decoration: none;
}
/* --------------------
  6-8 スクロールdown
-------------------- */
a.btn-scdown {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 50;
  display: inline-block;
  padding-top: 60px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color: #fff;
}
a.btn-scdown span {
  position: absolute;
  top: 0;
  /*left: 50%;*/
  width: 46px;
  height: 46px;
  margin-left: -23px;
  border: 1px solid #fff;
  border-radius: 100%;
  box-sizing: border-box;
}
a.btn-scdown span::after {
  position: absolute;
  top: 50%;
  /*left: 50%;*/
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
a.btn-scdown span + i {
position: absolute;
	top: 75%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
/* --------------------
  6-9 PAGE TOP
-------------------- */
.pagetop {
	position: fixed;
	right: .5em;
	bottom: 6em;
	z-index: 100;
}
.pagetop a {
	display: block;
	padding: 8px 0 0 8px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	letter-spacing: 2px;
	-moz-transform: rotate( 90deg );  /* Firefox */
	-webkit-transform: rotate( 90deg );  /* Chrome,Safari,新しいOpera */
	-o-transform: rotate( 90deg );  /* 古いOpera */
	-ms-transform: rotate( 90deg );  /* IE9 */
	transform: rotate( 90deg );
}
.pagetop a:hover {
	text-decoration: none;
}
.pagetop a::after {
	content: "";
	display: block;
	background:url(../images/pagetop.png) no-repeat center top;
	position: absolute;
	top: 0;
	bottom: -5px;
	right: 105%;
	margin: auto;
	width: 15px;
	height: 56px;
	-moz-transform: rotate( -90deg );  /* Firefox */
	-webkit-transform: rotate( -90deg );  /* Chrome,Safari,新しいOpera */
	-o-transform: rotate( -90deg );  /* 古いOpera */
	-ms-transform: rotate( -90deg );  /* IE9 */
	transform: rotate( -90deg );
}
@media screen and (max-width: 769px) {
.pagetop {
	display: none!important;
}
}
/************************************************* 
*	7. フォント
**************************************************/
/* --------------------
  7-1 html
-------------------- */
/*html {
  font-size: 62.5%;
}*/
@media screen and (min-width:769px){
/* PC 769px以上 */
html{
	font-size: 16px;
}
}
@media screen and (max-width:768px){
/* タブレット 768px以下 */
html{
	font-size: 2vw;
}
}
@media screen and  (max-width:480px){
 /* スマートフォン 480px以下 */
html{
	font-size: 3.4vw;
}
}
/* --------------------
  7-2　h1～h4 
-------------------- */
h1 {
	font-size: 2.25rem;/*36px*/
}
h2{
	font-size: 1.5rem;/*24px*/
	font-weight: 700;
}
h3{
	font-size: 1.25rem;/*20px*/
	font-weight: 700;
}
h4 {
	font-weight: 400;
}
/* --------------------
  7-3　装飾
-------------------- */
em {
  font-style: normal;
  color: #BDA525;
  font-weight: bold;
}
/************************************************* 
*	8. 微調整
**************************************************/
/* --------------------
  8-1　改行 
-------------------- */
@media screen and (min-width: 481px) {
.br-sp {
	display:none;
}
}
@media screen and (max-width: 769px) {
.br-pc {
	display:none;
}
}
/* --------------------
  8-2　float
-------------------- */
.pull-right {
	float: right;
	margin-left: 20px;
	text-align: right;
}
.pull-left {
	float: left;
	margin-right: 20px;
	text-align: left;
}
/* --------------------
  8-3　float解除　
-------------------- */
.cf:before, .cf:after {
    content:"";
    display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* IE 6/7用。不要なら削除可。 */
/************************************************* 
*	9. レイアウト
**************************************************/
/* --------------------
  9-1　header 
-------------------- */
header {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	padding: 1em 2%;
	background: #000a44;
}
.h-menu {
	display: none;
}
@media screen and (min-width: 1280px) {
.h-menu {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	margin-bottom: .5em;
}
.h-menu .login a {
	display: block;
	padding: 3px 20px;
	background: #999;
	transition:all .7s;
	font-size: 12px;
	color: #fff;
}
.h-menu .login a:hover {
	background: #666;
}
.h-menu .social-icon {
	margin: 0 1.5em;
}
.h-menu .social-icon a {
	display: inline-block;
	margin-right: 5px;
	transition:all .7s;
	color: #aaa;
}
.h-menu .social-icon a:nth-child(3) {
	margin-right: 0;
}
.h-menu .social-icon a:hover {
	color: #666;
}
.h-menu .switch-lang {
	color: #666;
}
.h-menu .switch-lang a {
	color: #fff;
	transition:all .7s;
}
.h-menu .switch-lang a:hover {
	color: #666;
}
}
/* --------------------
  9-2　footer 
-------------------- */
footer {
	width: 100%;
	max-width: 1200px;
	margin: 4em auto 0 auto;
	text-align: right;
}
footer h1 {
	margin-bottom: 1em;
}
footer .social-icon {
	margin: 0 0 1em 0;
}
footer .social-icon a {
	display: inline-block;
	margin-right: 5px;
	transition:all .7s;
	color: #000a44;
}
footer .social-icon a:nth-child(3) {
	margin-right: 0;
}
footer .social-icon a:hover {
	color: #3f4672;
}
footer .row {
	border-top: 1px solid #d9d9d9;
	text-align: left;
	line-height: 2;
}
footer .f-nav {
	display: none;	
}
footer address {
	padding: 1em 0 2em;
	font-style: normal;
}

footer .f-nav ul {
	margin-right: 2em;
}
footer .f-nav ul:nth-child(2) {
	margin-right: 0;
}
footer .f-nav a {
	transition:all .7s;
} 
footer .f-nav a:hover {
	color: #aaa;
} 
.copy {
	margin: 0 0 1em;
	font-size: .75rem; /*12px*/
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: left;
}
@media all and (min-width: 769px) {
footer .f-nav {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	padding: 1em 0 1em;
}
}
@media all and (-ms-high-contrast: none) {
/* for IE */
}
/* --------------------
  9-3　main 
-------------------- */
main {}
section {
	padding: 30px 0 30px;
}
/* section > .inner */
.inner {
	padding: 0 2%;
}
@media screen and (min-width: 769px) {
section {
	padding: 60px 0 60px;
}
}
.bg-wh {
	background: #fff;
	margin-bottom: 2rem;
}
.bg-gr {
	background: #f0f0f0;
	margin-bottom: 2rem;
}
.bg-bgr {
	background: #f7f8f8;
	margin-bottom: 2rem;
}
.bg-blu {
	background: #083380;
	margin-bottom: 2rem;
}
.bg-blu p {
	color: #fff;
}
/* for only IE */
@media all and (-ms-high-contrast: none) {
*::-ms-backdrop, main {
	min-height: 0%;
}
}
/* --------------------
  9-4　バナー 
-------------------- */
/* 寄附・賛助金バナー */
.bn-donate {
	display: flex;
	align-items: center;
	align-content: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-ms-flex-wrap: nowrap;
  	flex-wrap: nowrap;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	padding: 1.5em .5em 1.5em .5em;
	background: #00215a;
	color: #fff;
	text-align: left;
}
a.btn-doate {
	display: block;
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
}
.bn-donate div:nth-child(1) {
	font-size: 1.25rem;
}
.bn-donate div:nth-child(2) {
	font-size: 1rem;
}
.bn-donate div:nth-child(3) {
	display: inline-block;
	padding: 1em 4em;
	background: #444;
	white-space: nowrap;
}
.bn-donate:hover {
	transition:all .7s;
}
.bn-donate:hover {
	background: #252e5f;
}
@media screen and (max-width: 830px) {
.bn-donate {
	display: block;
	text-align: center;
}
.bn-donate div:nth-child(3) {
	margin-top: 1em;
	display: inline-block;
	padding: 1em 4em;
	background: #444;
	white-space: nowrap;
}
}
/************************************************* 
*	10. HOME
**************************************************/
/* --------------------
  10-1　h1～h4 
-------------------- */
#home h2 {
	margin-bottom: 2em;
}
#home h2 > span {
	display: block;
	padding-top: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 0.8125rem;/*13px*/
	font-weight: normal;
	letter-spacing: 1px;
	color: #857242;
}
/* --------------------
  10-2　hero
-------------------- */
#home .hero-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}
#home .hero-img ul li {
	flex: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center top;
	animation-iteration-count: infinite;
	animation-duration: 40s;
}
#home .hero-img ul li:nth-child(1) {
	background-image: url("../images/top/hero-slide01.png");
	animation-name: slider-zoomin;
	animation-delay: -3s;
}
#home .hero-img ul li:nth-child(2) {
	background-image: url("../images/top/hero-slide02.png");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 5s;
}
#home .hero-img ul li:nth-child(3) {
	background-image: url("../images/top/hero-slide03.png");
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 13s;
}
#home .hero-img ul li:nth-child(4) {
	background-image: url("../images/top/hero-slide04.png");
	animation-name: slider-zoomout;
	opacity: 0;
	animation-delay: 21s;
}
#home .hero-img ul li:nth-child(5) {
	background-image: url("../images/top/hero-slide05.png");
	animation-name: slider-zoomin;
	opacity: 0;
	animation-delay: 29s;
}
#home .hero-txt {
	position:absolute;
	z-index: 10;
	bottom: 2%;
	left: 2%;
	padding-left: 20px;
	overflow:hidden;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	color: #fff;
}
#home .hero-txt h1{
	padding-bottom: 10px;
	font-size: 10vmin;
	text-transform: uppercase;
	line-height: 1;
}
#home .hero-txt h2{
	font-size: 1.4rem;
	font-weight:normal;
	font-style:italic;
}
@keyframes slider-zoomin {
  0% {
    opacity: 0;
   /* transform: scale(1);*/
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    /*transform: scale(1.3);*/
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    /*transform: scale(1.3);*/
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    /*transform: scale(1);*/
  }
}
/* --------------------
  10-3　ニュース・活動
-------------------- */
#home #news {overflow-x: hidden;}

/*https://gimmicklog.com/jquery/549/  [Slick.js使用]★slick.jsカスタマイズ*/
#home #news .multiple-item {
	max-width: 1400px;
	margin: 0 auto;
}
#home #news .multiple-item .slick-next {
	z-index: 99;
}
#home #news .multiple-item .slick-prev {
	z-index: 100;
}
#home #news .slick-prev:before,
#home #news .slick-next:before {
    color: #000;
}
#home #news .multiple-item li {
	margin: 0 13px;
}
#home #news .multiple-item li div:nth-last-of-type(1) {
	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
#home #news .multiple-item li div:nth-last-of-type(1) span {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.75rem;
	line-height: 1.5;
}
#home #news .multiple-item li div:nth-last-of-type(1) span + span {
	font-family: 'Roboto', sans-serif;/* 日本語フォント */
}
#home #news .multiple-item li div:nth-last-of-type(1) span i {
	font-family: 'Noto Sans JP', sans-serif , Roboto;/* 日本語フォント */
}
#home #news .multiple-item li p:first-of-type { 
	margin-bottom: .5em;
	font-size: 0.8125rem;/* 13px */
	color:#a19870;
}
#home #news .multiple-item li p a {
	transition:all .7s;
}
#home #news .multiple-item li p a:hover {
	color: #aaa;
}
#home #news span.event { display:inline-block; width:7em; margin-left:1em; padding:2px 0; background-color:#a19870; font-size:0.75rem; color:#fff; text-align:center; line-height:1;}
#home #news span.news { display:inline-block; width:7em; margin-left:1em; padding:2px 0; background-color:#84a4c4; font-size:0.75rem; color:#fff; text-align:center; line-height:1;}
#home #news span.pub { display:inline-block; width:7em; margin-left:1em; padding:2px 0; background-color:#84C499; font-size:0.75rem; color:#fff; text-align:center; line-height:1;}
#home #news span.notice { display:inline-block; width:7em; margin-left:1em; padding:2px 0; background-color:#f2bb05; font-size:0.75rem; color:#fff; text-align:center; line-height:1;}
#home #news span.interview { display:inline-block; width:7em; margin-left:1em; padding:2px 0; background-color:#C49584; font-size:0.75rem; color:#fff; text-align:center; line-height:1;}

#home #news .button-wrap {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	max-width: 1400px;
	margin: 0 auto 10px;
	padding-right: 1em;
}
#home #news button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	appearance: none;
}
#home #news .btn-secondary {
	margin-top: 1em;
}
/* --------------------
  10-4　APDAについて
-------------------- */
#home #about {}
#home #about h2 + p { margin-bottom: 1em; font-size: 2.25rem;}/*36px*/
#home #about h2 + p + p { line-height: 2.4;}
/* --------------------
  10-5　APDAの活動
-------------------- */
#home #activities {}
#home #activities .header {
	display: none;
}
#home #activities .header img {
	display: none;
}
#activities .biz-wrap {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
#activities .biz-wrap li {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
	width: 48%;
	margin-bottom: 2em;
}
#activities .biz-wrap li div:last-child {
	margin-top: auto;
	padding: 0 2%;
}
#activities .biz-wrap li h3 {
	margin-bottom: 1em;
	padding: 0 2%;
}

/* reuse.css zoom custom */
#activities .biz-wrap li a.zoom {
	display: block;
	height: calc(120px + 7vw);
	margin-bottom: 1em;
}
#activities .biz-wrap li a.biz01:after {background: url(../images/top/activities_01.png) no-repeat center center; background-size: cover; background-color: #fff;}
#activities .biz-wrap li a.biz02:after {background: url(../images/top/activities_02.png) no-repeat center center; background-size: cover; background-color: #fff;}
#activities .biz-wrap li a.biz03:after {background: url(../images/top/activities_03.png) no-repeat center center; background-size: cover; background-color: #fff;}
#activities .biz-wrap li a.biz04:after {background: url(../images/top/activities_04.png) no-repeat center center; background-size: cover; background-color: #fff;}
#activities .biz-wrap li a.biz05:after {background: url(../images/top/activities_05.png) no-repeat center center; background-size: cover; background-color: #fff;}
@media only screen and (max-width: 481px) {
#activities .biz-wrap li a.zoom {
	height: calc(100px + 7vw);
}	
}
@media only screen and (min-width: 1280px) {
#home #activities h2 {
	padding-left: 10%;
	text-align: left;
}
#home #activities .inner {
	position: relative;
}
#home #activities .header {
	display: block;
	position: relative;
	height: calc(50vw * 0.56); /*height: calc(50vw * 0.75);*/
	background: url(../images/top/activities_header_.png);
	background-size: cover;
}
#home #activities .header img {
	display: block;
	position: absolute;
	top: 40%;
    left: 50%;
    transform: translate(-50%, -4%);
    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
	z-index: 100;
	display: block;
	width: 50%;
	margin: 0 auto;
}
#activities .biz-wrap {
	position: absolute;
	bottom: -200px;
	right: 0;
	width: 95%;
}
#activities .biz-wrap li {
	flex: 1;
	margin-bottom: 0;
	border-left: 1px solid #d9d9d9;
}
#activities .biz-wrap li a.zoom {
	height: calc(100px + 7vw);
}
}
/* --------------------
  10-6　JPFPについて
-------------------- */
#home #jpfp {
	margin: 5% 0 4em 0;
}
#home #jpfp .header {
	width: 100%;
	margin-bottom: 2em;
}
#home #jpfp .header .col-2:nth-child(1) {
	margin-bottom: 0!important;
}
#home #jpfp .header .col-2:nth-child(2) {
	margin-bottom: 0!important;
	padding: 1em;
	background: #00587c;
	color: #fff;
}
#home #jpfp .header .col-2:nth-child(2) h3 {
	margin-bottom: 1em;
	font-size:  1.5rem;
	font-weight: 400;
	line-height: 1.5;
 }
#home #jpfp .header .col-2:nth-child(2) p {
	margin-bottom: 2em;
	line-height: 2;
	color: #99c4d1;
}
#home #jpfp .body .col-2:nth-child(2) {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
}
#home #jpfp .body .col-2:nth-child(1) h3 {
	margin-bottom: .5em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5rem;
 }
 #home #jpfp .body .col-2:nth-child(1) h3 i {
	 color: #00587c;
 }
#home #jpfp .body .col-2:nth-child(1) p {
	margin-bottom: 1em;
	line-height: 2;
}
#home #jpfp .body .col-2:nth-child(2) ul:first-child {
	margin-right: 50px;
}
#home #jpfp .body .col-2:nth-child(2) li {
	line-height: 2.5;
}
#home #jpfp .body .col-2:nth-child(2) li:first-child {
	font-weight: 700;
}
#home #jpfp .body .col-2:nth-child(2) li::before {
	font-family: "Font Awesome 5 Free";
	content: "\f105 ";
	font-weight: 900; /* only 400 or 900 */
	margin-right: .5em;
}
#home #jpfp .body .col-2:nth-child(2) a {
	color: #00587c;
	transition: all .7s;
}
#home #jpfp .body .col-2:nth-child(2) a:hover {
	color: #9BCBDF;
}
#home #jpfp .header .col-2 .btn-dark,
#home #jpfp .body .col-2 .btn-dark {
	display: block;
	width: 90%;
	margin: 0 auto 1em auto;
	padding: 14px 30px;
	background: #007cad;
	text-align: center;
	color: #fff;
	transition:all .7s;
}
#home #jpfp .header .col-2 .btn-dark:hover,
#home #jpfp .body .col-2 .btn-dark:hover {
	background: #67A0B1;
}
@media only screen and (min-width: 1280px) {
#home #jpfp {
	margin: 10% 0 4em 0;
}
#home #jpfp h2 {
	padding-left: 10%;
	text-align: left;
}
#home #jpfp .header {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#home #jpfp .header .col-2:nth-child(1) {
	position: relative;
	z-index: 1;
}
#home #jpfp .header .col-2:nth-child(2) {
	position: relative;
	z-index: 2;
	max-width: 600px;
	margin-left: -40px;
	padding: 2em 2em 1em 2em;
}
#home #jpfp .body .col-2:nth-child(1) h3 {
	margin-bottom: 1em;
	font-size: 2rem;
 }

#home #jpfp .body {
	display:-webkit-box;
	display:-ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	max-width: 1150px;
	margin: 0 auto 4em;
}
#home #jpfp .body .col-2:nth-child(1) {
	width: 50%;
}
#home #jpfp .body .col-2:nth-child(2) {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	width: 50%;
}

#home #jpfp .header .col-2 .btn-dark,
#home #jpfp .body .col-2 .btn-dark {
	display: inline-block;
	width: auto;
	padding: 10px 30px;
	text-align: left;
}
}
@media only screen and (max-width: 1025px) {
	#home #jpfp .body .col-2:nth-child(2) {
	display:none;
}
}
/* --------------------
  10-7　社会への貢献と成果
-------------------- */
#home #project {
	overflow-x: hidden;
}
/*https://gimmicklog.com/jquery/549/  [Slick.js使用]★slick.jsカスタマイズ*/	
#home #project .center-item {
	margin: 0 auto;
}
#home #project .center-item li {
	display: flex;
	flex-direction: column;
	margin: 0 30px;
}
#home #project .center-item li div {
	margin-top: auto;
}

#home #project .center-item li h3 {
	margin-bottom: 1em;
  height: calc( 1.25em * 2 );/*テキストエリア高さを2行*/
  line-height: 1.25;
}
#home #project .center-item li h3 + p {
	margin-bottom: 2em;
	font-size: 0.8125rem; /*13px*/
}

/* reuse.css custom */
#home #project .center-item li a.zoom {
	display: block;
	height: calc(50vw * 0.35);
	margin-bottom: 1em;
}
#home #project .center-item li a.biz01:after {background: url(../images/top/project_thum01.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz02:after {background: url(../images/top/project_thum02.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz03:after {background: url(../images/top/project_thum03.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz04:after {background: url(../images/top/project_thum04.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz05:after {background: url(../images/top/project_thum05.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz06:after {background: url(../images/top/project_thum06.png) no-repeat center center; background-size: cover; background-color: #fff;}
#home #project .center-item li a.biz08:after {background: url(../images/top/project_thum08.png) no-repeat center center; background-size: cover; background-color: #fff;}
	
@media screen and (max-width: 769px) {
#home #project .center-item li {
	margin: 0 15px;
}
#home #project .center-item li a.zoom {
	height: calc(40vw * 1);
}
}