/*
   9px   =      62.5%
   10px   =      77%
   11px   =      85%
   12px   =      93%
   13px   =     100%
   14px   =     108%
   15px   =     116%
   16px   =   123.1%
   17px   =     131%
   18px   =   138.5%
   19px   =   146.5%
   20px   =   153.9%
   21px   =   161.6%
   22px   =     167%
   23px   =     174%
   24px   =     182%
   25px   =     189%
 
*/

/*要素のフォントサイズやマージン・パディングをリセットしています*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, ins, kbd, q, samp,
small, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight: normal;
}
strong {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
img {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
/*    vertical-align:bottom;*/
    vertical-align:top;
    background:transparent;
	} 

/*行の高さをフォントサイズと同じにしています*/
body {
    line-height:1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*ol ulのマーカー（行頭記号）を表示しないようにしています*/
ol, ul {
	list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
    border-collapse:collapse;
    border-spacing:0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
    vertical-align:middle;
}

img {
vertical-align:top;
font-size:0;
line-height:0;
}


/*------base-------------------------------------*/

body {
	font:13px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    *font-size:small;
    *font:x-small;
}
table {
    font-size:inherit;
    font:100%;
}

/*------clearfix-------------------------------------*/

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
.clearfix {
    display: inline-table;
    min-height: 1%;
}
 
/* Hides from IE-mac */
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */



/*--------リンク-----------------------------------*/


a {
	overflow: hidden;
	color: #95969a;
}
a:hover {
	color: #555555;
	text-decoration: none;
}

a:hover img.ro{
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
/*---ie---*/
a {
outline: none;
}

a.fade {
	display: block;
}
/*--------form-----------------------------------*/

input,select,textarea {
	outline:none;	
}


/* ADGs _a */

.slide_anime_nav {
    position: fixed;
    z-index: 1010;
    top: 50%;
    transform: rotate(0) translateY(-50%);
  }
  .slide_anime_nav > div {
    background: #ffffff;
    transition: transform 0.3s ease 0s;
    transform: translateX(0px);
    padding:5px 10px;
    border-radius: 10em;
  }
  .slide_anime_nav > div:not(:last-of-type) {
    margin-bottom: 1px;
  }
  .slide_anime_nav > div:hover {
    background: #ffffff;
  }
  .slide_anime_nav a {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: calc(45px - 100px);
    min-height: 50px;
    white-space: nowrap;
    text-decoration: none;
  }
  .slide_anime_nav a:hover {
    text-decoration: none;
  }

  .slide_anime_nav a img {
	padding: 5px;
	max-width: 50px;
	}

  .slide_anime_nav .fas {
    width: 70px;
    text-align: center;
  }
  
  .fixed_right {
    left: calc(100% - 70px);
    background: #ffffff;
    border-radius: 15em;
  }


.slide_anime_nav.fixed_right {}
  .fixed_right > div:hover {
    transform: translateX(-100px);
  }
  .fixed_right a::after {
    display: block;
    content: attr(data-text);
    padding-right: 1rem;
    margin-left: 0.25rem;
  }





/* ADGs _b */
.slide_anime_navB {
    position: fixed;
    z-index: 1010;
    top: 50%;
    transform: rotate(0) translateY(-50%);
  }
  .slide_anime_navB > div {
    background: #f0f0e4;
    transition: transform 0.3s ease 0s;
    transform: translateX(0px);
    padding: 5px 10px;
    border-radius: 10em;
  }
  .slide_anime_navB > div:not(:last-of-type) {
    margin-bottom: 1px;
  }
  .slide_anime_navB > div:hover {
    background: #f0f0e4;
  }
  .slide_anime_navB a {
    color: #000;
	  font-weight:600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: calc(45px - 100px);
    min-height: 50px;
    white-space: nowrap;
    text-decoration: none;
  }
  .slide_anime_navB a:hover {
    text-decoration: none;
  }

  .slide_anime_navB a img {
    padding: 5px;
    max-width: 50px;
}



  .slide_anime_navB .fas {
    width: 70px;
    text-align: center;
  }
  
  .fixed_left {
    right: calc(100% - 70px);
    background: #f0f0e4;
    border-radius: 15em;
  }
  .fixed_left > div:hover {
    transform: translateX(100px);
  }
  .fixed_left a::before {
    display: block;
    content: attr(data-text);
    padding-left: 1rem;
    margin-right: 0.25rem;
  }




#sdgsA {
    position: fixed;
    top: 300;
    right: 5px;
    font-size: 90%;
    z-index: 9;
}
#sdgsA a {
    /*background: #b60005;*/
    text-decoration: none;
    /*color: #fff;*/
    width: 60px;
    /* height: 90px; */
    padding: 10px 0;
    display: block;
    /* text-align: center;
  border-radius: 5px;*/
    text-align: center;
}
#sdgsA a img {
width: 100%;
}



#sdgsA a:hover {
    text-decoration: none;
   /* background: #e0414c;*/
   	opacity: 0.6; 
}



.sdgs_banner{width:100%;margin: 10px auto;max-width:800px;position: relative;padding: 60px;overflow: auto;/* height: 100px; */}

.sdgs_banner img{width:100%;margin:0 auto}