@charset "utf-8";

#body_layout.a_type .body_wrap,
#body_layout.b_type .body_wrap,
#body_layout.c_type .body_wrap{ margin:0 auto; display:block;}

section{ width:100%; font-family:ngn; color:#fff; text-align:center; letter-spacing:0; padding:0; margin:0; display:inline-block; position:relative;}
.thumbResize_A{ overflow:hidden; position:relative;}
.thumbResize_A img{ width:100%; max-width:none; padding:0; margin:0; display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}

.sliderBox,
.sliderBox ul,
.sliderBox ul li,
.grap,
.grap .obj,
.grap .obj .item{ width:100%; height:100%; padding:0; margin:0; display:inline-block;}
.sliderBox,
.grap{ overflow:hidden; position:relative;}
.grap .obj{ position:absolute; top:0; left:0;}
.grap .obj .item,
.sliderBox ul li{ float:left;}

.visual_wrap{ overflow:hidden;}
.visual_wrap:after{ width:10000px; height:300px; background-color:#fff; content:""; margin:0 0 0 -5000px; position:absolute; bottom:-155px; left:50%; transform:rotate(-2.7deg);}
.visual_wrap .body_wrap{ position:relative;}
.visual_wrap .body_wrap p{ width:570px; font-family:nsk; font-weight:400; font-size:50px; color:#fff; text-align:left; line-height:60px; word-break:keep-all; display:inline-block; position:absolute; top:190px; left:0; z-index:1;}
.visual_wrap .body_wrap p span{ width:100%; font-weight:100; font-size:22px; color:#fff; line-height:26px; padding:25px 0 0 0; margin:25px 0 0 0; display:inline-block; position:relative;}
.visual_wrap .body_wrap p span:before{ width:60px; height:1px; background-color:#fff; content:""; position:absolute; top:0; left:0;}
.visual_wrap .sliderBox li{ height:720px;}
.visual_wrap .btn_area{ display:inline-block; position:absolute; bottom:180px; left:50%; transform:translateX(-50%);}
.visual_wrap .btn_area button{ width:20px; height:19px; font-size:0; text-indent:-9999px; margin:0 5px; display:inline-block; float:left; position:relative;}
.visual_wrap .btn_area button:before{ width:8px; height:12px; background:url(../../images/jpa/main/main_ir.png) no-repeat -44px -1px; margin:-6px 0 0 -4px; content:""; position:absolute; top:50%; left:50%;}
.visual_wrap .btn_area button.btn_stop:before{ width:7px; background-position:-34px -1px; margin:-6px 0 0 -3px;}
.visual_wrap .btn_area .paging{ display:inline-block; float:left;}
.visual_wrap .btn_area .paging button:before{ width:7px; height:7px; background-position:-24px -1px; margin:-3px 0 0 -3px;}
.visual_wrap .btn_area .paging button.on:before{ width:20px; height:19px; background-position:-1px -1px; margin:-10px 0 0 -10px;}

.introduction_wrap{ width:100%; padding:95px 0 70px 0; margin:-145px 0 0 0; display:inline-block; overflow:hidden; position:relative;}
.introduction_wrap:before{ width:357px; height:460px; background:url(../../images/jpa/main/main_ir.png) no-repeat -76px -1px; content:""; margin-left:-950px; position:absolute; top:37px; left:50%;}
.introduction_wrap:after{ width:298px; height:283px; background:url(../../images/jpa/main/main_ir.png) no-repeat -436px -1px; content:""; margin-left:670px; position:absolute; top:45px; left:50%;}
/*.introduction_wrap > .body_wrap > strong{ width:298px; height:47px; background:url(../../images/jpa/main/main_ir.png) no-repeat -737px -1px; font-size:0; text-indent:-9999px; margin:0 auto 40px auto; display:block; position:relative;}*/
.introduction_wrap > .body_wrap > strong{margin:0 auto 40px auto; display:block; position:relative;font-weight:bold;font-size:36px}
.introduction_wrap > .body_wrap > strong:before{ width:1px; height:70px; background-color:#cacfd5; content:""; position:absolute; top:-95px; left:50%;}

.greeting_wrap{ width:600px; height:300px; background:url(../../images/jpa/main/greeting_bg.png) repeat-y top left; background-size:100%; text-align:left; padding:32px 40px; float:left; z-index:0;}
.greeting_wrap:before{ width:248px; height:300px; background:url(../../images/jpa/main/main_ir.png) no-repeat -1038px -1px; content:""; position:absolute; bottom:0; right:0; z-index:-1;}
.greeting_wrap h2{ font-weight:600; font-size:22px; line-height:30px; margin-bottom:15px;}
.greeting_wrap p{ width:100%; font-weight:100; font-size:15px; line-height:21px; display:inline-block;}
.greeting_wrap p em{ font-weight:600; font-size:23px; color:#ff6000; line-height:26px; display:inline-block; vertical-align:bottom;}
.greeting_wrap p span{ width:100%; margin-top:5px; display:inline-block;}
.greeting_wrap a{ font-size:14px; line-height:30px; padding:0; margin:28px 0 0 0; display:inline-block;}
.greeting_wrap a:after{ width:30px; height:30px; background:url(../../images/jpa/main/main_ir.png) no-repeat -1369px -1px; content:""; margin-left:20px; display:inline-block; vertical-align:middle;}

.about_wrap{ width:300px; height:300px; background:url(../../images/jpa/main/about_bg.png) no-repeat; background-size:cover; text-align:left; padding:40px; margin:0 20px; float:left;}
.about_wrap h2{ width:100%; font-weight:600; font-size:22px; text-align:center; line-height:30px; margin-bottom:15px;}
.about_wrap h2 span{ color:#f9dd07;}
.about_wrap a{ padding:0; margin:10px 0 0 0; display:block; position:relative;}
.about_wrap a:before{ width:40px; height:40px; background:url(../../images/jpa/main/main_ir.png) no-repeat; content:""; margin-top:-20px; position:absolute; top:50%; left:0;}
.about_wrap a.n1:before{ background-position:-1422px -1px;}
.about_wrap a.n2:before{ background-position:-1465px -1px;}
.about_wrap a.n3:before{ background-position:-1508px -1px;}
.about_wrap a.n1:focus:before,
.about_wrap a.n1:hover:before{ background-position:-1422px -44px;}
.about_wrap a.n2:focus:before,
.about_wrap a.n2:hover:before{ background-position:-1465px -44px;}
.about_wrap a.n3:focus:before,
.about_wrap a.n3:hover:before{ background-position:-1508px -44px;}
.about_wrap a span{ height:40px; line-height:19px; padding:0 0 0 46px; display:table-cell; vertical-align:middle;}
.about_wrap a span span{ height:auto; padding:0;}

.weather_wrap{ width:300px; height:300px; background-color:#445a7c; padding:40px; float:left;}
.weather_wrap h2{ width:100%; font-weight:600; font-size:22px; text-align:center; line-height:30px; margin-bottom:15px;}
.weather_wrap h2 span{ color:#f9dd07;}
.weather_wrap p{ width:100%; padding:0; margin:10px 0 0 0; display:inline-block;}
.weather_wrap p.img{ height:80px; font-size:0; text-indent:-9999px; margin:0; position:relative;}
.weather_wrap p.img:before{ width:80px; height:80px; background:url(../../images/jpa/main/main_ir.png) no-repeat -1571px -1px; content:""; margin:-40px 0 0 -40px; position:absolute; top:50%; left:50%;}
.weather_wrap p.date{ font-weight:100; font-size:17px; line-height:20px;}
.weather_wrap p.temperature{ font-weight:100; font-size:28px; line-height:32px;}
.weather_wrap p.temperature span{ font-family:nsk; font-weight:600;}
.weather_wrap.t1 p.img:before{ background-position:-1571px -1px;}
.weather_wrap.t2 p.img:before{ background-position:-1654px -1px;}
.weather_wrap.t3 p.img:before{ background-position:-1737px -1px;}
.weather_wrap.t4 p.img:before{ background-position:-1820px -1px;}
.weather_wrap.t5 p.img:before{ background-position:-1903px -1px;}
.weather_wrap.t6 p.img:before{ background-position:-1986px -1px;}
.weather_wrap.t7 p.img:before{ background-position:-2069px -1px;}
.weather_wrap.t8 p.img:before{ background-position:-2152px -1px;}
.weather_wrap.t9 p.img:before{ background-position:-2235px -1px;}
.weather_wrap.t10 p.img:before{ background-position:-2318px -1px;}

.service_wrap{ background-color:#3f61b2; padding:49px 0 28px 0;}
/*.service_wrap h2{ width:274px; height:19px; background:url(../../images/jpa/main/main_ir.png) no-repeat -2421px -1px; font-size:0; text-indent:-9999px; margin:21px 0; display:inline-block;}*/
.service_wrap h2{ display:block; position:relative;font-weight:bold;font-size:36px;margin:21px 0; color:#fff}
.service_wrap .grap{ height:152px;}
.service_wrap .grap .obj .item{ width:20%; height:152px;}
.service_wrap .grap .obj .item a{ width:100%; height:100%; text-align:center; padding:98px 0 0 0; display:table; position:relative; z-index:0;}
.service_wrap .grap .obj .item a:before{ width:98px; height:98px; background:url(../../images/jpa/main/main_ir.png) no-repeat -2698px -1px; content:""; content:""; margin-left:-49px; position:absolute; top:0; left:50%;}
.service_wrap .grap .obj .item a:focus:after,
.service_wrap .grap .obj .item a:hover:after{ width:98px; height:98px; background-color:#000; content:""; opacity:0.1; margin-left:-49px; border-radius:50%; position:absolute; top:0; left:50%; z-index:-1;}
.service_wrap .grap .obj .item a span{ width:100%; height:54px; font-size:16px; line-height:20px; display:table-cell; vertical-align:middle;}
.service_wrap .grap .obj .item.n1 a:before{ background-position:-2698px -1px;}
.service_wrap .grap .obj .item.n2 a:before{ background-position:-2799px -1px;}
.service_wrap .grap .obj .item.n3 a:before{ background-position:-2900px -1px;}
.service_wrap .grap .obj .item.n4 a:before{ background-position:-3001px -1px;}
.service_wrap .grap .obj .item.n5 a:before{ background-position:-3102px -1px;}
.service_wrap .control button{ display:none;}

.festival_wrap{ background:url(../../images/jpa/main/festival_bg.png) no-repeat center top; background-size:cover; padding:65px 0 78px 0; overflow:hidden;}
.festival_wrap:before{ width:1844px; height:496px; background:url(../../images/jpa/main/main_ir.png) no-repeat -3407px -1px; content:""; margin-left:-922px; position:absolute; top:0; left:50%;}
/*.festival_wrap h2{ width:181px; height:47px; background:url(../../images/jpa/main/main_ir.png) no-repeat -6397px -1px; font-size:0; text-indent:-9999px; margin:0 0 50px 0; display:inline-block;}*/
.festival_wrap h2{ display:block; position:relative;font-weight:bold;font-size:36px;margin:21px 0; color:#fff}

.festival_wrap .grap{ height:300px; overflow:visible;}
.festival_wrap .grap .obj .item{ width:210px; height:300px;}
.festival_wrap .grap .obj .item + .item{ margin-left:47px;}
.festival_wrap .grap .obj .item a{ width:100%; height:100%; text-align:center; padding:210px 0 0 0; display:table; position:relative; z-index:0;}
.festival_wrap .grap .obj .item a:before{ width:210px; height:210px; background:url(../../images/jpa/main/main_ir.png) no-repeat -5254px -1px; content:""; content:""; margin-left:-105px; position:absolute; top:0; left:50%;}
.festival_wrap .grap .obj .item a:focus:after,
.festival_wrap .grap .obj .item a:hover:after{ width:210px; height:210px; background-color:#000; content:""; opacity:0.5; margin-left:-105px; border-radius:50%; position:absolute; top:0; left:50%; z-index:1;}
.festival_wrap .grap .obj .item a span{ width:100%; height:90px; font-size:16px; line-height:20px; display:table-cell; vertical-align:middle;}
.festival_wrap .grap .obj .item a span.mark{ width:75px; height:73px; background:url(../../images/jpa/main/main_ir.png) no-repeat -6319px -1px; margin-left:52px; position:absolute; top:0; left:50%; z-index:-1;}
.festival_wrap .grap .obj .item a:focus span.mark,
.festival_wrap .grap .obj .item a:hover span.mark{ display:inline-block;}
.festival_wrap .grap .obj .item a span.mark,
.festival_wrap .grap .obj .item a span.mark:before,
.festival_wrap .grap .obj .item a span.mark:after{ display:none;}
.festival_wrap .grap .obj .item a:focus span:before,
.festival_wrap .grap .obj .item a:hover span:before{ width:73px; height:1px; background-color:#fff; content:""; margin-left:-36px; position:absolute; top:105px; left:50%; z-index:2;}
.festival_wrap .grap .obj .item a:focus span:after,
.festival_wrap .grap .obj .item a:hover span:after{ width:1px; height:73px; background-color:#fff; content:""; position:absolute; top:69px; left:50%; z-index:2;}
.festival_wrap .grap .obj .item.n1 a:before{ background-position:-5254px -1px;}
.festival_wrap .grap .obj .item.n2 a:before{ background-position:-5467px -1px;}
.festival_wrap .grap .obj .item.n3 a:before{ background-position:-5680px -1px;}
.festival_wrap .grap .obj .item.n4 a:before{ background-position:-5893px -1px;}
.festival_wrap .grap .obj .item.n5 a:before{ background-position:-6106px -1px;}
.festival_wrap .control button{ display:none;}

.btn_top{ width:70px; height:70px; background-color:#565d6e; font-size:13px; color:#fff; text-align:center; line-height:15px; padding:40px 0 0 0; position:absolute; bottom:0; right:0;}
.btn_top:before{ width:18px; height:18px; content:""; margin-left:-9px; border-top:1px solid #fff; border-left:1px solid #fff; position:absolute; top:20px; left:50%; transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); -webkit-transform:rotate(45deg);}

@media (max-width:1359px){
	#body_layout{ padding:0;}
	
	#body_layout .body_wrap{ padding-left:60px; padding-right:60px;}
	
	.visual_wrap:after{ bottom:-265px;}
	.visual_wrap .body_wrap p{ top:150px; left:60px;}
	.visual_wrap .sliderBox li{ height:500px;}
	.visual_wrap .btn_area{ bottom:60px;}
	
	.introduction_wrap{ margin-top:-35px;}
	
	.greeting_wrap{ width:48.89%; height:226px; padding:30px;}
	.about_wrap,
	.weather_wrap{ width:24.33%; height:226px; padding:30px;}
	.about_wrap{ padding:30px 20px; margin:0 1.225%;}
	.greeting_wrap:before{ width:187px; height:226px; background-position:-746px -541px;}
	.greeting_wrap h2,
	.weather_wrap h2{ font-size:19px; line-height:22px; margin-bottom:10px;}
	.about_wrap h2{ font-size:16px; line-height:20px; margin-bottom:5px;}
	.about_wrap a span{ font-size:13px; line-height:16px;}
	.greeting_wrap p{ font-size:13px; line-height:19px;}
	.greeting_wrap a{ margin-top:14px;}
	.weather_wrap p.date{ font-size:14px; margin-top:0;}
	.weather_wrap p.temperature{ font-size:24px; margin-top:0;}
	
	.festival_wrap .grap{ height:232px;}
	.festival_wrap .grap .obj .item{ width:20%; height:232px;}
	.festival_wrap .grap .obj .item + .item{ margin:0;}
	.festival_wrap .grap .obj .item a{ padding-top:142px;}
	.festival_wrap .grap .obj .item a:before{ width:142px; height:142px; margin-left:-71px;}
	.festival_wrap .grap .obj .item a:focus:after,
	.festival_wrap .grap .obj .item a:hover:after{ width:142px; height:142px; margin-left:-71px;}
	.festival_wrap .grap .obj .item a:focus span:after,
	.festival_wrap .grap .obj .item a:hover span:after{ top:34px;}
	.festival_wrap .grap .obj .item a:focus span:before,
	.festival_wrap .grap .obj .item a:hover span:before{ top:71px;}
	.festival_wrap .grap .obj .item a span.mark{ margin-left:15px;}
	.festival_wrap .grap .obj .item.n1 a:before{ background-position:-1px -541px;}
	.festival_wrap .grap .obj .item.n2 a:before{ background-position:-146px -541px;}
	.festival_wrap .grap .obj .item.n3 a:before{ background-position:-291px -541px;}
	.festival_wrap .grap .obj .item.n4 a:before{ background-position:-436px -541px;}
	.festival_wrap .grap .obj .item.n5 a:before{ background-position:-581px -541px;}
	
	.btn_top{ width:60px; height:60px; padding-top:32px;}
	.btn_top:before{ width:14px; height:14px; margin-left:-7px; top:18px;}
}
@media (max-width:1023px){
	#body_layout.a_type .body_wrap,
	#body_layout.b_type .body_wrap,
	#body_layout.c_type .body_wrap{ margin:0;}
	
	.visual_wrap:after{ bottom:-280px;}
	.visual_wrap .body_wrap p{ font-size:38px; line-height:44px; top:110px;}
	.visual_wrap .sliderBox li{ height:440px;}
	.visual_wrap .btn_area{ bottom:60px;}
	
	.introduction_wrap{ margin-top:-20px;}
	
	.greeting_wrap{ width:100%; margin-bottom:1%;}
	.about_wrap,
	.weather_wrap{ width:49.5%;}
	.about_wrap{ margin:0 1% 0 0;}
	
	.service_wrap{ padding-left:40px; padding-right:40px;}
	.service_wrap .grap .obj .item{ width:25%;}
	.service_wrap .control button{ width:28px; height:55px; background:url(../../images/jpa/main/main_ir.png) no-repeat; font-size:0; text-indent:-9999px; margin:-27px 0 0 0; display:inline-block; position:absolute; top:50%;}
	.service_wrap .control button.btn_prev{ background-position:-1px -791px; left:0;}
	.service_wrap .control button.btn_next{ background-position:-32px -791px; right:0;}
	
	.festival_wrap{ padding-left:40px; padding-right:40px;}
	.festival_wrap .grap{ overflow:hidden;}
	.festival_wrap .grap .obj .item{ width:33.33%;}
	.festival_wrap .control button{ width:28px; height:55px; background:url(../../images/jpa/main/main_ir.png) no-repeat; font-size:0; text-indent:-9999px; margin:-27px 0 0 0; display:inline-block; position:absolute; top:50%;}
	.festival_wrap .control button.btn_prev{ background-position:-1px -791px; left:0;}
	.festival_wrap .control button.btn_next{ background-position:-32px -791px; right:0;}
}
@media (max-width:767px){
	#body_layout{ padding:0;}
	#body_layout .body_wrap{ padding-left:20px; padding-right:20px;}
	
	.visual_wrap .body_wrap p{ width:260px; font-size:22px; line-height:30px; top:60px; left:30px;}
	.visual_wrap .body_wrap p span{ font-size:13px; padding-top:18px;}
	.visual_wrap .sliderBox li{ height:320px;}
	
	.introduction_wrap{ padding-top:50px;}

	.introduction_wrap > .body_wrap > strong,
	.festival_wrap h2,
	.service_wrap h2{font-size:22px}

	.introduction_wrap > .body_wrap > strong:before{ height:30px; top:-50px;}
	.greeting_wrap{ height:230px; margin:0;}
	.greeting_wrap:before{ width:193px; height:230px; background-position:-574px -901px;}
	.greeting_wrap p{ font-size:12px;}
	.greeting_wrap p em{ width:100%; font-size:22px;}
	.greeting_wrap p span{ display:none;}
	.greeting_wrap a{ margin-top:65px;}
	.about_wrap,
	.weather_wrap{ width:100%; height:230px; margin:1% 0 0 0;}
	.about_wrap{ padding:30px;}
	.about_wrap a{ width:100%;}
	
	.service_wrap{ padding:30px 20px;}
	.service_wrap .grap .obj .item{ width:50%;}
	.service_wrap .grap .obj .item a:before{ width:90px; height:90px;}
	
	
	.festival_wrap{ padding:30px 20px;}
	.festival_wrap .grap .obj .item{ width:100%;}
	
	.btn_top{ width:50px; height:50px; padding-top:26px;}
	.btn_top:before{ width:10px; height:10px; margin-left:-5px; top:12px;}
}