@charset "UTF-8";
body {
	font: 100%/1.4 "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "游ゴシック", "メイリオ", sans-serif, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic";
	font-size : 14px;
	font-size : 1.4rem;
	margin: 0;
	padding: 0;
	color: #000;
}

ul, ol, dl {padding: 0;margin: 0;}
a img { border: none;}
a:link {color:#414958;text-decoration:none;}
a:visited {color: #4E5869;text-decoration:none;}
a:hover, a:active, a:focus {text-decoration: none;}
a{outline:none;}
.fr {float: right;}
.fl {float: left;}
.clearfloat { clear:both;height:0;font-size: 1px;line-height: 0px;}

.img120{width : 120%;}
.img115{width : 115%;}
.img110{width : 110%;}
.img100{width : 100%;}
.img95{width : 95%;}
.img90{width : 90%;}
.img85{width : 85%;}
.img80{width : 80%;}
.img75{width : 75%;}
.img70{width : 70%;}
.img68{width : 68%;}
.img65{width : 65%;}
.img60{width : 60%;}
.img50{width : 50%;}
.img40{width : 40%;}
.img35{width : 35%;}
.img30{width : 30%;}
.img25{width : 25%;}
.img20{width : 20%;}
.img15{width : 15%;}
.img10{width : 10%;}
.img5{width : 5%;}
.cen{margin : 0 auto;}
.dtdn{display : none;}
.tb{font-weight : bold;}
.tInB{display:inline-block}
.relative{position : relative;}
.st{font-weight : bold;}

a:hover img.fade {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img.fade {
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}



/** for sp **/
.ecI{
	display : none;
}
.spdi{
	display:none;
}
.spdi600{
	display:none;
}

/** loader ******************* **/
#loader {
opacity: 1;
position: fixed;
z-index: 100000;
width: 100%;
height: 100%;
background: #fff;
top: 0;
left: 0;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px
}
.spinner>div {
background-color: #808080;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s
}
.spinner .rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s
}
.spinner .rect4 {
-webkit-animation-delay: -.9s;
animation-delay: -.9s
}
.spinner .rect5 {
-webkit-animation-delay: -.8s;
animation-delay: -.8s
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}

/** 
クリック開閉 ******************/

.hidden_box {
    margin:0;
    padding: 0;
}

.hidden_box label {
    padding: 15px 20px;
    border: dotted 1px #666;
    cursor :pointer;
	margin : 0 auto;
}

.hidden_box label:hover {
    background: #efefef;
}

.hidden_box input {
    display: none;
}

.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.hidden_box input:checked ~ .hidden_show {
    padding: 20px 0;
    height: auto;
    opacity: 1;
}



/** 
SP NAV ******************/
.spNav{
	display:none;
}

.drawer-nav,.drawer-dropdown-menu{
	background-color :rgba(0,0,0,0.3) !important;
	font-size : 1.2rem;
	padding-top : 5%;
}
.spNav ul li{
	padding : 5% 2% 5% 0;
	text-align : right;
	z-index : 3;
}
.spNav ul li a{
	color : #fff !important;
}
/**
Index 
*************************************************************************************************************/

#header{
	width : 100%;
	padding-bottom : 1%;
	font-family:"reross-quadratic";
}
#header-logo{
	width : 12%;
	float : left;
	padding : 1.5% 0 0 4%;
}
#header-logo img{
	width : 100%;
}

ul#header-nav{
	float : right;
	width : 83%;
	text-align : right;
	color : #000;
	box-sizing: border-box;
	padding : 1.2% 0.5% 1.2% 0;
}
ul#header-nav li{
	display : inline-block;
	margin: 2% 0;
	font-size : 1.1rem;
	border-right : 1px solid #333;
	padding : 0 2%;	
}
ul#header-nav li:last-child{
	border-right : none;
}


ul#header-nav li a {
	text-decoration: none;
	display: block;
}
#eyeCatch{
	position : relative ;
	width : 100%;
}
#eyeCatch .ic{
	width : 100%;
	position : absolute;
	top : 0;
	left : 0;
}
#eyeCathc .expoVideo{
	width : 100%;
	margin : 0 auto;
}

