@charset "utf-8";
/* CSS Document */
/*  PC 1200px レスポンシブル設定は890px～ 1em = 16px */

/*	初期化  */
* { margin: 0px; padding: 0px; font-size: 100%; }
ul, ol { list-style: none; }
body,h1, h2, h3, h4, h5,p,
ul, ol, li, dl, dt, dd,
table,
form, input {margin:0;padding:0; }
hr  { display: none; }
th	{ font-weight:lighter; }
img { border: none; vertical-align: bottom; }

/*	基本設定  */

body {color: #333; font-size:1em; line-height: 130%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

html {scroll-behavior: smooth;}
html {overflow-y:scroll;}
main {margin: 0 auto; width: 80%;}
section{margin: 1.0em 0;}

p,li,dt,dl {font-size:1.0em; line-height:1.4;}
p{margin: 0 0 1.2em;}
li {list-style-type:none;}
img {border:0;}
i{font-style: normal;}

.small {font-size: 0.7em;}

/* レスポンシブル改行タグ */
.pc{display:inline-block;}
.sp{display:none;}
@media screen and (max-width: 540px) {
    .pc{display:none;}
    .sp{display:inline-block;}
}

/* header */
#app_header{position: relative; z-index:999; width: 100%; background: #f3f3f3; text-align: center; border-top: 3px solid #2069c9; border-bottom: 3px solid #2069c9;}
#app_header header{width: 100%; margin: auto;}
#app_header header #site-description{max-width:950px; width: 100%; height: 32px; font-size: 10px; padding: 2px 0; margin: auto; text-align: left; color: #666;}
#app_header header #header_top_area{width: 100%; padding:30px 0 10px; background: #FFF;}
#app_header header #header_top_area ul{max-width:950px; width: 100%; margin: auto; display: flex; align-items: flex-start; justify-content: flex-end;}
#app_header header #header_top_area ul li{margin: 0 0 auto 0; }
#app_header header #header_top_area ul li:first-child{margin: 0 auto auto 0;}
#app_header header #header_top_area ul li:last-child img{position: relative; top:-3px;}

@media screen and (max-width: 950px) {
	#app_header header #site-description{width: calc(100% - 20px); margin: auto 10px;}
	#app_header header #header_top_area{width: calc(100% - 20px); padding:30px 10px 10px;}
}

#app_header header input,label{display: none;}

#app_header header ul#header_link{max-width: 950px; width:100%; margin: auto; border-top: 1px solid #e5e5e5; 
	background: url(/img/bg_gr_up.png) left bottom repeat-x #fff; box-shadow: inset 1px 0px 0px #fff; 
    display: flex; justify-content: center; align-items: center;}

#app_header header ul#header_link li{width: calc(100% / 5); position: relative;}
#app_header header ul#header_link li a{display: block; text-align: center; border-right: 1px solid #e5e5e5; box-shadow: inset 1px 0px 0px #fff;
padding: 20px 0 18px; width: 100%; text-decoration: none; color: #222; background: url(/img/arrow_gray.png) right bottom no-repeat; border-bottom: 1px solid #ccc; border-left: 1px solid #e5e5e5; font-size: 13px; font-weight: 600;}
#app_header header ul#header_link li a:hover{background: url(/img/arrow_bk.png) right bottom no-repeat; }

#app_header header ul#header_link li ul.header_link_inner{position: absolute; top:-300px; opacity: 0; width: 190px;}
#app_header header ul#header_link li a:hover + ul.header_link_inner{opacity:1; position: absolute; top:45px; display: block;}
#app_header header ul#header_link li ul.header_link_inner:hover{position: absolute; top:45px; opacity:1;}
#app_header header ul#header_link li ul.header_link_inner li{width: 100%;}
#app_header header ul#header_link li ul.header_link_inner li:first-child{padding-top: 16px;}
#app_header header ul#header_link li ul.header_link_inner a{background: #FFF; display: block; position: relative;}
#app_header header ul#header_link li ul.header_link_inner a:hover{background: url(/img/arrow_bk.png) right bottom no-repeat;}

#app_header header ul#header_link li ul.header_link_inner a:before{content: ""; display: block; background: url(/img/arrow_gray.png) right bottom no-repeat; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px;}


