@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:13px; 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;}

@media screen and (max-width: 890px) {
	#app_header{position: relative; z-index:999; position: sticky; top:-1px; background: #FFF;}
	#app_header header input,label{display: none;}
	#app_header header{padding: 0; position:relative; top:0; z-index: 9;}
	#app_header header #site-description{display: none;}
	#app_header header #header_top_area{padding: 20px 10px;}
	#app_header header #header_top_area ul li:nth-child(n+2){display: none;}
	
	
    #app_header header ul#header_link{flex-wrap: wrap; transition: all 0.8s 0s ease; width: 100%; margin-top: 75px; padding-bottom: 50px; position: absolute; top:-1050px; border-top: 1px solid #e5e5e5; background: #f9f9f9;}
    #app_header header ul#header_link li{width: calc(100% - 0%); text-align: left; padding: 0px 0; margin:0 auto;  }
	#app_header header ul#header_link li:nth-child(1){margin: auto auto auto auto;}
	
	
    #app_header header ul#header_link li a{display: block; padding: 20px 15px 18px; border-bottom: 1px solid #e5e5e5; color: #222; font-weight: 600; text-decoration: none;}
	
	#app_header header ul#header_link li a{position: relative;}
	#app_header header ul#header_link li 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 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:hover{background: #eeeeee;}		
	#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(/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 ul.header_link_inner{position: relative; top:0px; opacity: 1; width: calc(100% - 0%);}
	#app_header header ul#header_link li a:hover + ul.header_link_inner{position: relative; top:0px; opacity: 1; width: calc(100% - 0%);}
    #app_header header ul#header_link li ul.header_link_inner:hover{position: relative; top:0px; opacity: 1;}
	#app_header header ul#header_link li ul.header_link_inner a{font-weight: normal; padding: 20px 15px 18px 30px!important;}

    #app_header header label{display: flex; height: 54px; width: 54px; justify-content: center; align-items: center; z-index: 90; /*background: rgba(0,0,0,0.8);*/ position: fixed; right:10px; top:10px; background: #2069c9;}
    #app_header header label span,#app_header header label span:before,#app_header header label span:after {content: '';display: block;height: 3px;width: 25px;border-radius: 3px;background-color: #ffffff;position: absolute;
    transition: all 0.2s 0s ease;}
    #app_header header label span:before {bottom: 8px;}
    #app_header header label span:after {top: 8px;}
    #app_header header input:checked ~ label{background: #2069c9;}
    #app_header header input:checked ~ label span{background-color: rgba(255, 255, 255, 0);}
    #app_header header input:checked ~ label span::before {bottom: 0;transform: rotate(45deg);}
    #app_header header input:checked ~ label span::after {top: 0; transform: rotate(-45deg);}
    #app_header header input:checked ~ label span{background-color: rgba(255, 255, 255, 0);}
    #app_header header input:checked ~ label span::before {bottom: 0;transform: rotate(45deg);}
    #app_header header input:checked ~ label span::after {top: 0; transform: rotate(-45deg);}
    #app_header header input:checked ~ ul#header_link{width: 100%; height: auto; /*position: absolute; */ position: relative; top:-70px;}
}

@media screen and (max-width: 390px) {
    #header header ul li{width: calc(100% - 10%); margin: 0 5%;}
}



/* footer */
@media screen and (max-width: 890px) {
	#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: left;}
	#app_footer footer #pagetop div a{color: #333; background:url(/img/icon_arrow_top_gry.png) center bottom no-repeat #e6e6e6; display: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{width: 100%; margin: auto; padding: 10px 0px;}
	#app_footer footer #footer_link ul li a{font-size: 12px; line-height: 1em; display: block; padding: 20px 15px 18px 30px; text-decoration: none; color: #333; text-align: left; border-bottom: 1px solid #e5e5e5;}
	
	#app_footer footer #footer_link ul li a{display: block; padding: 20px 15px 18px; border-bottom: 1px solid #e5e5e5; color: #222; text-decoration: none;}
	
	#app_footer footer #footer_link ul li a{position: relative;}
	#app_footer footer #footer_link ul li 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_footer footer #footer_link ul li 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_footer footer #footer_link ul li a:hover{background: #eeeeee;}
	

	#app_footer footer #footerOutline{width: 100%; background: #6b6a6e; color: #d2d2d3; padding: 20px 0px;}
	#app_footer footer #footerOutline dt{max-width:950px; width: calc(100% - 20px); 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: calc(100% - 20px); 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; }