@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.nav{padding:20px 0 30px 0; background: url(images/header_bg.png) no-repeat bottom center; background-size:cover;}
.nav ul li a{color:#022c33; font-size:18px; padding:.8em 2em; letter-spacing: 2px; border-right:1px solid #ccc; cursor: pointer;}
.nav ul li:first-of-type a{border-left:1px solid #ccc;}
.nav ul li a:hover{color: #e8387b;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top:0px; padding-bottom:0px; transition:.3s;}
#header .page{padding:0;}
#header.show{padding-top:0px; padding-bottom:0px;}
/*default use*/
#defaultimg{position:relative; line-height: 0; overflow: hidden;}
#defaultimg .mask{width:100%; height:auto; position:absolute; bottom:0; left:0; z-index: 190;}
.fixedbtn{position:fixed; right:5px; top:40vh; border-radius:100%; display:block; background:#fd6602; padding:5px; width:60px; height:54px; text-align: center; z-index: 300;}


/*list*/
.list{padding:1em;}

.list h3{font-weight:normal; margin:0; color:#226EB5;}
.list a{width:100%; diaplay:block; float:left; color:#666; background:linear-gradient(45deg,#f5f5f5 30%,#e6e5db 50%,#f5f5f5 60%); box-shadow: 0 0 10px rgba(0,0,0,0.2); padding:10px;}
.list a:hover{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background:linear-gradient(45deg,#f5f5f5 0%,#e6e5db 10%,#f5f5f5 20%);}
.list figure img{transition:.3s;}
.list a:hover img{transform:scale(1.05, 1.05);}
.list a:hover .innerhtml{color:#333;}
.list a:hover p.more{color:#f00;}
.list a:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figcaption{position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; text-align: center; color:#fff; background:rgba(1,66,131,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list  p.more{text-align:right; margin:0; color:#666; font-size:12px;}
.list figcaption span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/*default use*/
.tit{font-size:38px; color:#d5676f;}
.tit span{color:#e08d93;}
.d-area{background:#fdeded; text-align: center; padding:3em 0;}
.d-area p{line-height:1.6em;}
.d-area .list{padding:1.5em 1em;}
.d-area .list a{padding:0; background:none; box-shadow: none; text-align: center;}
.d-area .list figure{text-align:center; display: block; overflow:hidden; border-radius:25px 25px 0 0;}
.d-area .list h3.subject{color:#333; font-size:18px; letter-spacing: 3px; padding:10px 5px; font-weight:bold; margin-top:0em; background:#f3daa4; border-radius:0 0 25px 25px;}
.d-area .list .innerhtml{font-size:15px; color:#000; padding:0.5em; line-height: 180%; margin-top:0.5em;}
.darea2{background:url(images/d2-bg.jpg) no-repeat center; padding:3em 0; min-height:60vh; line-height:2em;}
.darea2 .col-7{float:right; position:relative; padding:3em 1em;}
.darea3{background:url(images/d3-bg.jpg) no-repeat center; padding:3em 0; min-height:60vh; line-height:2em;}
.darea4{position:relative; padding:3em 0; min-height:50vh; background:#f3f3f5;}
.darea4 .col-6{float:right; z-index:3; position:relative;}
.darea4::before{content:""; width:50%; height:100%; position:absolute; left:0; top:0; display: block; background:url(images/d4-bg.jpg) no-repeat left center; background-size:cover;}
.darea4 .list{border-bottom:1px solid #e28f99;}
.darea4 .list a{background:none; box-shadow:none; padding:0;}
.darea4 .list .path{text-align:left; color:#d5676f; margin-bottom:0.5em; font-size:18px;}
.darea4 .list .path span{background:#e8387b; color:#fff; display:inline-block; padding:0.5em 2em; margin-right:1em;}
.darea4 .list h3.subject{color:#333;}
.darea4 .list .innerhtml{font-size:13px;}
.darea4 .btn a{background:#45a5b3; color:#fff; display: inline-block;}

/*content*/
.sidetit{font-weight:normal; color:#163f92; background:#efefef; padding:0.5em 0.3em;}
h1.subject{font-size:24px;}

/*footer*/
#footer{font-size:16px; color:#fff; background:#f85c6a; word-break: break-all; line-height: 1.5em; padding-top:1em; text-align: center;}
#footer .copyright{font-size:36px; font-weight:bold; background:#f85c6a; padding:20px 0 30px 0; position:relative; line-height: 140%;}
#footer .copyright::after{content:""; width:20px; height:20px; background:#f85c6a; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%) rotate(45deg);}

#footer .address{font-size:15px;}

#footer .info{background:#e78890; vertical-align: middle; padding:10px 0;}
#footer .info img{vertical-align:middle;}
#footer a{color:#fff; vertical-align: middle; display: inline-block; font-size:28px; padding:5px;}
@media screen and (max-width:1280px){/*desktop*/
	.logo img{max-width:50%; height:auto;}
	.page{padding:0 3%;}
	.nav{padding:10px 0 25px 0;}
	.nav ul li a{font-size:16px;}
	.darea2{background:url(images/d2-bg.jpg) no-repeat; background-position:22%;}
	.darea3{background:url(images/d3-bg.jpg) no-repeat right center; 
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav{padding:10px 0 20px 0;}
	.nav ul li a{padding-left:0.3em; padding-right:0.3em; font-size:15px;}
	#footer .rr::before{background-size:100%;}
	.darea2{background-position:left; min-height:auto;}
	.darea3, .darea4{min-height:auto; background-position:center; background-size:cover;}
	.darea3{background-position:right; }
	.darea4 .col-6{background:rgba(255,255,255,.7);}
	.darea4::before{background-position:center; width:100%;}
	.darea2 .con, .darea3 .con{text-align:center;}
	.darea2 .con, .darea3 .con, .darea4 .con{background:rgba(255,255,255,.6); padding:3%;}
}
@media screen and (max-width:767px){/*phone*/
	#header{background:#fff;}
	.logo img{max-width:70%; padding:3px 0;}
	.page{padding:0;}
	.nav{padding:0; background:#333;}
	.nav ul li a{color:#ccc; padding:0.5em; border:none;}
	.nav ul li:first-of-type a,.nav ul.mobile li:first-of-type{border:none;}
	.nav ul li{ border-bottom:1px solid #666;}
	.nav ul.mobile{background:#d5676f;}
	.nav ul.mobile li{display:inline-block; width:20%; font-size:13px; padding:0; border:none; border-left:1px solid #fff;}
	.nav ul.mobile li a{color:#fff; padding:0; letter-spacing: 0;}
	.d-area{padding:1em 0;}
	.darea4::before{display:none;}
	.darea2, .darea3, .darea4{padding:0;}
	.tit{font-size:28px;}
}