#bannerMenu {
	padding : 10% 0;
}
#bannerMenu ul {
	width : 75%;
	margin : 0 auto;
}
#bannerMenu ul li{
	width : 44%;
	padding : 0 3%;
	float : left;
}
#news{
	width : 100%;
	background-color : #3FAE99;
	padding : 1.5% 0;
	margin-top : -1%;
}
.newsContents{
	width : 97%;
	margin : 0 auto;
	background-color : #fff;
	z-index:2;
	text-align : center;
	border-radius:0.5em;
	padding-bottom : 3%;
}
.newsContents img{
	width : 8%;
	padding : 3% 0;
}
.newsContents table{
	width : 65%;
	margin : 0 auto;
	font-size : 1.1rem;
	line-height:2;
	color : #797E7F;
}
.newsContents table tr{
	border-bottom : 1px solid #D6DADD;
}
.newsContents table tr th{
	width : 20%;
}
.newsContents table tr td{
	width : 80%;
	padding-left : 5%;
	text-align:left;
}

#whatIs{
	width : 85%;
	margin : 20% auto 5%;
}
.wiPhoto{
	width : 43%;
	float : left;
}

.wiPhoto img.wipIc{
	width : 100%;
}
.wipSmall{
	padding : 2% 0;
}
.wipSmall img{
	width : 48%;
	padding-right : 4%;
	float : left;
}
.wipSmall img:nth-child(2){
	padding-right : 0;
}

.wiTitle{
	width : 6%;
	margin: 0 5%;
	float : left;
}
.wiInfo{
	width: 40%;
	padding-right : 1%;
	float : right;
	font-size : 1rem;
	line-height : 1.6;
}
.wiInfo .wiLead{
	font-size : 1.3rem;
	font-weight : bold;
	padding-bottom : 4%;
}
	







#highlights{
	width : 100%;
	padding :20% 0 15%;
	text-align : center;
}
#highlights img{
	width : 15%;
	padding-top : 5%;
	
}
.hlBox{
	width : 90%;
	margin : 0 auto;
}
.highlightsBlock{
	width : 42%;
	margin : 5% 4%;
	float : left;
}
.highlightsBlock img{
	width : 100% !important;
	padding : 0 !important;
}






#eventMap{
	width : 100%;
	text-align : center;
	margin : 10% 0;
}
#eventMap img{
	padding-top : 2%;
}
.coming{
	color : #717171;
}

img.emTitle{
	width : 15%;
}
img#emT{
	padding-top : 5%;
}
img.eMap{
	width : 70%;
}
#timeSchedule{
	text-align : center;
	margin : 20% 0 15%;
}
#tsT{
	padding : 5% 0;
	width : 23%;
}
.tsContents{
	width : 74%;
	margin : 0 auto;
}
.tsBox img{
	width :30%;
	float : left;
}
.tsBox p{
	text-align : left;
	width : 64%;
	margin-left : 5%;
	float : left;
}
.tsBox hr{
	border : 0.2px solid #B9B5B5;
}
p.tsTitle{
	font-weight : bold;
	font-size : 1.1rem;
	color : #666;
}
p.tsInfo{
	font-size : 0.8rem;
	padding-top : 1%;
}


/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
width: 100%;
margin: 0 auto;}
/*タブのスタイル*/
.tab_item {
width: calc(100%/2);
height: 3%;
background-color: #d9d9d9;
line-height: ;
font-size: 4rem;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
font-family:"ff-prater-block-web";
padding : 1% 0 0.5%;
}
.tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #555;
color: #fff;
}

span.dotw{
	font-size : 1.7rem;
}

#wsContents{
	width : 80%;
	text-align : center;
	margin : 0 auto;
}
.wsTitle{
	width : 20%;
}
.wsBar{
	width : 100%;
	margin : 2% auto;
}
.wsBox{
	width : 28%;
	margin : 0 2%;
	font-size : 0.8rem;
	text-align : left;
	float : left;
}
.wsBox img{
	width : 100%;
}
.wsName{
	font-weight:bold;
}












#company{
	width : 100%;
	text-align : center;
	padding : 0% 0;
}
#company img.cmTitle{
	width : 14%;
	padding : 5% 0 2%;
}
.companyBlock{
	width : 88%;
	margin : 0 auto;
	padding : 1% 0;
}
.companyBox{
	width : 24%;
	margin-right : 1%;
	background-color:#DAD6D6;
	color : #697074;
	float : left;
}
.companyBox img{
	width : 100%;
}
.companyName{
	font-weight:bold;
	font-size : 0.9rem;
	padding : 3% 0;
}
.companyInfo{
	font-size : 0.8rem;
	width : 92%;
	margin : 0 auto;
	text-align : left;
	min-height : 250px;
	line-height : 1.4;
}

