@charset "UTF-8";
/* CSS Document */

body { position:relative; }


/*NAVBAR OPEN*/
/*2017-04-05*/
.navBarWrapper {width: 100%; background: #1185bb; color: #fff; position: absolute; z-index: 100; display: none;}
.navBarWrapper a {color: #fff; text-decoration: none; line-height: 1.5;}
.navBarWrapper a:hover {opacity: 0.6;}
.navBarWrapper .navBarClose {width: 100%; text-align: center; background: #0b6ba7; font-size: 20px; font-weight: bold; color: #fff; padding: 10px 0; cursor: pointer; }
.navBarWrapper .navBar {max-width: 1120px; width: 100%; margin: 0 auto; color: #fff; padding: 30px 10px; box-sizing:border-box;}
.navBarWrapper .navBar > ul > li {float: left; width: 26%; margin-right: 1.66%; max-width: 260px;}
.navBarWrapper .navBar > ul > li:nth-of-type(1) {width: 17%; font-size: 18px; font-weight: bold; text-align: center; background: #1fa3cf;  display: table;}
.navBarWrapper .navBar > ul > li:nth-of-type(2),
.navBarWrapper .navBar > ul > li:nth-of-type(3),
.navBarWrapper .navBar > ul > li:nth-of-type(4){height: auto !important;}
.navBarWrapper .navBar > ul > li p {display: table-cell; vertical-align: middle;}
.navBarWrapper .navBar > ul > li div {height: 100%; vertical-align: middle;}
.navBarWrapper .navBar > ul > li:last-child {margin-right: 0;}
.navBarWrapper .navBar > ul > li a {font-size: 14px; padding-left: 30px; display: block;}
.navBarWrapper .navBar > ul > li ul > li:first-child {font-weight: bold; margin: 20px 0; background: url('../img/customer/nav_icon.png') no-repeat left center;}
.navBarWrapper .navBar > ul > li ul > li:first-child a {font-size: 16px;}

/* HEADER */
#topHeaderWrapper { position:absolute; width:100%; top:0; left:0; box-sizing:border-box; z-index:1000; }
#topHeader { /* margin-bottom: 10px; */}
#topHeader h1 { width:120px; float:left; padding:20px 0 0 10px; box-sizing:border-box; line-height:1.1; }
#topHeader h1 img[src*=".svg"] {width: 100%; }
#topHeader .btnBox { width:926px; float:right; padding:0 10px 0 0; box-sizing:border-box; }
#topHeader .btnBox ul { display:flex; flex-wrap:no-wrap; justify-content:space-between; }
#topHeader .btnBox ul li { flex-grow:0; flex-shrink:1; flex-basis:136px; align-self:center; }
#topHeader .btnBox ul li:nth-of-type(4),
#topHeader .btnBox ul li:nth-of-type(5),
#topHeader .btnBox ul li:nth-of-type(6) { flex-basis:164px; margin:0;  }
#topHeader .btnBox ul li a { transition:all 0.5s ease-in-out 0s; display:block; position:relative; }
#topHeader .btnBox ul li a img { position:relative; z-index:10; }
#topHeader .btnBox ul li:nth-of-type(1) a:hover,
#topHeader .btnBox ul li:nth-of-type(2) a:hover,
#topHeader .btnBox ul li:nth-of-type(3) a:hover  { background:#1fa3cf; }
#topHeader .btnBox ul li:nth-of-type(4) a,
#topHeader .btnBox ul li:nth-of-type(5) a,
#topHeader .btnBox ul li:nth-of-type(6) a { background:url(../img/common/bg_header_04.png) no-repeat; background-size:100% 100%; }
#topHeader .btnBox ul li:nth-of-type(4) a:after { content:' '; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:url(../img/common/bg_header_01.png) no-repeat; background-size:100% 100%; transition:all 0.5s ease-in-out 0s; }
#topHeader .btnBox ul li:nth-of-type(5) a:after { content:' '; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:url(../img/common/bg_header_02.png) no-repeat; background-size:100% 100%; transition:all 0.5s ease-in-out 0s;}
#topHeader .btnBox ul li:nth-of-type(6) a:after { content:' '; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:url(../img/common/bg_header_03.png) no-repeat; background-size:100% 100%; transition:all 0.5s ease-in-out 0s;}
#topHeader .btnBox ul li:nth-of-type(4) a:hover:after,
#topHeader .btnBox ul li:nth-of-type(5) a:hover:after,
#topHeader .btnBox ul li:nth-of-type(6) a:hover:after { opacity:0; }

/* MAIN VISUAL */
#mainVisualWrapper { position:relative; overflow:hidden; }
#mainVisual {  background:url(../img/top/img_main_01.jpg) center center no-repeat; background-attachment:fixed; background-size:cover; height:100vh; position:relative; overflow:hidden; }
#mainVisual h2 { background:url(../img/top/subtit_main_01.png) center center / auto 520px no-repeat; text-indent:-9999px; position:absolute; width:100%; height:100%; left:0; top:0; }
#latestNewsBox { position:absolute; bottom:10px; right:10px; width:500px; border-radius:5px; box-sizing:border-box; padding:0 0 0 6em; background:#fff; overflow:hidden; font-size:14px; }
#latestNewsBox h3 { width:6em; left:0; top:0; height:100%; background:#1fa3cf; position:absolute; }
#latestNewsBox h3 span { position:absolute; top:50%; left:0; width:100%; text-align:center; color:#fff; margin:-0.5em 0 0 0; line-height:1; }
#latestNewsBox p { display:block; padding:10px; }
#latestNewsBox p b {  display:block; }

#expo .expoBox { box-sizing:border-box; padding:20px; background:url(../img/top/bg_expo_01.png) center center / 120px 120px repeat; border:#000 solid 1px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 1px 0; }
#expo .expoBox .expo01 { flex-grow:0; flex-shrink:1; flex-basis:calc( 43.26% - 10px ); position:relative; }
#expo .expoBox .expo01::after { position:absolute; right:-10px; top:0; height:100%; width:1px; background:#000; content:''; display:block; line-height:1; }
#expo .expoBox .expo02 { flex-grow:0; flex-shrink:1; flex-basis:calc( 56.74% - 10px ); }
#expo nav { padding:0 40px; background:#9d1e49; }
#expo nav ul { display:flex; flex-wrap:nowrap; justify-content:space-between; }
#expo nav ul li:nth-of-type(1) { flex-grow:0; flex-shrink:1; flex-basis:190px; position:relative; }
#expo nav ul li:nth-of-type(2) { flex-grow:0; flex-shrink:1; flex-basis:170px; position:relative; }
#expo nav ul li:nth-of-type(3) { flex-grow:0; flex-shrink:1; flex-basis:310px; position:relative; }
#expo nav ul li:nth-of-type(4) { flex-grow:0; flex-shrink:1; flex-basis:330px; position:relative; }
#expo nav ul li:not(:last-of-type)::after { content:''; display:block; width:1px; right:0; height:calc(100% - 20px); top:10px; background:#fff; position:absolute; }
#expo nav ul li a { display:block; }
#expo nav ul li a:hover {  opacity:0.7; }
#expo nav ul li a img { width:100%; height:auto; }
#year2018-2019 { box-sizing:border-box; padding:20px; margin:0 auto 40px auto; width:100%; max-width:1120px; }
#year2018-2019 p { display:block; font-size:14px; line-height:1.5em; padding:10px 0 0 0; }
#year2018-2019 p b { display:block; font-size:18px; color:#003567; margin:0 0 10px 0; font-weight:bold;}
#year2018-2019 .pcOnly { display:block; }
#year2018-2019 .spOnly { display:none; }


@keyframes shake {
    20% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


/* MAIN NAVIGATION */
#mainNavi { }
#mainNavi ul { }
#mainNavi ul li { width:33.33%; float:left; overflow:hidden; }
#mainNavi ul li a { display:block; padding:29% 0; font-size:1.55vw; font-weight:bold; text-align:center; color:#fff; text-decoration:none; position:relative; }
#mainNavi ul li a:before { content:' '; position:absolute; width:0; left:50%;  top:calc(50% + 0.5em); height:1px; background:#fff; transition:all 0.5s ease-in-out 0s; }
#mainNavi ul li a:hover { }
#mainNavi ul li a:hover:before { width:10em; left:calc(50% - 5em); }
#mainNavi ul li:nth-of-type(1) a { background:url(../img/top/bg_top_01.png) center center no-repeat; background-size:cover; }
#mainNavi ul li:nth-of-type(2) a { background:url(../img/top/bg_top_02.png) center center no-repeat; background-size:cover; }
#mainNavi ul li:nth-of-type(3) a { background:url(../img/top/bg_top_03.png) center center no-repeat; background-size:cover; }
#mainNavi ul li a:after { content:' '; display:block; width:100%; position:absolute; top:calc(50% + 1em); left:0; background:url(../img/top/bg_top_04.png) center center no-repeat; background-size:contain; height:0.65em; transition:all 0.5s ease-in-out 0s; }
#mainNavi ul li a:hover:after { top:calc(50% + 1.5em); }

.messageBox { width:100%;max-width:1120px; box-sizing:border-box; padding:0 20px; margin:0 auto 40px auto; }
.messageBox .pcOnly { display:block; }
.messageBox .spOnly { display:none }

/* FOR BUILDERS */
#builderWrapper { /* background:url(../img/top/bg_builder_01.jpg) ; background-size:128px 128px; */ background:#fff; padding:60px 0; }
#builder { width:100%; max-width:1120px; box-sizing:border-box; padding:0 20px; margin:0 auto 0 auto; }
#builder .informationBox { width:calc(50% - 20px); margin:0 0 25px 0; }
#builder .informationBox h4 { /* background:#fff; */ background:#1fa3cf; color:#fff; border-radius:5px; font-size:18px; font-weight:bold; padding:0.5em 1em 0.5em 1em; position:relative; margin:0 0 10px 0;  }
#builder .informationBox h4:before { content:' '; display:block; position:absolute; left:0.5em; height:50%; top:25%; width:4px; /* background:#1fa3cf; */ background:#fff; }
#builder .informationBox ul { height:480px; overflow:auto; box-sizing:border-box; padding:0 2em 0 0; }
#builder .informationBox .txt{ background:#fff; padding:10px; color:#333;}
#builder .informationBox iframe{background:#fff;}
#builder #event .boxIframe, #builder #event .boxIframe iframe{height:402px;}
#builder #other .boxIframe, #builder #other .boxIframe iframe{height:480px;}

#builder #event ul li:nth-of-type(1) { padding:1em 0; background:none; }
#builder #event ul li:nth-of-type(1) p { font-size:14px; }
#builder .informationBox ul li { display:block;  /* color:#fff; */ color:#333; font-size:14px; line-height:1.5em; padding:1em; background:url(../img/top/bg_builder_02.png) left 1.2em no-repeat; background-size:6px auto; border-bottom:#e1e1e1 solid 1px; }
#builder .informationBox ul li:last-of-type { }
#builder .informationBox ul li .category { display:inline-block; margin:0 0.5em 0 0; padding:0.25em 0.5em; border-radius:3px; background:#1fa3cf; color:#fff; font-weight:bold; line-height:1.1; font-size:12px; vertical-align:middle;animation-duration: 8s;  animation-fill-mode: both; animation-timing-function: ease-in-out; animation-iteration-count:infinite; animation-delay:0.5s; animation-name: flash;}
@keyframes flash {
    25% { color:#ffff44; }
    50% { color:#fff; }
    75% { color:#ffff44; }
    100% { color:#fff; }
}
#builder .informationBox ul li h5 { /* color:#fff; */ color:#333; font-size:14px; line-height:1.5em; }
#builder .informationBox ul li p { /* color:#fff; */ color:#333; font-size:12px; line-height:1.5em; }
#builder .informationBox ul li p a {  /* color:#fff; */ color:#333; text-decoration:underline; }
#builder .informationBox ul li p a:hover { color:#ccc; text-decoration:underline; }
#builder .informationBox ul li a {  /* color:#fff; */ color:#333; text-decoration:underline; font-weight:bold; }
#builder .informationBox ul li a:hover { color:#ccc; text-decoration:underline; }
#builder #other ul li p { font-size:14px; }
#builder #event { float:left; }
#builder #other { float:right; }
#builder .bnrBox { clear:both; display:flex; flex-wrap:no-wrap; justify-content:space-between; width:100%; max-width:880px; margin:0 auto;}
#builder .bnrBox > a:nth-of-type(1) { display:block; flex-grow:0; flex-shrink:1; flex-basis:580px; text-align:center; margin:0 0 10px 0;}
#builder .bnrBox > a:nth-of-type(2),
#builder .bnrBox > a:nth-of-type(3){ display:block; flex-grow:0; flex-shrink:1; flex-basis:145px; text-align:center; margin:0 0 10px 10px;}
#builder .bnrBox > span.bnr { display:block; flex-grow:0; flex-shrink:1; flex-basis:145px; text-align:center; margin:0 0 10px 10px;}
#builder .bnrBox > ul { display:block; width:calc(50% - 20px); float:right; }
#builder .bnrBox > ul li { display:block; width:calc(50% - 20px); float:left; margin:0 40px 20px 0; }
#builder .bnrBox > ul li:nth-of-type(even) { margin:0 0 20px 0; }
/* #builderNavi { clear:both; background:#fff; }
#builderNavi ul { }
#builderNavi ul li { display:block; float:left; }
#builderNavi ul li:nth-of-type(1) { width:25.88%; }
#builderNavi ul li:nth-of-type(2) { width:33.05%; }
#builderNavi ul li:nth-of-type(3) { width:19.47%; }
#builderNavi ul li:nth-of-type(4) { width:21.58%; position:relative; }
#builderNavi ul li:nth-of-type(4) a:nth-of-type(1) { display:block; position:absolute; left:5.85%; bottom:8.95%; width:42.18%; }
#builderNavi ul li:nth-of-type(4) a:nth-of-type(2) { display:block; position:absolute; right:5.85%; bottom:8.95%; width:42.18%; }
#builderNavi ul li:nth-of-type(5) { width:19.47%; }
#builderNavi ul li:nth-of-type(6) { width:21.58%; }
#builderNavi ul li:nth-of-type(7) { width:12.47%; clear:both; }
#builderNavi ul li:nth-of-type(8) { width:12.47%; }
#builderNavi ul li:nth-of-type(9) { width:25.04%; }
#builderNavi ul li:nth-of-type(10) { width:25.04%; }
#builderNavi ul li:nth-of-type(11) { width:24.95%; }
#builderNavi ul li:nth-of-type(12) { width:25.04%; }
#builderNavi ul li:nth-of-type(13) { width:24.95%; }
#builderNavi ul li a { display:block; transition: all 0.5s ease-in-out 0s; }
#builderNavi ul li a:hover { opacity:0.7; } */

/* #textLink { width:100%; max-width:1000px; box-sizing:border-box; padding:0 20px; margin:0 auto; }
#textLink ul { font-size:0px; text-align:center; }
#textLink ul li { margin:5px; display:inline-block; }
#textLink ul li a { color:#00b9ef; font-weight:bold; background:#fff; display:inline-block; padding:1em 2em; font-size:14px; text-decoration:none; }
#textLink ul li a:hover { color:#ccc; text-decoration:none; } */

/* 2019JBN全国会員交流会 */
.event2019 { width: 100%; max-width: 1080px; margin: 0 auto 60px auto}
.event2019 ul { padding: 1px 0 0 0; }
.event2019 ul li { flex-basis: calc( ( 100% - 2px ) / 3); line-height: 1;}
.event2019 ul li a { display: block; line-height: 1;}
.event2019 ul li a:hover { opacity: 0.7; }

@media screen and (max-width:1120px) {
/* HEADER */
#topHeader h1 { width:10.71%; }
#topHeader .btnBox { width:82.67%; }

/* MAIN VISUAL */
#mainVisual .jbnBoy { left:0; }
#mainVisual {background:url(../img/top/img_main_01.jpg) center center no-repeat; background-size:cover;}

/* MAIN NAVIGATION */
#mainNavi ul li a { font-size:2.5vw; }

/* FOR BUILDERS */
#builderWrapper { padding:5% 0; }
#builder .informationBox h4 { font-size:1.6vw; }
#builder .boxIframe{overflow:auto; -webkit-overflow-scrolling:touch;}
}

@media screen and (max-width:768px) {
/* HEADER */
#topHeader {  display:none; }

/* MAIN VISUAL */
#mainVisual h2 { background-size:70% auto; }
#latestNewsBox { position:relative; width:100%; bottom:0; right:0; border-radius:0px; font-size:3vw;  }
#latestNewsBox p { font-size:2.5vw; line-height:1.5em; }

.messageBox { padding:0 2vw; }
.messageBox .pcOnly { display:none; }
.messageBox .spOnly { display:block }

#expo .expoBox .expo01 {  flex-basis:100%; margin:0 0 40px 0; }
#expo .expoBox .expo01::after { right:0; top:auto; bottom:-20px; height:1px; width:100%;  }
#expo .expoBox .expo02 { flex-basis:100%; }
#expo nav { padding:0; }
#expo nav ul { flex-wrap:wrap; justify-content:center; }
#expo nav ul li:nth-of-type(1) { flex-grow:0; flex-shrink:1; flex-basis:52.77%; position:relative; margin:0 0 1px 0; }
#expo nav ul li:nth-of-type(2) { flex-grow:0; flex-shrink:1; flex-basis:47.23%; position:relative; margin:0 0 1px 0; }
#expo nav ul li:nth-of-type(3) { flex-grow:0; flex-shrink:1; flex-basis:93.93%; position:relative; margin:0 0 1px 0; }
#expo nav ul li:nth-of-type(4) { flex-grow:0; flex-shrink:1; flex-basis:100%; position:relative; }
#expo nav ul li:nth-of-type(2)::after { display:none; }
#expo nav ul li:nth-of-type(3)::before { display:block; top:0; right:0; width:100%; height:1px; background:#fff; content:''; position:absolute;}
#expo nav ul li:nth-of-type(3)::after { display:block; top:auto; bottom:0; right:0; width:100%; height:1px;}

#year2018-2019 { padding:0 2vw; }
#year2018-2019 p {  font-size:12px;}
#year2018-2019 p b { font-size:16px; }
#year2018-2019 .pcOnly { display:none; }
#year2018-2019 .spOnly { display:block; }

/* FOR BUILDERS */
#builder { padding:0 2vw; }
#builder .informationBox { width:100%; }
#builder .informationBox h4 { font-size:3.5vw; }
#builder .informationBox ul { height:auto; max-height:60vw; }
#builder #event,
#builder #other { margin:0 0 20px 0; }
/* #builder .bnrBox > a { width:100%; float:none; margin:0 0 2vw 0; }
#builder .bnrBox > ul { width:100%; float:none; margin:0 0 4vw 0; }
#builder .bnrBox > ul li { width:49%; margin:0 2% 2vw 0; }
#builder .bnrBox > ul li:nth-of-type(even) { margin:0 0 2vw 0; } */

/* #builderNavi ul li:nth-of-type(1) { width:43.91%; }
#builderNavi ul li:nth-of-type(2) { width:56.09%; }
#builderNavi ul li:nth-of-type(3) { width:47.43%; clear:both; }
#builderNavi ul li:nth-of-type(4) { width:52.57%; }
#builderNavi ul li:nth-of-type(5) { width:47.43%; }
#builderNavi ul li:nth-of-type(6) { width:52.57%; }
#builderNavi ul li:nth-of-type(7) { width:24.95%; clear:both; }
#builderNavi ul li:nth-of-type(8) { width:24.95%; }
#builderNavi ul li:nth-of-type(9) { width:50.08%; }
#builderNavi ul li:nth-of-type(10) { width:50.08%;  clear:both;}
#builderNavi ul li:nth-of-type(11) { width:49.92%; }
#builderNavi ul li:nth-of-type(12) { width:50.08%;  clear:both;}
#builderNavi ul li:nth-of-type(13) { width:49.92%; } */

#builder .boxIframe{height:350px;}
#builder #event .boxIframe iframe{height:350px;}
#builder #other .boxIframe iframe{height:350px;}


}

@media screen and (max-width:480px) {
#builder .boxIframe{height:200px;}
#builder #event .boxIframe iframe{height:200px;}
#builder #other .boxIframe iframe{height:200px;}

#builder .bnrBox { clear:both; display:flex; flex-wrap:wrap; justify-content:center; width:100%; max-width:none;}
#builder .bnrBox > a:nth-of-type(1) { display:block; flex-grow:0; flex-shrink:1; flex-basis:100%; text-align:center; margin:0 0 10px 0; }
#builder .bnrBox > a:nth-of-type(2),
#builder .bnrBox > a:nth-of-type(3) { display:block; flex-grow:0; flex-shrink:1; flex-basis:140px; text-align:center; margin:0 0 0 10px; }

	.event2019 ul li { flex-basis:100%; margin: 0 0 1px 0;}
	.event2019 ul li img { width: 100%;}
}