@charset "utf-8";

body{font-size:100%;line-height:1.6;letter-spacing:0;}
html>/**/body{font-size:13px;line-height:1.6;letter-spacing:0;}
body{
	font-family:'Noto Sans JP',sans-serif;
	font:13px;
	*font-size:small;
	*font:x-small;
}

.serifFont{
	font-family:'Noto Serif JP', sans-serif;
}


/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */

html,body{height:100%;}
.areaWrap.second ul li a{
	color:#000000;
}

/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */

@media screen and (max-width:767px){
	.pcOnly{display:none !important;}


	.spMenu{
		width:96%;
		position:fixed;
		top:5px;
		z-index:10;
	}
	.overlay{
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,0.8);
		position:fixed;
		z-index:5;
		display:none;
	}
	.showElm{
		display:block;
	}

/* Humbuger Menu -------------------------- */

	#panel-btn{
		display:inline-block;
		position:relative;
		width:38px;
		height:38px;
		float:right;
		background-color:rgba(255,255,255,0.8);
	}
	#panel-btn-icon{
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		width:22px;
		height:2px;
		margin:-1px 0 0 -11px;
		background-color:rgba(0,0,0,1);
		transition:.2s;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-ms-border-radius:10px;
		border-radius:10px;
	}
	#panel-btn-icon:before, #panel-btn-icon:after{
		display:block;
		content:"";
		position:absolute;
		top:50%;
		left:0;
		width:22px;
		height:2px;
		background-color:rgba(0,0,0,1);
		transition:.3s;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		-ms-border-radius:10px;
		border-radius:10px;
	}
	#panel-btn-icon:before{margin-top:-8px;}
	#panel-btn-icon:after{margin-top:6px;}
	#panel-btn .close{background:transparent;}
	#panel-btn .close:before, #panel-btn .close:after{margin-top:0;}
	#panel-btn .close:before{
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
	}
	#panel-btn .close:after{
		transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
	}

/* ---------------------------------------- */

	.header .navWrap{
		position:fixed;
		width:90%;
		height:100%;
		overflow-y:scroll;
		padding:12% 0 0 0;
		margin-left:10%;
		z-index:9;
		top:0px;
		right:-90%;
		/*right:0;*/
		background-color:rgba(255,255,255,1);
		border-left:1px solid #eeeeee;
	}

	.header .navWrap .gNav{
		width:80%;
		margin:0 auto 0;
	}
	.headWrap .header .gNav li{
		border-bottom:1px solid #000000;
	}
	.headWrap .header .gNav li > a{
		display:block;
		font-size:5vw;
		color:#000000;
		padding:6% 0 6% 15%;
	}
	.header .navWrap .snsWrap{
		/*width:80%;*/
		width:150px;
		margin:5% auto 0;
		text-align:center;
	}

	.header .navWrap .snsWrap li{
		width:40px;
		height:40px;
		line-height:40px;
		float:left;
		margin-right:15px;
		/*width:25%;*/
	}
	.header .navWrap .snsWrap li:last-child{
		margin-right:0px;
	}
	.header .navWrap .snsWrap li a{
		display:block;
		width:40px;
		height:40px;
		line-height:40px;
		font-size:180%;
		color:#ffffff;
		text-align:center;
		border-radius:7px;
	}
	.header .navWrap .snsWrap .tw a{
		background-color:#04a7ff;
	}
	.header .navWrap .snsWrap .fb a{
		background-color:#1f3ba2;
	}
	/*.header .navWrap .snsWrap .ln a{
		color:#00b900;
	}*/

/* ---------------------------------------- */

	.header{
		padding:2% 0 2% 3%;
	}
	.header .headLogo{
		width:200px;
	}

/* ----------------------------------------- */

	.mainVisWrap{
		border-top:4px solid #ffd200;
	}

/* ----------------------------------------- */

	.areaWrap{
		padding:13% 0;
	}
	.areaWrap .ttlWrap:before{
		content:"";
		display:block;
		background-color:#ffff00;
		position:absolute;
		z-index:1;
	}
	.areaWrap .ttlWrap h2{
		font-size:7vw;
		font-weight:600;
		letter-spacing:2px;
		text-align:center;
		line-height:1;
		position:relative;
		z-index:5;
	}