.ButtonS{
	font-size : 0.9rem;
	display : block;
	transition:0.3s;
	position:relative;
}





#lsm{
	background-color:#E3D3F5;
	width : 100%;
	margin : 15% 0;
	padding : 1.5% 0;
}
.lsmContents{
	width : 97%;
	margin : 0 auto;
	background-color : #fff;
	z-index:2;
	text-align : center;
	border-radius:0.5em;
	padding-bottom : 3%;
}
.lsmTitle{
	width : 58%;
	padding : 10% 0 5%;
}
.lsmHead{
	width : 58%;
	margin : 0 auto;
}
.lsmHead img{
	width : 15%;
	float : left;
}
.lsmHead p{
	width : 80%;
	padding : 3% 0 3% 5%;
	float : left;
	text-align : left;
	font-size : 1rem;
	line-height:1.5;
}
.lsmShops{
	width : 80%;
	margin : 0 auto;
}
.titleFood{
	width : 20%;
	padding : 15% 0 5%;
}
.titleGoods{
	width : 35%;
	padding : 12% 0 8%;
}
.shopBox{
	width : 43%;
	padding : 7% 3.3% 0;
	float : left;
}

.shopBox img{
	width : 40%;
	float : left;
}

.shopBox img.imgRight{
	margin-left : 19% !important;
}

	
	
	
	
	
	
	
	
	
	
	
#accessMap{
	padding : 10% 0 15%;
	text-align : center;
	font-size : 1rem;
}
#accessMap img{
	width : 60%;
	padding : 5% 0 2%;
}
.location{
	width : 13%;
	margin: 0 auto;
	padding : 4% 0 1%;
}

.attention{
	width : 60%;
	margin : 0 auto;
	padding-top : 3%;
	text-align:center;
	line-height : 1.6;
}
#footer img{
	width : 20%;
	float : left;
	padding : 5% 10% 5% 20%;
}
#footer p{
	width : 40%;
	float: left;
	padding : 5% 0 5% 10%;
	font-size : 1rem;
}


/**
contentページ *************************** **/
hr.uM{
	border : none;
	border-bottom  : #707070 solid 2px;
}
.contents{
	width : 75%;
	margin : 0 auto;
	padding : 1% 0;
}
.contentIc{
	width  : 100% !important;
}
.contentPerson{
	width : 20%;
	float : left;
	padding-top : 5%;
	padding-left : 5%;
}
.hl01{
	width : 65%;
	float : left;
	padding:5% 5% 12%;
}
.date{
	font-size : 2.5rem;
	font-weight:bold;
}
.time{
	font-size : 1rem;
}
.contents h2{
	font-weight : bold ;
	font-size : 1.2rem;
	padding : 3% 0;
}
.seminarInfo{
	font-size : 1rem;
	padding-bottom : 2%;
}
.Oprf{
	padding-top : 4%;
}
.tstr{
	font-weight : bold;
}
.hl02{
	width  : 90%;
	margin : 0 auto;
	padding : 30% 0;
}
.hl02 img{
	width : 50%;
	float : right;
}
.hl02 p{
	width : 40%;
	float : left;
}


.hlM01{
	width : 80% ;
	margin : 5% auto;
}
.hlM01 img{
	width : 30%;
	margin : 0 1%;
}

.hlR01{
	width : 80%;
	margin-left : 20%;
}
.hlR01 img{
	width : 45% !important;
	margin : 0 2%;
	float : right;
	padding-bottom : 2% !important;
}


.hlH01{
	width : 100%;
	margin : 2% auto;
}
.hlH01 img{
	width : 30%;
	margin: 0 1%;
}
.hlUEDA01{
	width : 100%;
	margin : 2% auto;
}
.hlUEDA01 img{
	width : 45%;
	margin : 0 2%;
	float : left;
}

.coccolinaPhoto{
	width : 50%;
	float : left;
	padding : 2% 0;
}


@media screen and (max-width : 960px) {
.tsContents{
	width : 90%;
}
.tsTitle{
	font-size: 0.9rem;
}
.tsBox{
	padding-top : 1%;
}
.tab_item {
font-size : 3rem;
}
#wsContents{
	width : 90%;
}

}