#app_header header ul#header_link li ul.header_link_inner a:hover{background: #f3f3f3; position: relative;}
#app_header header ul#header_link li ul.header_link_inner a:hover:before{content: ""; display: block; background: url(/img/arrow_bk.png) right bottom no-repeat; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px;}

#app_header header ul#header_link li a.active{background: #eeeeee;}
#app_header header ul#header_link li a.active:before{content: ""; display: block; background: url(../imgarrow_bk.png) right bottom no-repeat; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px;}

#app_header header ul#header_link li ul.header_link_inner a.active{background: #eeeeee;}
#app_header header ul#header_link li ul.header_link_inner a.active:before{content: ""; display: block; background: url(../img/arrow_bk.png) right bottom no-repeat; width: 10px; height: 10px; position: absolute; bottom: 0px; right: 0px;}


@media screen and (max-width: 950px) {
	#app_header header ul#header_link{max-width: 950px; width:calc(100% - 20px); margin: auto 10px; display: flex; justify-content:flex-start; align-items: center;}
	#app_header header ul#header_link li{width: auto;}
	#app_header header ul#header_link li a{padding: 20px 10px 18px; width: auto;}
}


/* footer */
#app_footer {width: 100%; margin:auto; text-align: center;}
#app_footer footer #pagetop{border-bottom: 1px solid #e6e6e6; text-align: center;}
#app_footer footer #pagetop div{max-width:950px; width: 100%; margin: auto; text-align: right;}
#app_footer footer #pagetop div a{color: #333; background:url(/img/icon_arrow_top_gry.png) center bottom no-repeat #e6e6e6; display:inline-block; padding:5px 15px 5px 15px; text-decoration:none; margin-bottom:0px; font-family:'Lato', sans-serif; letter-spacing:1px; font-size: 11px; font-weight: bold;}
#app_footer footer #pagetop div a:hover	{background:url(/img/icon_arrow_top.png) center bottom no-repeat #2069c9; color:#FFF; }

#app_footer footer #footer_link{max-width:950px; width: 100%; margin: auto; padding: 10px 10px;}
#app_footer footer #footer_link ul{display: flex; justify-content: flex-start;}
#app_footer footer #footer_link ul li a{font-size: 12px; line-height: 1em; display: block; padding: 0px 15px 0px; text-decoration: none; border-right: 1px solid #ccc; color: #333;}
#app_footer footer #footer_link ul li a:first-child{border-left: 1px solid #ccc;}
#app_footer footer #footer_link ul li a:hover{text-decoration: underline; color: #2069c9;}

#app_footer footer #footerOutline{width: 100%; background: #6b6a6e; color: #d2d2d3; padding: 20px 0px;}
#app_footer footer #footerOutline dt{max-width:950px; width: 100%; margin: auto; text-align: left; padding: 0 10px;}
#app_footer footer #footerOutline dt img{width: 220px; height: auto; margin-bottom: 20px; }
#app_footer footer #footerOutline dd{max-width:950px; width: 100%; margin: auto; text-align: left; font-size:11px; line-height: 150%; padding: 0 10px;}

#app_footer footer #footerOutline + p{width: 100%; background: #6b6a6e; color: #d2d2d3; text-align: center; padding: 20px 0px 50px; border-top:1px solid #8a898c;
font-size:11px; line-height: 150%; margin-bottom: 0;}
#app_footer footer #footerOutline + p a{color: #d2d2d3; text-decoration: none;}



/* PAGE TOP */
#app_follow_link{position: fixed; right: 20px; bottom: 20px; z-index: 9999; }


#page-top {position: fixed; right: 10px; bottom: 10px; background: rgba(0,0,0,0.5);
border: 1px solid #fff; border-radius: 50%; border-right: 0; z-index: 9999; }
#page-top a{color: #FFF; font-size: 0; position: relative; display: block; width: 30px; height: 30px; padding: 10px;}
#page-top a:before{content: ""; display: block; 
    position: absolute; top: calc(50% - 24px); left: calc(50% - 12px);
width: 0; height: 0; border: 12px solid transparent; border-bottom: 20px solid rgba(255,255,255,0.9);}

#page-top{transition: all 0.5s ease-in-out; filter: drop-shadow(0 0px 3px rgba(0, 0, 0, .0));}
#page-top:hover{filter: drop-shadow(0 0px 5px rgba(0, 0, 0, .9));}
#page-top:hover a:before{border-bottom: 20px solid rgba(255,255,255,1.0);}