/* ----------------------------------------- */

	.areaWrap.first{
		background-color:#f0f0f0;
	}
	.areaWrap.first .outerWrap{
		width:90.63%;
		margin:0 auto;
	}
	.areaWrap.first .ttlWrap{
		width:35%;
		margin:0 auto;
		position:relative;
	}
	.areaWrap.first .ttlWrap:before{
		width:30%;
		height:140%;
		top:-8px;
		left:-12px;
	}
	.areaWrap.first .newsWrap{
		width:98%;
		height:220px;
		padding:8%;
		margin:8% auto 0;
		background-color:#ffffff;
		overflow-y:scroll;
	}
	.areaWrap.first .newsWrap .inner .itemWrap{
		border-bottom:1px dotted #000000;
		padding:15px 0 15px 0;
	}
	.areaWrap.first .newsWrap .inner > div:nth-of-type(1){
		padding:0 0 15px 0;
	}


/* ----------------------------------------- */

	.areaWrap.second .outerWrap{
		width:87.5%;
		margin:0 auto;
	}
	.areaWrap.second .ttlWrap{
		width:45%;
		margin:0 auto;
		position:relative;
	}
	.areaWrap.second .ttlWrap:before{
		width:24%;
		height:140%;
		top:-8px;
		left:-12px;
	}

	.areaWrap.second .publisher{
		margin:8% auto 0;
		padding:6px 0;
		line-height:1;
		font-size:4.6vw;
		text-align:center;
		background-color:#f0f0f0;
	}

	.areaWrap.second ul li{
		width:46%;
		margin:10% 8% 0 0;
		float:left;
	}
	.areaWrap.second ul li:nth-of-type(1),
	.areaWrap.second ul li:nth-of-type(2){
		margin-top:6%;
	}
	.areaWrap.second ul li:nth-child(2n){
		margin-right:0;
	}
	.areaWrap.second ul li a{
		display:block;
	}
	.areaWrap.second ul li a h3{
		font-size:3.2vw;
		padding:8% 0 6%;
		border-bottom:1px solid #000000;
		line-height:1.4;
	}
	.areaWrap.second ul li a .desc{
		font-size:3.2vw;
		margin:6% 0 0 0;
		line-height:1.4;
	}
	.areaWrap.second img {
		border: 1px #666 solid;
	}

/* ----------------------------------------- */

	.areaWrap.third{
		background:url(../images/area03bg.gif) 50% -0 repeat-y;
		background-size:100% auto;
	}
	.areaWrap.third .outerWrap{
		width:95%;
		margin:0 auto;
	}
	.areaWrap.third .ttlWrap{
		width:45%;
		margin:0 auto;
		position:relative;
		/*background-color:#fcc;*/
	}
	.areaWrap.third .ttlWrap:before{
		width:22.5%;
		height:68%;
		top:-8px;
		left:-12px;
	}
	.areaWrap.third .ttlWrap p{
		width:100%;
		margin:5px 0 0 0;
		font-size:3.2vw;
		letter-spacing:2px;
		text-align:center;
	}

	.areaWrap.third .inner .img01{
		margin:10% 0 0 0;
	}
	.areaWrap.third .inner .img02{
		margin:12% 0 0 0;
	}
	.areaWrap.third .inner .img04{
		margin:12% 0 0 0;
	}