/**
for smartphone-horizontal & tablet *************** **/
@media screen and (max-width : 768px) {
	.spdn{
		display : none;
	}
	.spdi{
		display:inherit;
	}
#header-logo{
	width : 20%;
}
.spNav{
	display:inherit;
}
ul#header-nav{
	display : none;
}
#news{
	width : 96%;
	padding : 2%;
	margin-top : -1.5%;
}
.newsContents img{
	width : 10%;
}
.newsContents table{
	width : 80%;
	font-size : 1rem;
}

#whatIs{
	width : 75%;
}
.wiPhoto{
	width : 100%;
	float : none;
}

.wiPhoto img.wipIc{
	width : 100%;
}
.wipSmall{
	width : 45%;
	float : left;
}
.wipSmall img{
	width : 100%;
	padding-right : 0;
	float : none;
}
.wiTitleSP{
	width : 10%;
	padding : 5% 0 0 25% !important;
	float : left;
}
.wiInfo{
	width: 100%;
	padding-right : 0;
	float : none;
	font-size : 1rem;
	line-height : 1.6;
	margin : 3% auto 0;
}
.wiInfo .wiLead{
	font-size : 1.3rem;
	font-weight : bold;
	padding-bottom : 4%;
}




#highlights{
	padding : 35% 0 15%;
}
#highlights img{
	width : 20%;	
}
.highlightsBlock{
	width : 40%;
	margin : 5%;
}
.hlb3{
	padding : 0 30% !important;
	margin : 0 auto !important;
}


#eventMap{
	margin : 15% 0;
}
.coming{
	font-size : 1.1rem;
}

img.emTitle{
	width : 23%;
}
img.eMap{
	width : 70%;
}
#timeSchedule{
	margin : 35% 0 20%;
}
#tsT{
	width : 28%;
}



.tsContents{
	width : 80%;
	text-align : left;
}
.tsBox img{
	width :75%;
	float : none;
}
.tsBox p{
	width : 100%;
	margin-left : 0;
	float : none;
	padding-bottom : 1%;
}
p.tsTitle{
	font-size : 1.1rem;
}
p.tsInfo{
	font-size : 0.8rem;
}





#company{
	padding : 20% 0;
}
#company img.cmTitle{
	width : 20%;
}
.companyBlock{
	width : 90%;
}
.companyBox{
	width : 48%;
	margin-right : 2%;
	margin-bottom : 2%;
}
.companyName{
	font-size : 0.9rem;
	padding : 3% 0;
}
.companyInfo{
	font-size : 0.8rem;
	width : 92%;
	min-height : 150px;
}


.lsmContents{
	padding-bottom : 3%;
}
.lsmTitle{
	width : 58%;
	margin : 0 auto;
	padding : 10% 0 5%;
}

.lsmHead{
	width : 70%;
	margin : 0 auto;
}
.lsmHead img{
	width : 25%;
	float : none;
	margin : 0 auto;
}
.lsmHead p{
	width : 100%;
	padding : 10% 0;
	float : none;
}

#accessMap{
	padding : 20% 0;
}
#accessMap iframe{
	width : 100%;
	height : 300px
}

#accessMap img{
	width : 80%;
	margin : 0 auto;
	padding : 5% 0;
}
.location{
	font-size : 1.6rem;
	line-height : 2.2;
}
.attention{
	width : 80%;
	padding-top : 3%;
	text-align:left;
}
.location{
	width : 20%;
}
#footer img{
	width :30%;
	float : none;
	padding : 2% 35%;
	margin : 0 auto;
}
#footer p{
	width : 100%;
	float: none;
	padding : 0;
	font-size : 0.9rem;
	text-align : center;
}

.wsBar{
	margin : 0 auto;
}
.wsBox{
	width : 45%;
	margin : 0 2%;
	font-size : 0.8rem;
	padding-top : 4%;
}




/**
content *************************************************** **/

.contents{
	width : 85%;
	padding : 1% 0;
}


.hlM01{
	width : 95% ;
	margin : 0 auto !important;
}


}
/**
for smartphone ************************** **/
@media screen and (max-width : 600px) {
	.ecV{
		display:none;
	}
	.ecI{
		display:inherit;
}
	.ecI img{
		width : 100%;
	}
#header-logo{
	width : 25%;
	padding : 1.5% 0 0 4%;
}
.spdn600{
	display : none;
}
.spdi600{
	display:inherit;
}
	
