@charset "utf-8";

.m_contents{z-index:8;}

.main_visual{position:relative;}
.main_visual .visual_wrap{}
.main_visual .visual_wrap h2{width:100%;padding:130px 0 0 0;text-align:center;margin:0 0 30px 0;}
.main_visual .visual_wrap h2 img{width:95%;}
.main_visual .visual_wrap .vis_info{width:100%;border-radius:30px;padding:0 0 30px 0;}
.main_visual .visual_wrap .vis_info p{width:90%;margin:0 auto;text-align:center;background:url("/images/15_crab/main/vis_info_bg.png");color:#fff;padding:15px 0;font-size:14px}
.main_visual .visual_wrap .vis_info p span{display:block;color:#fff799;margin:0 0 5px 0;}
.vis01{background:url("/upload_data/board_data/BBS_0000130/170805141002506.jpg") no-repeat center top;background-size:cover;}
.vis03{background:url("/upload_data/board_data/BBS_0000130/170805141003617.jpg") no-repeat center top;background-size:cover;}
.vis02{background:url("/upload_data/board_data/BBS_0000130/170805141004595.jpg") no-repeat center top;background-size:cover;}

.main_visual .vis_btn{}
.main_visual .vis_btn a{display:block;width:35px;height:75px;}
.main_visual .vis_btn a span{display:none;}
.main_visual .vis_btn .prev{position:absolute;top:48%;left:5px;}
.main_visual .vis_btn .prev a{background:url("/images/15_crab/main/main_visual_btn01.png") no-repeat 0 0;background-size:28px}
.main_visual .vis_btn .next{position:absolute;top:48%;right:5px;}
.main_visual .vis_btn .next a{background:url("/images/15_crab/main/main_visual_btn02.png") no-repeat 0 0;background-size:28px}

.content01{width:100%;background:#dc0b33;}
.content01 .wrap{text-align:center;padding:20px;}
.content01 .wrap h2{color:#fff;font-size:15px; font-weight:normal; display:inline-block;}

.content02{}      
.content02 .left{width:90%;background:url("/images/15_crab/main/con03_bg.jpg") #346bab no-repeat right top;padding:40px 5%;}
.festival_info{}
.festival_info h2{color:#fff;font-size:25px;padding:0 0 30px 0; letter-spacing:-0.05em}
.festival_info h2 em{display:block;font-style:normal; font-weight:normal;font-size:20px;padding:0 0 10px 0;}
.festival_info h2 span{display:block;font-size:12px;padding:10px 0 0 0;}
.festival_info p.img{width:100%;padding:0 0 20px 0;}
.festival_info p.img img{width:100%;}
.festival_info p.info{display:none;}
.festival_info ul{}
.festival_info ul li{background:url("/images/15_crab/main/com03_blit.gif") no-repeat left center;color:#fff;padding:0 0 0 8px;font-size:13px; line-height:1.6em;}

.content02 .right{width:90%;background:#f0f0f0; padding:40px 5%;}
.content02 .bbs{position:relative;}
.content02 .bbs h2{font-size:25px;color:#000;padding:0 0 30px 0;}
.content02 .bbs h2 span{color:#373636;display:inline-block;margin:0 0 0 10px;}
.content02 .bbs .notice{}
.content02 .bbs .notice li{width:100%;position:relative;background:#fff;border:1px solid #c7c5c5;margin:0 0 20px 0;}
.content02 .bbs .notice li a{display:block;padding:30px;}
.content02 .bbs .notice li a:hover, .bbs .notice li a:focus{ text-decoration:underline;}
.content02 .bbs .notice li a>em{display:block;width:100px;padding:8px 0;font-size:13px; font-style:normal;color:#fff; text-align:center;margin:0 0 20px 0;}
.content02 .bbs .notice .type01{background:#de0b33;}
.content02 .bbs .notice .type02{background:#598527;}
.content02 .bbs .notice li a span{display:block;color:#736f6f;font-size:13px; line-height:1.5em;}
.content02 .bbs .notice li a span strong{display:block;font-size:17px;color:#000;margin:0 0 15px 0;}
.content02 .bbs .notice li a .date{display:block;color:#545454;font-size:12px;font-style:normal;margin:20px 0 0 0;}

.content02 .bbs .photo{}
.content02 .bbs .photo li{width:100%;position:relative;background:#fff;border:1px solid #c7c5c5;margin:0 0 20px 0;}
.content02 .bbs .photo li a:hover, .bbs .photo li a:focus{ text-decoration:underline;}
.content02 .bbs .photo li a>em{display:block;width:45px;height:0;padding:46px 0 0 0;overflow:hidden;position:absolute;top:10px;right:10px;background: url("/images/15_crab/main/social.png") no-repeat -89px 0;}
.content02 .bbs .photo li em{background-position:-90px 0}
.content02 .bbs .photo li img{width:100%;}
.content02 .bbs .photo li a span{display:block;width:90%;padding:20px 5%;color:#736f6f;font-size:13px; line-height:1.5em;}
.content02 .bbs .photo li a span strong{display:block;font-size:17px;color:#000;margin:0 0 10px 0;}
.content02 .bbs .photo li a .date{display:block;color:#545454;font-size:12px;font-style:normal;margin:10px 0 0 0;}

.content02 .bbs .more{ position:absolute;top:0;right:0;}

.content03{width:100%;padding:40px 0;}
.content03 h2{width:100%; text-align:center;padding:0 0 15px 0;margin:0 0 30px 0;background:url("/images/15_crab/main/call_blit.gif") no-repeat center bottom;}
.content03 h2 img{width:75%;}
.content03 p{text-align:center;color:#000}

.content04{}
.content04 .con01{background:url("/images/15_crab/main/con04_bg01.jpg") no-repeat;background-size:cover;}
.content04 .con01 div dl{border:1px solid #fff;background:url("/images/15_crab/main/con04_list01.png") no-repeat center 20px;padding:110px 30px 30px 30px;text-align:center;}

.content04 .con02{background:url("/images/15_crab/main/con04_bg03.jpg") no-repeat;background-size:cover;}
.content04 .con02 div dl{border:1px solid #fff;background:url("/images/15_crab/main/con04_list02.png") no-repeat center 20px;padding:110px 30px 30px 30px;text-align:center;}

.content04 .con03{background:url("/images/15_crab/main/con04_bg02.jpg") no-repeat;background-size:cover;}
.content04 .con03 div dl{border:1px solid #fff;background:url("/images/15_crab/main/con04_list03.png") no-repeat center 20px;padding:110px 30px 30px 30px;text-align:center;}

.content04 .con01 div, .content04 .con02 div, .content04 .con03 div{background:url("/images/15_crab/main/con04_bg.png");padding:30px;}
.content04 .con01 div dl dt, .content04 .con02 div dl dt, .content04 .con03 div dl dt{font-size:25px;color:#fff;padding:0 0 25px 0;margin:0 0 20px 0;background:url("/images/15_crab/main/con04_tit_blit.gif") no-repeat center bottom;}
.content04 .con01 div dl dd, .content04 .con02 div dl dd, .content04 .con03 div dl dd{ line-height:1.7em}
.content04 .con01 div dl dd a, .content04 .con02 div dl dd a, .content04 .con03 div dl dd a{font-size:15px;color:#fff;display:block;width:100%;}
.content04 .con01 div dl dd a:hover, .content04 .con01 div dl dd a:focus, .content04 .con01 div dl dd a:active, 
.content04 .con02 div dl dd a:hover, .content04 .con02 div dl dd a:focus, .content04 .con02 div dl dd a:active,
.content04 .con03 div dl dd a:hover, .content04 .con03 div dl dd a:focus, .content04 .con03 div dl dd a:active{background:#fff;color:#000;border-radius:20px;}

.content04 .ban01{background:#5b5b5b;}
.content04 .ban01 a{display:block;text-align:center;color:#fff;padding:150px 30px 50px 30px;background:url("/images/15_crab/main/con04_icon01_n.png") no-repeat center 40px}
.content04 .ban01 a span:hover{transform:rotateY(360deg);}

.content04 .ban02{background:#de0b33;}
.content04 .ban02 a{display:block;text-align:center;color:#fff;padding:150px 30px 50px 30px;background:url("/images/15_crab/main/con04_icon02.png") no-repeat center 40px}
.content04 .ban02 a span:hover{transform:rotateY(360deg);}

.ban03{background:#ff8b00;}
.ban03 a{display:block;text-align:center;color:#fff;padding:150px 30px 50px 30px;background:url("/images/15_crab/main/con04_icon03.png") no-repeat center 40px}
.ban03 a span:hover{transform:rotateY(360deg);}

.content04 .ban01 a strong, .content04 .ban02 a strong, .content04 .ban03 a strong{display:block;font-size:35px;margin:0 0 30px 0;}
.content04 .ban01 a em, .content04 .ban02 a em, ..content04 ban03 a em{display:block;font-size:15px; font-style:normal;}
.content04 .ban01 a span, .content04 .ban02 a span, .content04 .ban03 a span{display:block; margin:30px 0 0 0;transition:transform 600ms ease-in-out 0s;}




/* Tablet */
@media all and (min-width:768px) {
.main_visual .visual_wrap h2{padding:200px 0 0 0;margin:0 0 50px 0;}
.main_visual .visual_wrap h2 img{width:700px;}
.main_visual .visual_wrap .vis_info p{font-size:18px;}
.main_visual .visual_wrap .vis_info p span{display:inline-block;margin:0 5px 0 0;}
.main_visual .vis_btn .prev a, .main_visual .vis_btn .next a{background-size:auto;}

.content01{width:100%;background:url("/images/15_crab/main/con02_bg.jpg") no-repeat center top;height:70px;}
.content01 .wrap{padding:25px 0 0 0;}
.content01 .wrap h2{font-size:20px;background:url("/images/15_crab/main/con02_blit.png") no-repeat left center;padding:0 0 0 30px;}
.content01 .wrap h2 span{display:inline-block;padding:0 30px 0 0;background:url("/images/15_crab/main/con02_blit.png") no-repeat right center;}

.content02 .left{padding:40px 3%;width:94%;}
.festival_info h2{font-size:35px; letter-spacing:normal;}
.festival_info h2 em{font-size:20px;}
.festival_info h2 span{font-size:15px;}
.festival_info div{overflow:hidden;}
.festival_info p.img{float:left;width:30%;}
.festival_info ul{float:right;width:65%;padding:5px 0 0 0;}

.content02 .right{padding:40px 3%;width:94%;}
.content02 .bbs .notice ul{overflow:hidden;margin:0 0 15px 0;}
.content02 .bbs .notice ul li{width:32%;float:left;margin:0 0 0 1.57%;}
.content02 .bbs .notice ul li:first-child{margin:0;}

.content02 .bbs .photo ul{overflow:hidden;}
.content02 .bbs .photo li{width:32%;float:left;margin:0 0 0 1.57%;}
.content02 .bbs .photo li:first-child{margin:0;}

.content03 h2 img{width:auto;}
.content03 p{text-align:center;font-size:20px;}

.content04 .wrap{overflow:hidden;}
.content04 .con01, .content04 .con02, .content04 .con03{float:left;width:50%;height:450px;}
.content04 .ban01, .content04 .ban02, .content04 .ban03{float:left;width:50%;height:450px;}
.content04 .con01 div, .content04 .con02 div, .content04 .con03 div{padding:30px;}
.content04 .con01 div dl, .content04 .con02 div dl, .content04 .con03 div dl{height:250px;}
.content04 .con02 div dl dd, .content04 .con03 div dl dd{ line-height:2em}

.content04 .ban01 a, .content04 .ban02 a, .content04 .ban03 a{padding:190px 30px 50px 30px;background-position:center 70px;height:210px}

.content04 .ban01 a strong, .content04 .ban02 a strong, .content04 .ban03 a strong{margin:0 0 30px 0;}
.content04 .ban01 a span, .content04 .ban02 a span, .content04 .ban03 a span{margin:55px 0 0 0;}
}


/* Desktop */
@media all and (min-width:1023px) {
.main_visual{height:970px;min-width:1400px;}
.main_visual .visual_wrap{width:1400px;margin:0 auto;}
.main_visual .visual_wrap h2 img{width:auto;}
.main_visual .visual_wrap .vis_info p{width:920px;}
.main_visual .visual_wrap .crabcrab01{display:block;width:300px;height:200px;background:url(/images/15_crab/main/bg_crab01.gif) no-repeat;position:absolute;top:500px;left:350px}
.main_visual .visual_wrap .crabcrab02{display:block;width:300px;height:200px;background:url(/images/15_crab/main/bg_crab02.gif) no-repeat;position:absolute;top:500px;right:350px}
.vis01{background-size:auto;}
.vis02{background-size:auto;}

.main_visual .vis_btn a{color:#fff;font-size:35px;width:80px;height:60px;}
.main_visual .vis_btn a span{display:block;}
.main_visual .vis_btn .prev{left:40px;}
.main_visual .vis_btn .prev a{padding:15px 0 0 60px; background-position:left center;}
.main_visual .vis_btn .next{right:40px;}
.main_visual .vis_btn .next a{padding:15px 60px 0 0; background-position:right center;}

.content01{min-width:1400px;}

.content02{width:100%;height:800px;background:url("/images/15_crab/main/con03_bg02.jpg") no-repeat top center;min-width:1400px;}
.content02 .wrap{width:1400px;margin:0 auto;overflow:hidden;padding:100px 0;}

.content02 .left{background:none;padding:0;width:450px;float:left;}
.festival_info{width:400px;margin:0 50px 0 0;}
.festival_info h2{color:#fff;font-size:37px;padding:0 0 30px 0;}
.festival_info h2 em{display:block;font-style:normal;font-size:20px;padding:0 0 10px 0;}
.festival_info h2 span{font-size:15px;}
.festival_info p.img{width:100%;padding:0 0 20px 0;float:none;}
.festival_info p.img img{width:auto;}
.festival_info p.info{display:block;color:#96c3f7;font-size:14px;line-height:1.5em}
.festival_info ul{float:none;width:100%;margin:40px 0 0 0;}
.festival_info ul li{font-size:16px;line-height:2.5em}

.content02 .right{background:none;padding:0;width:900px;float:left;margin:0 0 0 50px;}
.right h2{font-size:35px;}

.content02 .bbs .notice ul li{width:280px;height:260px;margin:0 0 0 20px;}

.content02 .bbs .photo li{width:280px;height:260px;margin:0 0 0 20px;}
.content02 .bbs .photo li a span{width:220px;padding:17px 30px;}
.content02 .bbs .photo li a span strong{margin:0 0 5px 0;}
.content02 .bbs .photo li a .date{margin:5px 0 0 0;}

.content04{min-width:1400px;}
.content04 .wrap{width:75%;padding:0 25% 0 0;background:url("/images/15_crab/main/con04_bg04.jpg") no-repeat right top;background-size:auto;}
.content04 .con01, .content04 .con02, .content04 .con03{float:left;width:33.333333%;height:450px;}
.content04 .ban01, .content04 .ban02, .content04 .ban03{float:left;width:33.333333%;height:450px;}

.content04 .con01, .content04 .con02, .content04 .con03{cursor:pointer;}
.content04 .con01>div, .content04 .con02>div, .content04 .con03>div{display:none;}
.content04 .con01 .on, .content04 .con02 .on, .content04 .con03 .on{display:block;}
}



 
.tfbg{
animation-name:tfbg;
animation-duration:20s;
animation-iteration-count: infinite;
}

@keyframes tfbg {
from {
	background-size:110%;
} 
50% {
	background-size:120%;
} 
to {
	background-size:110%;
}
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}



.tada {animation-name: tada;animation-duration:2s}                  

.shake{animation-duration:10s;animation-iteration-count:infinite;animation-name:shake;}
.shake2{animation-duration:10s;animation-iteration-count:infinite;animation-name:shake2;}
@keyframes shake {
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-15px)translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(15px)translateX(5px);
  }
}   
@keyframes shake2 {
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-25px)translateX(-15px);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(25px)translateX(15px);
  }
}        

@media all and (max-width:1800px) {
.tfbg{ animation-play-state:paused}
}