/* ----------------------------------------- */

	.areaWrap.fourth{
		background-color:#f0f0f0;
	}
	.areaWrap.fourth .ttlWrap{
		width:50%;
		margin:0 auto;
		position:relative;
		/*background-color:#fcc;*/
	}
	.areaWrap.fourth .ttlWrap:before{
		width:19%;
		height:140%;
		top:-8px;
		left:-12px;
	}

	.areaWrap.fourth .inner{
		margin:10% 0 0 0;
	}
	.areaWrap.fourth .inner .imgBox{
		width:55%;
		margin:0 auto;
	}
	.areaWrap.fourth .inner .imgBox p{
		font-size:3vw;
		text-align:right;
	}
	.areaWrap.fourth .inner .txtBox{
		width:90%;
		margin:6% auto 0;
		padding:8% 0 0 0;
		position:relative;
	}
	.areaWrap.fourth .inner .txtBox:before{
		content:"";
		display:block;
		width:80%;
		height:80%;
		background-color:#ffffff;
		position:absolute;
		right:0px;
		top:0px;
		z-index:1;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01{
		width:90%;
		padding:0 20px 10px 20px;
		background-color:#ffff00;
		position:relative;
		z-index:2;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 h3{
		font-size:8vw;
		letter-spacing:8px;
		position:relative;
		top:-13px;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 h3 span{
		font-size:3.6vw;
		letter-spacing:3px;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 p{
		font-size:3.6vw;
		position:relative;
		top:-10px;
		line-height:2;
	}

/* ----------------------------------------- */

	.areaWrap.fifth .ttlWrap{
		width:45%;
		margin:0 auto;
		position:relative;
		/*background-color:#fcc;*/
	}
	.areaWrap.fifth .ttlWrap:before{
		width:24%;
		height:140%;
		top:-8px;
		left:-12px;
	}
	.areaWrap.fifth .topBnr{
		width:70%;
		margin:10% auto 0;
	}
	.areaWrap.fifth ul{
		width:90.63%;
		margin:8% auto 0;
	}
	.areaWrap.fifth ul li{
		width:32%;
		margin:4% 2% 0 0; 
		float:left;
	}
	.areaWrap.fifth ul li:nth-of-type(1),
	.areaWrap.fifth ul li:nth-of-type(2),
	.areaWrap.fifth ul li:nth-of-type(3){
		margin-top:0px;
	}
	.areaWrap.fifth ul li:nth-child(3n){
		margin-right:0;
	}

/* ----------------------------------------- */

	.footWrap{
		background-color:#ffd21d;
	}
	.copyright{
		font-size:3.4vw;
		color:#ffffff;
		text-align:center;
		line-height:1;
		padding:10px 0;
	}
	
/* ----------------------------------------- */

	.rtt{
		/*width:60px;
		height:60px;*/
		width:40px;
		height:40px;
		display:block;
		position:fixed;
		right:3%;
		bottom:3%;
		z-index:9999;
		/*opacity:0.7;*/
	}

}

/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////// */

@media screen and (min-width:768px){
	.spOnly{display:none !important;}

	.header{
		width:1000px;
		padding:10px 0;
		margin:0 auto;
	}
	.header .headLogo{
		width:290px;
		float:left;
		background:#fcc;
	}
	.header .navWrap{
		width:710px;
		float:left;
	}

	.header .navWrap .gNav{
		width:580px;
		float:left;
		padding:10px 0;
	}
	.header .navWrap .snsWrap{
		width:120px;
		padding:7px 0 0 0;
		float:right;
	}

	.header .navWrap .gNav li{
		float:left;
		padding:1px 35px;
		border-right:1px solid #000000;
	}
	.header .navWrap .gNav li:last-child{border-right:none;}
	.header .navWrap .gNav li a{
		color:#000000;
		font-size:120%;
		font-weight:700;
	}

	.header .navWrap .snsWrap li{
		width:30px;
		margin-right:5px;
		float:left;
		/*background:#fcc;*/
	}
	.header .navWrap .snsWrap li:last-child{
		margin-right:0px;
	}

	.header .navWrap .snsWrap li a{
		display:block;
		width:30px;
		height:30px;
		line-height:30px;
		font-size:150%;
		color:#ffffff;
		text-align:center;
		border-radius:7px;
	}

	.header .navWrap .snsWrap .tw a{
		background-color:#04a7ff;
	}
	.header .navWrap .snsWrap .fb a{
		background-color:#1f3ba2;
	}

/* ----------------------------------------- */

	.mainVisWrap{
		border-top:6px solid #ffd200;
	}

/* ----------------------------------------- */

	.areaWrap{
		padding:60px 0;
	}
	.areaWrap .outerWrap{
		width:1000px;
		margin:0 auto;
	}
	.areaWrap .ttlWrap:before{
		content:"";
		display:block;
		width:45px;
		height:45px;
		background-color:#ffff00;
		position:absolute;
		top:-5px;
		left:-10px;
		z-index:1;
	}
	.areaWrap .ttlWrap h2{
		font-size:320%;
		font-weight:600;
		letter-spacing:2px;
		text-align:center;
		line-height:1;
		position:relative;
		z-index:5;
	}

/* ----------------------------------------- */

	.areaWrap.first{
		background-color:#f0f0f0;
	}

	.areaWrap.first .ttlWrap{
		width:180px;
		margin:0 auto;
		position:relative;
	}


	.areaWrap.first .newsWrap{
		width:820px;
		/*height:300px;*/
		padding:40px;
		margin:50px auto 0;
		background-color:#ffffff;
		overflow-y:scroll;
	}
	.areaWrap.first .newsWrap .inner .itemWrap{
		border-bottom:1px dotted #000000;
		padding:15px 0 15px 0;
	}
	.areaWrap.first .newsWrap .inner > div:nth-of-type(1){
		padding:0 0 15px 0;
	}
	.areaWrap.first .newsWrap .inner .itemWrap .dateBox{
		width:130px;
		float:left;
	}
	.areaWrap.first .newsWrap .inner .itemWrap .bodyBox{
		width:610px;
		float:left;
	}


/* ----------------------------------------- */

	.areaWrap.second .outerWrap{
		width:880px;
		margin:0 auto;
	}
	.areaWrap.second .ttlWrap{
		width:240px;
		margin:0 auto;
		position:relative;
	}

	.areaWrap.second .publisher{
		margin:50px auto 0;
		padding:10px 0;
		line-height:1;
		font-size:160%;
		text-align:center;
		background-color:#f0f0f0;
	}

	.areaWrap.second ul li{
		width:250px;
		margin:90px 65px 0 0;
		float:left;
	}
	.areaWrap.second ul li:nth-of-type(1),
	.areaWrap.second ul li:nth-of-type(2),
	.areaWrap.second ul li:nth-of-type(3){
		margin-top:45px;
	}
	.areaWrap.second ul li:nth-child(3n){
		margin-right:0;
	}
	.areaWrap.second ul li a{
		display:block;
	}
	.areaWrap.second ul li a h3{
		font-size:110%;
		padding:50px 0 15px;
		border-bottom:1px solid #000000;
	}
	.areaWrap.second ul li a h3:nth-of-type(1){
		padding:20px 0 15px;
	}
	.areaWrap.second ul li a .desc{
		margin:15px 0 0 0;
	}
	.areaWrap.second img {
		border: 1px #666 solid;
	}

/* ----------------------------------------- */

	.areaWrap.third{
		background:url(../images/area03bg.gif) 0 -270px repeat-y;
		background-size:100% auto;
	}

	.areaWrap.third .ttlWrap{
		width:240px;
		margin:0 auto;
		position:relative;
	}
	.areaWrap.third .ttlWrap p{
		width:100%;
		margin:5px 0 0 0;
		letter-spacing:2px;
		text-align:center;
	}

	.areaWrap.third .inner .img01{
		margin:50px 0 0 0;
	}
	.areaWrap.third .inner .img02{
		margin:150px 0 0 0;
	}
	.areaWrap.third .inner .img04{
		margin:150px 0 0 0;
	}

/* ----------------------------------------- */

	.areaWrap.fourth{
		background-color:#f0f0f0;
	}
	.areaWrap.fourth .outerWrap{
		width:920px;
		margin:0 auto;
	}
	.areaWrap.fourth .ttlWrap{
		width:280px;
		margin:0 auto;
		position:relative;
	}

	.areaWrap.fourth .inner{
		margin:60px 0 0 0;
	}
	.areaWrap.fourth .inner .imgBox{
		width:285px;
		float:left;
	}
	.areaWrap.fourth .inner .imgBox p{
		font-size:11px;
		text-align:right;
	}
	.areaWrap.fourth .inner .txtBox{
		width:580px;
		padding:40px 0 0 0;
		position:relative;
		float:right;
	}
	.areaWrap.fourth .inner .txtBox:before{
		content:"";
		display:block;
		width:80%;
		height:80%;
		background-color:#ffffff;
		position:absolute;
		right:0px;
		top:0px;
		z-index:1;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01{
		width:540px;
		padding:0 30px 10px 30px;
		background-color:#ffff00;
		position:relative;
		z-index:2;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 h3{
		font-size:340%;
		letter-spacing:20px;
		position:relative;
		top:-30px;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 h3 span{
		font-size:40%;
		letter-spacing:5px;
	}
	.areaWrap.fourth .inner .txtBox .innerBox01 p{
		font-size:125%;
		position:relative;
		top:-20px;
		line-height:2;
	}

/* ----------------------------------------- */

	.areaWrap.fifth .ttlWrap{
		width:220px;
		margin:0 auto;
		position:relative;
	}
	.areaWrap.fifth .topBnr{
		width:360px;
		margin:50px auto 0;
	}
	.areaWrap.fifth ul{
		width:980px;
		margin:40px auto 0;
	}
	.areaWrap.fifth ul li{
		width:180px;
		margin:20px 20px 0 0; 
		float:left;
	}
	.areaWrap.fifth ul li:nth-of-type(1),
	.areaWrap.fifth ul li:nth-of-type(2),
	.areaWrap.fifth ul li:nth-of-type(3),
	.areaWrap.fifth ul li:nth-of-type(4),
	.areaWrap.fifth ul li:nth-of-type(5){
		margin-top:0px;
	}
	.areaWrap.fifth ul li:nth-child(5n){
		margin-right:0;
	}

/* ----------------------------------------- */

	.footWrap{
		background-color:#ffd21d;
	}
	.copyright{
		color:#ffffff;
		text-align:center;
		line-height:1;
		padding:20px 0;
	}
	
/* ----------------------------------------- */

	.rtt{
		width:70px;
		height:70px;
		display:block;
		position:fixed;
		right:2%;
		bottom:5%;
		z-index:100;
	}
	
}