#bannerMenu {
	padding : 10% 0;
}
#bannerMenu ul {
	width : 90%;
	margin : 0 auto;
}
#bannerMenu ul li{
	width : 45%;
	padding : 0 2.5%;
	float : left;
}
.newsContents img{
	width : 15%;
	padding : 6% 0;
}
.newsContents table{
	width : 88%;
	font-size : 0.9rem;
}
#whatIs{
	width : 90%;
}


#highlights img{
	width : 28%;	
}
img.emTitle{
	width : 31%;
}
img.eMap{
	width : 90%;
}
#tsT{
	width : 40%;
}


.tsContents{
	width : 88%;
}
.tsBox img{
	width :75%;
}
.tsBox p{
	width : 100%;
	float : none;
	padding-bottom : 1%;
}
p.tsTitle{
	font-size : 1.1rem;
}
p.tsInfo{
	font-size : 0.8rem;
}



#company img.cmTitle{
	width : 27%;
}

.lsmHead{
	width : 70%;
	margin : 0 auto;
}
.lsmHead img{
	width : 40%;
	float : none;
	margin : 0 auto;
	padding :6% 0;
}
.lsmHead p{
	width : 100%;
	padding : 10% 0;
	float : none;
	font-size : 0.9rem;
	line-height:1.5;
}

.titleFood{
	width : 30%;
	padding : 18% 0 8%;
}
.titleGoods{
	width : 80%;
	padding : 15% 0 11%;
}

.shopBox{
	width : 100%;
	padding : 5% 0;
	float : none;
}

.location{
	width : 28%;
}
#footer img{
	width :40%;
	padding : 4% 30%;
}
#footer p{
	padding : 0;
}


/**
content *************************************************** **/

.contents{
	width : 95%;
}
.contentPerson{
	width : 42%;
	float : none;
	padding-top : 10%;
	padding-left :29%;
}
.hl01{
	width : 95%;
	float : none;
	margin : 0 auto;
	padding:5% 0;
}
.hl02{
	width  : 95%;
	padding : 10% 0;
}
.hl02 img{
	width : 60%;
	float : none;
	padding : 0 20%;
}
.hl02 p{
	width : 100%;
	float : none;
	padding : 3% 0;
}
.contents h2{
	padding : 6% 0 3%;
}

.hlR01{
	width : 90%;
	margin : 0 auto;
}
.hlR01 img{
	width : 45% !important;
	margin : 0 2%;
	float : right;
}


.coccolinaPhoto{
	width : 85%;
	float : none;
	padding : 0 7.5%;
	
}
.wsTitle{
	width : 35%;
}


}
/**
for smartphone-vertical ************************** **/
@media screen and (max-width : 480px) {
.companyInfo{
	min-height : 280px;
}
#header-logo{
	width : 30%;
	padding : 2% 0 1% 4%;
}
#footer p{
	font-size : 0.8rem;
}
#news{
	width : 100%;
	padding : 3% 0;
	margin-top : -2%;
}
.newsContents{
	width : 94%;
}

#whatIs{
	width : 95%;
}


.highlightsBlock{
	width : 80%;
	margin : 2% 10% 5%;
	float : none;
}


#lsm{
	padding : 3% 0;
}
.lsmContents{
	width : 94%;
}
.lsmHead img{
	width : 50%;
	float : none;
	margin : 0 auto;
	padding :6% 0;
}

.hlM01 img{
	width : 80%;
	margin : 2% 10%;
}
.hlH01 img{
	width : 80%;
	margin: 2% 10%;
}

.hlUEDA01 img{
	width : 80%;
	margin : 2% 10%;
	float : none;
}

.hlR01 img{
	width : 80%;
	margin : 2% 10%;
}

.contents h2{
	padding : 10% 0 3%;
}

.hlR01 img{
	width : 90% !important;
	margin : 0 5%;
	float : none;
}



p.tsTitle{
	font-size : 1rem;
}
p.tsInfo{
	font-size : 0.8rem;
}
.tab_item {
font-size : 1.7rem;
}
span.dotw{
	font-size : 1rem;
}
.tsContents{
	width : 100%;
}


}

/**
for smartphone-vertical(small) ************************** **/
@media screen and (max-width : 380px) {
	#header-logo{
	width : 35%;
	padding : 3.5% 0 1% 4%;
}
}