@charset "UTF-8"; /* common */ .swiper-pagination{display:inline-block; position:relative; text-align:center;} .swiper-pagination-bullet{display:inline-block; width:10px; height:10px; margin:0 2px; background:transparent; border:2px solid #fff; border-radius:50%; opacity:0.5; vertical-align:middle;} .swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#fff;} .swiper-pagination-bullet-active{position:relative; width:14px; height:14px; margin:0 2px; background:#fff; border:none; opacity:1;} .swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{background:#fff;} .swiper-button-play, .swiper-button-pause{display:none; width:8px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:0.5; cursor:pointer;} .swiper-button-play:focus, .swiper-button-pause:focus, .swiper-button-play:hover, .swiper-button-pause:hover{opacity:1;} .swiper-button-play{background:url('../images/ico_play.png') no-repeat center;} .swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;} .swiper-button-play.active, .swiper-button-pause.active{display:inline-block;} .swiper-button-next, .swiper-button-prev{display:block; position:relative; float:left; width:20px; height:28px; top:auto; left:auto; right:auto; margin-top:auto; background-size:auto;} .swiper-button-prev{background:url('../images/ico_prev.png') no-repeat center;} .swiper-button-next{background:url('../images/ico_next.png') no-repeat center;} .moreBtn{transition:transform 0.2s;} .moreBtn:focus, .moreBtn:hover, a:focus .moreBtn, a:hover .moreBtn{transform:rotate(90deg) !important;} /* intro */ #intro{clear:both; position:relative; width:100%; height:100vh; min-height:960px; max-height:1080px;} #intro .introHd{padding:30px 0;} #intro .introHd .logo{display:inline-block; width:95px; vertical-align:top; z-index:99;} #intro .introHd .logo h1{width:100%; max-width:95px;} #intro .introHd .logo h1 a{} #intro .introHd .logo h1 a img{width:100%;} #intro .introHd .sitemap{display:inline-block; width:38px; height:38px; overflow:hidden;} #intro .introHd .sitemap a{display:block; width:100%; height:100%; background:url('../images/ico_sitemap.png') no-repeat center; border:1px solid #fff; font-size:0;} #intro .introCon{clear:both;} #intro .introCon .area01{clear:both; display:inline-block; width:100%; padding:50px 0 80px;} #intro .introCon .area01 .layoutLeft{} #mainVisual{position:relative; width:100%; height:486px; margin:0 auto; background:transparent; /*border:20px solid #fff;*/ border-radius:10px; /*border-radius:2px;*/ overflow:hidden; box-shadow:5px 5px 14px rgba(0,0,0,0.2),-3px -3px 12px rgba(255,255,255,0.4),0 0 8px rgba(0,0,0,0.4);} #mainVisual:after{content:''; clear:both; display:block;} #mainVisual .swiper-container{width:100%; max-width:680px; /*max-width:640px;*/ height:100%;} #mainVisual .swiper-container img{width:100%;} #mainVisual .bgBox{position:absolute; top:20px; right:20px; cursor:default; z-index:2;} #mainVisual .bgBox .pager{top:0; left:0; text-align:center;display:block; line-height:0; padding:.375em .75em; background:rgba(0,0,0,.4); border-radius:2em;} #intro .introCon .area01 .layoutRight{width:32%;} #intro .introCon .area01 .slogan{display:block; margin:60px auto;} #intro .introCon .area01 .slogan p{color:#fff; font-size:1.125rem; font-style:italic; letter-spacing:0.055em; opacity:0.9;} #intro .introCon .area01 .slogan p.big{line-height:1.4; margin-bottom:30px; font-size:2.875rem; font-weight:500; font-style:normal; letter-spacing:-0.055em; opacity:1;} #intro .introCon .area01 .slogan p.big strong{} #intro .introCon .area01 .search{display:block; width:100%; margin:60px auto 10px;} #intro .introCon .area01 .search a{display:block; position:relative; width:100%; padding:25px 45px; border:1px solid #fff; color:#fff; font-size:1.75rem; font-weight:500; text-align:left;} #intro .introCon .area01 .search a:after{content:''; display:block; position:absolute; width:26px; height:26px; top:50%; right:45px; margin-top:-13px; background:url('../images/ico_search.png') no-repeat center; background-size:100%;} #intro .introCon .area01 .search a:focus, #intro .introCon .area01 .search a:hover{background:rgba(255,255,255,0.1);} #intro .introCon .area01 .member{display:block; width:100%; margin:10px auto 60px;} #intro .introCon .area01 .member a{display:block; position:relative; width:100%; padding:25px 45px; border:1px solid #fff; color:#fff; font-size:1.75rem; font-weight:500; text-align:left;} #intro .introCon .area01 .member a:after{content:''; display:block; position:absolute; width:26px; height:26px; top:50%; right:45px; margin-top:-13px; background:url('../images/ico_member.png') no-repeat center; background-size:100%;} #intro .introCon .area01 .member a:focus, #intro .introCon .area01 .member a:hover{background:rgba(255,255,255,0.1);} #intro .introCon .area01 .membanner{display:block; width:100%; margin:10px auto 60px;} #intro .introCon .area01 .membanner a{display:block; position:relative; width:100%;} #intro .introCon .area01 .membanner a img{width:100%; max-width:680px;} #intro .introCon .area02{clear:both; display:inline-block; width:100%;} #intro .introCon .area02 .layoutLeft{width:40%;} #intro .introCon .area02 .layoutRight{width:40%;} #intro .introCon .area02 p.boardTitle{margin:0 auto 30px; color:#fff; font-size:1.75rem; font-weight:500; text-align:left;} #intro .introCon .area02 p.boardTitle span.color{color:#a3f3ff;} #intro .introCon .area02 a.moreBtn.white{display:block; position:absolute; width:22px; height:22px; padding:4px; top:4px; right:-4px; background:url('../images/ico_more_white.png') no-repeat center; font-size:0;} #intro .introCon .area02 a.moreBtn.white:focus, #intro .introCon .area02 a.moreBtn.white:hover{} #intro .introCon .area02 .news{position:relative;} #intro .introCon .area02 .news .box{padding:20px; border:1px solid #fff;} #intro .introCon .area02 .news .box p{display:inline-block; padding:0 0 2px; border-bottom:1px solid #fff; color:#fff; font-size:0.813rem; letter-spacing:0.055em; vertical-align:top;} #intro .introCon .area02 .news .box .today{display:inline-block; width:21%; margin-top:-4px; text-align:center; vertical-align:top;} #intro .introCon .area02 .news .box .today span{color:#fff; font-size:0.813rem; font-weight:500; letter-spacing:0;} #intro .introCon .area02 .news .box .today span.day{display:block; font-size:2.5rem; font-weight:700;} #intro .introCon .area02 .news .box ul.list{display:inline-block; width:67%;} #intro .introCon .area02 .news .box ul.list li{position:relative; margin:0 0 14px; padding:0 0 0 8px;} #intro .introCon .area02 .news .box ul.list li:last-child{margin:0;} #intro .introCon .area02 .news .box ul.list.circle li:before{content:''; display:block; position:absolute; width:2px; height:2px; top:8px; left:0; background:#fff; border-radius:50%;} #intro .introCon .area02 .news .box ul.list li a{display:block; width:100%; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #intro .introCon .area02 .news .box ul.list li a:focus, #intro .introCon .area02 .news .box ul.list li a:hover{text-decoration:underline;} #intro .introCon .area02 .social{position:relative;} #intro .introCon .area02 .social ul.sns{text-align:center;} #intro .introCon .area02 .social ul.sns li{display:inline-block; margin:0 26px;} #intro .introCon .area02 .social ul.sns li:last-child{margin:0 12px;} #intro .introCon .area02 .social ul.sns li a{display:block; color:#fff; font-size:0.813rem; letter-spacing:0;} #intro .introCon .area02 .social ul.sns li a img{display:block; margin:0 auto 14px; transition:transform 0.2s ease;} #intro .introCon .area02 .social ul.sns li a span{} #intro .introCon .area02 .social ul.sns li a:focus img, #intro .introCon .area02 .social ul.sns li a:hover img{transform:translate(0, -5px);} #intro .background{position:fixed; width:100%; height:100%; top:0; left:0; background:#666; background-size:cover; z-index:-1;} #intro .background:before{content:''; display:block; position:absolute; width:100%; height:100%; background:url('../images/pattern_01.png') repeat top left; opacity:0.5; z-index:99;} /* contents */ #mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:#fff; z-index:1;} #mainContents .area01, #mainContents .area02, #mainContents .area03, #mainContents .area04{clear:both; width:100%;} #mainContents .moreBtn{display:inline-block; width:22px; height:22px; padding:4px; font-size:0;} #mainContents .moreBtn.black{background:url('../images/ico_more_black.png') no-repeat center;} #mainContents .moreBtn.white{background:url('../images/ico_more_white.png') no-repeat center;} #mainContents .boardTitle{margin:0 0 20px; font-size:1.75rem; font-weight:500;} #mainContents .boardTitle strong{color:#3071cf; font-weight:500;} #mainContents .area01{padding:80px 0 60px;} #mainContents .area01 .moreBtn{position:absolute; top:0; right:0;} #mainContents .area01 .board.notice{position:relative; float:left; width:720px;} #mainContents .area01 .board.notice ul.list{border:1px solid #ddd; border-top:2px solid #3071cf; border-bottom:none;} #mainContents .area01 .board.notice ul.list li{border-bottom:1px solid #ddd;} #mainContents .area01 .board.notice ul.list li a{display:inline-block; width:100%; padding:20px 30px;} #mainContents .area01 .board.notice ul.list li a .listTitle{position:relative; float:left; width:80%; max-width:480px; padding-left:10px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area01 .board.notice ul.list li a .listTitle:before{content:''; display:block; position:absolute; width:3px; height:3px; top:50%; left:0; margin-top:-1.5px; background:#666; border-radius:50%; vertical-align:middle;} #mainContents .area01 .board.notice ul.list li a .listDate{float:right; color:#666; text-align:right; letter-spacing:-0.035em;} #mainContents .area01 .board.notice ul.list li a:focus, #mainContents .area01 .board.notice ul.list li a:hover{background:#f7f7f7;} #mainContents .area01 .board.notice ul.list li.first{} #mainContents .area01 .board.notice ul.list li.first a{padding:20px 30px 16px;} #mainContents .area01 .board.notice ul.list li.first a .listDate{position:relative; float:left; min-width:80px; text-align:left;} #mainContents .area01 .board.notice ul.list li.first a .listDate span{display:block; margin-bottom:6px; color:#333; font-size:0.813rem; font-weight:500; letter-spacing:0;} #mainContents .area01 .board.notice ul.list li.first a .listDate span.day{margin-left:2px; font-size:2.5rem; font-weight:700;} #mainContents .area01 .board.notice ul.list li.first a .listTitle{width:100%; max-width:calc(100% - 80px); margin:6px 0 15px; color:#333; font-weight:500;} #mainContents .area01 .board.notice ul.list li.first a .listTitle:before{background:#333;} #mainContents .area01 .board.notice ul.list li.first a .listCon{float:left; width:calc(100% - 80px); color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area01 .photo{position:relative; float:right; width:380px;} #mainContents .area01 .photo .swiper-main-photo{box-shadow:5px 5px 8px rgba(0,0,0,0.1);} #mainContents .area01 .photo .swiper-main-photo ul{} #mainContents .area01 .photo .swiper-main-photo ul li{} #mainContents .area01 .photo .swiper-main-photo ul li a{display:block;} #mainContents .area01 .photo .swiper-main-photo ul li a .pic{} #mainContents .area01 .photo .swiper-main-photo ul li a .pic img{width:100%;} #mainContents .area01 .photo .swiper-main-photo ul li a .listInfo{padding:22px 20px 48px; background:linear-gradient(90deg, #3071CF 0, #144693 100%);} #mainContents .area01 .photo .swiper-main-photo ul li a .listInfo .listTitle{display:block; margin:0 0 16px; color:#fff; font-size:1.25rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} #mainContents .area01 .photo .swiper-main-photo ul li a .listInfo .listDate{color:#88aee6; letter-spacing:-0.035em;} #mainContents .area01 .photo .swiper-main-photo ul li a:focus, #mainContents .area01 .photo .swiper-main-photo ul li a:hover{box-shadow:3px 3px 3px rgba(0,0,0,0.8);} #mainContents .area01 .photo .swiper-main-photo .bgBox{position:absolute; bottom:20px; right:20px; cursor:default; z-index:2;} #mainContents .area01 .photo .swiper-main-photo .bgBox .pager{top:0; left:0; text-align:center;} #mainContents .area02{} #mainContents .area02 ul{width:100%; text-align:center;} #mainContents .area02 ul li{display:inline-block; position:relative; width:19.7%;} #mainContents .area02 ul li:after{content:''; display:block; position:absolute; width:1px; height:75px; top:50%; right:0; margin-top:-37.5px; background:#eee;} #mainContents .area02 ul li:last-child:after{display:none;} #mainContents .area02 ul li a{display:block; padding:20px 0 30px; color:#3071cf; font-size:1.125rem;} #mainContents .area02 ul li a img{display:block; margin:0 auto 12px; transition:transform 0.2s ease;} #mainContents .area02 ul li a span{} #mainContents .area02 ul li a:focus, #mainContents .area02 ul li a:hover{font-weight:500;} #mainContents .area02 ul li a:focus img, #mainContents .area02 ul li a:hover img{transform:translate(0, -5px);} #mainContents .area03{padding:60px 0;} #mainContents .area03 .link01, #mainContents .area03 .link02, #mainContents .area03 .link03{display:inline-block; position:relative; float:left; width:380px; height:164px; margin:0 10px;} #mainContents .area03 .link01{margin-left:0; background:url('../images/main/bg_main_04_01.jpg') no-repeat right bottom;} #mainContents .area03 .link02{background:url('../images/main/bg_main_04_02.jpg') no-repeat right bottom;} #mainContents .area03 .link03{margin-right:0; background:url('../images/main/bg_main_04_03.jpg') no-repeat right bottom;} #mainContents .area03 a{display:block; width:100%; height:100%; padding:30px;} #mainContents .area03 a p{color:#fff; word-break:keep-all;} #mainContents .area03 a p.ti{margin:0 0 20px; color:#a3f3ff; font-size:1.375rem; font-weight:500;} #mainContents .area03 a p.ti img{display:inline-block; margin-right:10px; vertical-align:top;} #mainContents .area03 a p.ti span{} #mainContents .area03 a span.moreBtn{position:absolute; top:30px; right:30px;} #mainContents .area03 a:focus, #mainContents .area03 a:hover{background:rgba(48,113,207,0.8); box-shadow:5px 5px 5px rgba(0,0,0,0.1)} #mainContents .area04{padding:80px 0 0; background:#f7f7f7 url('../images/main/bg_main_05_01.jpg') no-repeat center; background-size:cover;} #mainContents .area04 .schedule{position:relative; width:880px;} #mainContents .area04 .schedule .tiarea{position:relative;} #mainContents .area04 .schedule .tiarea:after{content:''; display:block; position:absolute; width:100%; height:1px; bottom:0; left:0; background:#ddd; z-index:0;} #mainContents .area04 .schedule .tiarea p.boardTitle{display:inline-block; margin-right:40px; margin-bottom:17px;} #mainContents .area04 .schedule .tiarea .tab{display:inline-block; width:70%; cursor:default;} #mainContents .area04 .schedule .tiarea .tab ul{} #mainContents .area04 .schedule .tiarea .tab ul li{display:inline-block; position:relative;} #mainContents .area04 .schedule .tiarea .tab ul li .tabLink{display:block; position:relative; padding:2px 12px 2px 6px; background:none; color:#999; font-size:1.375rem; font-weight:500; font-style:italic; cursor:pointer;} #mainContents .area04 .schedule .tiarea .tab ul li .tabLink.active{color:#3071cf; font-weight:700;} #mainContents .area04 .schedule .tiarea .tab ul li .tabLink.active + span{position:absolute; width:5px; height:5px; bottom:-13px; left:50%; margin-left:-5px; background:#3071cf; border-radius:50%; z-index:1;} #mainContents .area04 .schedule .tabCon{clear:both;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule{padding:18px 0 0;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul{} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li{width:280px; height:255px;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a{display:block; width:100%; height:100%; padding:25px; background:#fff; border:1px solid #ddd;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a p.title{display:-webkit-box; height:60px; line-height:1.7; margin:0 0 20px; font-size:1.125rem; font-weight:500; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span{display:block; position:relative; padding-left:8px; color:#666; font-size:0.938rem;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span:before{content:''; display:block; position:absolute; width:2px; height:2px; top:6px; left:0; background:#666;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span.tag{margin-bottom:16px; padding:0; color:#0871cf; font-size:0.813rem;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span.tag:before{display:none;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span.host{margin-bottom:20px;} /* #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a span.listDate{letter-spacing:-0.035em;} */ #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date{position:absolute;bottom:25px;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date span.listDate{padding-left:0;font-size: 0.878rem;line-height: 1.6;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date span.listDate i{padding-right:5px;color:#0871cf;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date span.listDate:before{display:none;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a:focus, #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a:hover{border-color:#999; box-shadow:0px 0px 5px rgba(0,0,0,0.1);} #mainContents .area04 .schedule .tabCon .swiper-main-schedule span.nodata{color:#666;} #mainContents .area04 .schedule .bgbox{position:absolute; top:0; right:0;} #mainContents .area04 .schedule .bgbox .control{cursor:default;} #mainContents .area04 .schedule .bgbox .control .swiper-button-prev, #mainContents .area04 .schedule .bgbox .control .swiper-button-next{margin-left:10px;} #mainContents .area04 .check{width:260px;} #mainContents .area04 .check > div{position:relative; width:100%; margin:0 0 12px;} #mainContents .area04 .check .link01{background:#144693; color:#fff;} #mainContents .area04 .check .link02{background:#3071cf; color:#fff;} #mainContents .area04 .check .link03{background:#f6bf0d;margin-bottom:0;} #mainContents .area04 .check > div:after{content:''; display:block; position:absolute; width:260px; height:20px; bottom:0; right:0; background:url('../images/main/overlay_01.png') no-repeat right center;} #mainContents .area04 .check .link03:after{opacity:0.6;} #mainContents .area04 .check a{display:block; position:relative; padding:40.4px 30px; color:inherit; font-size:1.125rem; font-weight:500; z-index:1;} #mainContents .area04 .check a span{} #mainContents .area04 .check a span.moreBtn{position:absolute; top:50%; right:30px; margin-top:-11px;} #mainContents .area04 .check a:focus, #mainContents .area04 .check a:hover{background:rgba(0,0,0,0.2);} #mainContents .area04 .check .link03 a:focus, #mainContents .area04 .check .link03 a:hover{background:rgba(80,80,80,0.1);} #mainContents .area04 .banner{clear:both; position:relative; padding:60px 0;} #mainContents .area04 .banner .swiper-main-banner{width:1060px; margin:0 auto;} #mainContents .area04 .banner .swiper-main-banner ul{} #mainContents .area04 .banner .swiper-main-banner ul li{width:160px; height:60px;} #mainContents .area04 .banner .swiper-main-banner ul li a{display:block; background:#fff; border:1px solid transparent; border-radius:10px; text-align:center; overflow:hidden;} #mainContents .area04 .banner .swiper-main-banner ul li a img{margin:-1px;} #mainContents .area04 .banner .swiper-main-banner ul li a:focus, #mainContents .area04 .banner .swiper-main-banner ul li a:hover{border:1px solid #ddd;} #mainContents .area04 .banner .bgbox{position:absolute; width:100%; top:50%; margin-top:-14px; left:0;} #mainContents .area04 .banner .bgbox .control{cursor:default;} #mainContents .area04 .banner .bgbox .control .swiper-button-prev, #mainContents .area04 .banner .bgbox .control .swiper-button-next{position:absolute; opacity:0.3;} #mainContents .area04 .banner .bgbox .control .swiper-button-prev:focus, #mainContents .area04 .banner .bgbox .control .swiper-button-next:focus, #mainContents .area04 .banner .bgbox .control .swiper-button-prev:hover, #mainContents .area04 .banner .bgbox .control .swiper-button-next:hover{opacity:1;} #mainContents .area04 .banner .bgbox .control .swiper-button-prev{left:14px;} #mainContents .area04 .banner .bgbox .control .swiper-button-next{right:14px;} @media only screen and (min-width:1921px){ #intro .background img{width:100%;} } @media only screen and (max-width:1279px){ #mainVisual{height:auto;} #mainVisual .swiper-container{max-width:612px;} #mainVisual .swiper-container img{width:100%;} #intro .introCon .area01 .search a{padding:25px;} #intro .introCon .area01 .search a:after{right:25px;} #intro .introCon .area01 .member a{padding:25px;} #intro .introCon .area01 .member a:after{right:25px;} #intro .introCon .area02 .news .box ul.list{width:64%;} #intro .introCon .area02 .layoutRight{width:44%;} #intro .introCon .area02 .social ul.sns li{margin:0 4%;} #intro .introCon .area02 .social ul.sns li:last-child{margin:0 1%;} #mainContents{min-width:960px;} #mainContents .area01 .board.notice{width:58%;} #mainContents .area02 ul li{width:18.5%;} #mainContents .area03{text-align:center;} #mainContents .area03 .link01, #mainContents .area03 .link02, #mainContents .area03 .link03{float:none; width:31.8%; margin:0 1%; text-align:left; vertical-align:top;} #mainContents .area03 .link01{margin-left:0;} #mainContents .area03 .link03{margin-right:0;} #mainContents .area03 a{padding:30px 20px;} #mainContents .area03 a p.ti span{display:inline-block; width:65%; line-height:1.3; margin-top:-3px;} #mainContents .area03 a span.moreBtn{right:20px;} #mainContents .area04 .layoutLeft{width:74%;} #mainContents .area04 .schedule{width:100%;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li{height:auto;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a{padding:25px 20px;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a p.title{height:54px; line-height:1.6; margin:0 0 34px; word-break:break-all; overflow:hidden;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date{position:initial;} #mainContents .area04 .layoutRight{width:22%;} #mainContents .area04 .check{width:100%;} #mainContents .area04 .check > div:after{width:100%;} #mainContents .area04 .check a{padding:45.4px 18px;} #mainContents .area04 .check a span.moreBtn{right:18px;} #mainContents .area04 .banner .swiper-main-banner{width:90%;} } @media only screen and (max-width:1023px){ #intro{height:auto; min-height:initial; max-height:initial;} #intro .introHd{display:none;} #mainVisual{max-width:680px; height:auto; margin:0 auto;} #mainVisual .swiper-container{max-width:1023px;} #intro .introCon{text-align:center;} #intro .introCon .area01{padding:80px 0 20px;} #intro .introCon .area01 .layoutRight{width:100%;} #intro .introCon .area01 .slogan{max-width:680px; margin:20px auto 30px;} #intro .introCon .area01 .slogan p.big{margin-bottom:20px;} #intro .introCon .area01 .slogan p.big br{display:none;} #intro .introCon .area01 .search{max-width:680px; margin:40px auto 0;} #intro .introCon .area01 .member{max-width:680px;} #intro .introCon .area01 .membanner{max-width:680px;} #intro .introCon .area02{max-width:680px; margin:0 auto; padding:0 0 40px;} #intro .introCon .area02 .layoutLeft{float:left; width:48%;} #intro .introCon .area02 .news .box{padding:20px 16px;} #intro .introCon .area02 .news .box p{font-size:0.625rem;} #intro .introCon .area02 .news .box .today{width:20%;} #intro .introCon .area02 .layoutRight{float:right; width:48%;} #intro .introCon .area02 .social ul.sns li{margin:0 3%;} #intro .introCon .area02 .social ul.sns li:last-child{margin:0;} #intro .introCon .area02 .social ul.sns li a{font-size:0.75rem;} #intro .introCon .area02 .social ul.sns li a img{width:50px; margin:0 auto 10px;} #intro .background .swiper-container{height:100%;} #intro .background img{width:100%; height:100%;} #mainContents{min-width:100%;} #mainContents .area01{padding:0 0 50px;} #mainContents .area01 .board.notice{width:60%;} #mainContents .area01 .photo{width:38%;} #mainContents .area02 ul li{width:19.5%;} #mainContents .area02 ul li a{font-size:0.938rem;} #mainContents .area03 .link01, #mainContents .area03 .link02, #mainContents .area03 .link03{margin:0 0.8%;} #mainContents .area03 .link01{margin-left:0;} #mainContents .area03 .link03{margin-right:0;} #mainContents .area04 .check a{padding:20px 18px;} #mainContents .area03 a p{width:80%; line-height:1.6;} #mainContents .area03 a p.ti{width:100%; line-height:1;} #mainContents .area03 a p.ti span{width:70%;} #mainContents .area04 .layoutLeft{width:100%;} #mainContents .area04 .schedule{margin:0 auto 40px;} #mainContents .area04 .layoutRight{width:100%;} } @media only screen and (max-width:768px){ #mainContents .boardTitle{font-size:1.5rem;} #mainVisual .swiper-container{max-width:768px;} #intro .introCon{text-align:left;} #intro .introCon .area01{padding:60px 0 20px;} #intro .introCon .area01 .slogan{margin:30px 0 20px; text-align:center;} #intro .introCon .area01 .slogan p.big{margin-bottom:12px; font-size:2.25rem;} #intro .introCon .area01 .search{max-width:300px; margin:30px auto 0;} #intro .introCon .area01 .search a{padding:16px 20px; font-size:1.375rem;} #intro .introCon .area01 .search a:after{right:20px;} #intro .introCon .area01 .member{max-width:300px;} #intro .introCon .area01 .member a{padding:16px 20px; font-size:1.375rem;} #intro .introCon .area01 .member a:after{right:20px;} #intro .introCon .area01 .membanner{max-width:300px;} #intro .introCon .area02{display:block; padding:0 0 30px;} #intro .introCon .area02 p.boardTitle{margin:0 auto 20px; font-size:1.5rem;} #intro .introCon .area02 .layoutLeft{float:none; width:100%; margin:0 auto 30px;} #intro .introCon .area02 .news .box ul.list{width:70%;} #intro .introCon .area02 .layoutRight{float:none; width:100%;} #intro .introCon .area02 .social ul.sns li{width:24%; margin:0; vertical-align:top;} #mainContents .area01{padding:0 0 40px;} #mainContents .area01 .board.notice{float:none; width:100%; margin:0 auto 40px;} #mainContents .area01 .board.notice ul.list li a{padding:12px 20px;} #mainContents .area01 .board.notice ul.list li a .listTitle{width:70%;} #mainContents .area01 .board.notice ul.list li.first a{padding:12px 20px 10px;} #mainContents .area01 .board.notice ul.list li.first a .listDate{min-width:70px;} #mainContents .area01 .photo{float:none; width:100%;} #mainContents .area01 .photo .pic{max-height:214px; overflow:hidden;} #mainContents .area02 ul li{width:100%; margin-bottom:-1px; border:1px solid #eee; text-align:left;} #mainContents .area02 ul li:after{display:none;} #mainContents .area02 ul li a{padding:8px 12px; font-size:1rem;} #mainContents .area02 ul li a img{display:inline-block; width:40px; margin:0 6px 0 0;} #mainContents .area03{padding:40px 0;} #mainContents .area03 .link01, #mainContents .area03 .link02, #mainContents .area03 .link03{width:100%; height:100px; margin:0 auto 5px;} #mainContents .area03 .link01{background-position:left center; background-size:cover;} #mainContents .area03 .link02{background-position:left center; background-size:cover;} #mainContents .area03 .link03{background-position:left center; background-size:cover;} #mainContents .area03 a{padding:22px 20px;} #mainContents .area03 a p{width:100%; line-height:1;} #mainContents .area03 a p.ti{margin:0 0 12px; font-size:1.125rem;} #mainContents .area03 a p.ti img{margin-right:5px;} #mainContents .area03 a p.ti span{width:80%; line-height:1; margin-top:auto;} #mainContents .area03 a span.moreBtn{top:20px; right:20px;} #mainContents .area04{padding:60px 0 0;} #mainContents .area04 .schedule .tiarea .tab{width:100%; white-space:nowrap; overflow:hidden; overflow-x:auto;} #mainContents .area04 .schedule .tiarea .tab ul{padding:0 10px 0 4px; text-align:center;} #mainContents .area04 .schedule .tiarea .tab ul li .tabLink.active + span{width:7px; height:3px; bottom:0; border-radius:0;} #mainContents .area04 .check > div{margin:0 auto 5px;} #mainContents .area04 .check a{padding:25px 18px;} #mainContents .area04 .banner{padding:40px 0;} #mainContents .area04 .banner .bgbox .control .swiper-button-prev{left:0;} #mainContents .area04 .banner .bgbox .control .swiper-button-next{right:0;} } @media only screen and (max-width:540px){ #mainVisual .swiper-container{max-width:540px;} #mainVisual .bgBox{top:5px; right:5px;transform: scale(.75);transform-origin: top right;} #intro .introCon .area01 .slogan{margin:12px 0 0;} #intro .introCon .area01 .slogan p{font-size:0.938rem;} #intro .introCon .area01 .slogan p.big{margin-bottom:8px; font-size:1.563rem; word-break:keep-all;} #intro .introCon .area01 .search{max-width:250px; margin:20px auto 0;} #intro .introCon .area01 .search a{font-size:1.125rem;} #intro .introCon .area01 .search a:after{width:18px; height:18px; margin-top:-9px;} #intro .introCon .area01 .member{max-width:250px;} #intro .introCon .area01 .member a{font-size:1.125rem;} #intro .introCon .area01 .member a:after{width:18px; height:18px; margin-top:-9px;} #intro .introCon .area01 .membanner{max-width:250px;} #intro .introCon .area02 .news .box p{display:none;} #intro .introCon .area02 .news .box ul.list{width:78%; padding:0 0 0 8px;} #intro .introCon .area02 .social ul.sns li a img{width:44px; margin:0 auto 8px;} #mainContents .area04 .banner .swiper-main-banner{width:80%;} } @media only screen and (max-width:480px){ #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li{height:267px;} #mainContents .area04 .schedule .tabCon .swiper-main-schedule ul li a .Date span.listDate{font-size: 0.938rem;} } /* ie hack */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #mainContents .area04 .schedule .tiarea .tab ul li .tabLink.active + span{bottom:-17px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){ #mainContents .area04 .schedule .tiarea .tab ul li .tabLink{padding:5px 12px 8px 6px;} #mainContents .area04 .schedule .tiarea .tab ul li .tabLink.active + span{bottom:0;} }