@charset "utf-8";

/***************************************

base

***************************************/


html {
	font-size: 62.5%;
	height: 100%;
	position: relative;
	-webkit-overflow-scrolling: touch;/*スマホのスクロールをスムーズにする*/
}
body {
	width: 100%;
	height: 100%;
	position: relative;
	color: #333;	
	margin: 0 auto;
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;	
	color: #333;
	word-break: break-word;/*自動改行*/
}

a {
	text-decoration: none;
	color: #333;
	outline: none;
}

a:hover {
	/*--webkit-tap-highlight-color: rgba(0,0,0,0);
	opacity: 0.5;
	filter: alpha(opacity=50);
	webkit-transition: 0.6s;
	transition: 0.6s;*/
}


.clearfix:after {/*親要素に display: flow-root Chrome と Firefox */
  content: "";
  clear: both;
  display: block;
}




/***************************************

header

***************************************/





header{
	width: 98%;
	text-align:right;
	margin:0 auto;}

header img{
	width: 7%;

}



@media screen  and (max-width:960px){/**480px〜：SP横 *600px〜タブレット　768px〜sp縦*/
	
	
	header{
	width: 98%;
	text-align:center;
	margin:0 auto;
	background: #fff;
	
	top: 0px;                 
    left: 0px;  	
	z-index: 5;
	position: fixed;  }
	
	header img{
	width: 15%;

}
 
}



/***************************************

main

***************************************/


/*左側*/

aside.left{
	width: 40%;
	
	position: fixed;         
        
	}

h2{
	margin-top: 10%;
	text-align: center;
	font-size: 3.5rem;
	line-height: 4rem;
	letter-spacing: 1.7rem
}

h3{
	text-align: center;
	font-size: .5rem;
	line-height: 4rem;
	letter-spacing: 1rem
}

section ul.nav{
	width: 30%;
	margin:5% auto 0;
	font-size: 1.2rem;
	line-height: 3rem;
	letter-spacing: .2rem
	}

section ul.nav li{
	text-align: left;}

section ul.nav li img{	
	vertical-align: top}



@media screen  and (max-width:960px){/**480px〜：SP横 *600px〜タブレット　768px〜sp縦*/
	
	
aside.left{
	width: 110%;
	top: 20px;                 
    left: 0px;  	
	
	   
	z-index: 5;
	
	background: #fff;
        
	}
	
h2{
	margin-top: 5%;
	text-align: center;
	font-size: 2rem;
	line-height: 2.5rem;
	letter-spacing: 1.7rem
}

h3{
	text-align: center;
	font-size: .5rem;
	line-height: 4rem;
	letter-spacing: .7rem
}

section ul.nav{
	width: 100%;
	margin:5% auto 0;
	font-size: 1.0rem;
	line-height: 2rem;
	letter-spacing: .2rem
	}

section ul.nav li{
	width: 30%;
	float: left;
	text-align: center;}

section ul.nav li img{	
	vertical-align: top}	
	
 
}



/*右側*/


section.right{
	width: 60%;
	float: right;
	
	
	
	
	
	z-index: 1;
	
	}




#container {
    max-width: 98%;
    margin: 5% auto 0;
    text-align: center;

}
.elements {
    display: inline-block;
	 
 }  


.plus{
	position: absolute;
	top:1%;
	right:1%;
	
	font-size: 4rem;
	color: #bbb;
	
}



.w30{
	
    width: calc(100% / 3 - 2%);
	float: left;
 	 position: relative;
 	 margin: 1%;
 	 overflow: hidden;
}

.w40{
	
    width: calc(100% / 3 - 2%);
	float: left;
 	 position: relative;
 	 margin: 1%;
 	 overflow: hidden;
}

.w50{
	
    width: calc(100% / 2 - 2%);
	float: left;
 	 position: relative;
 	 margin: 1%;
 	 overflow: hidden;
}

.w100{
	
    width: calc(100% - 2%);
	float: left;
 	 position: relative;
 	 margin: 1%;
 	 overflow: hidden;
}




.elements img{
    
    width: 100%;
   
}


@media screen  and (max-width:960px){/**480px〜：SP横 *600px〜タブレット　768px〜sp縦*/
	
section.right{
	width: 100%;
	
	
	margin-top: 200px;
	
	}




#container {
    max-width: 98%;
    margin: 5% auto 0;
    text-align: center;
	
	
}
.elements {
    display: inline-block;
	 
 }  


.plus{
	position: absolute;
	top:1%;
	right:1%;
	
	font-size: 4rem;
	color: #bbb;
	
}



   
}
	
}

/***************************************

モーダル

***************************************/


 #btn-close-modal {
     width:100%;
     text-align: right;
     cursor:pointer;
     color:#fff;
	 
            }
#btn-close-modal p{
	font-size: 7rem;
	color: #bbb;}	


ul.itemLink{
	width: 60%;
	margin: 0 auto;
}

ul.itemLink li.li60{
	float: left;
	width: 60%;}

ul.itemLink li.li60 img{
	
	width: 90%}

ul.itemLink li.li40{
	float: left;
	width: 40%;}

ul.itemLink li.li40 p.sub{
	margin-top: 10%;
	font-size:5rem }	

ul.itemLink li.li40 p.com{
	margin-top: 3%;
	font-size:1.5rem;
	line-height: 2.5rem}


div.yoko{
	width: 80%;
	margin: 0 auto;
	text-align: center;}

div.yoko img{
	width: 60%;
	
}


ul.itemLink2{
	width: 60%;
	margin: 0 auto;
	
	
}

ul.itemLink2 li.li50{
	width: 45%;
	margin: 0 auto;
	float:left;
	padding-left: 5%;

	
}


ul.itemLink2 li.li50 p.sub{
	margin-top: 10%;
	font-size:5rem }	

ul.itemLink2 li.li50 p.com{
	margin-top: 3%;
	font-size:1.5rem;
	line-height: 2.5rem;
}


ul.coor{
	width: 100%;
	margin: 10% auto 0;
}

ul.coor2{
	width: 100%;
	margin: 10% auto 0;
}



ul.coor li.li100,ul.coor2 li.li100{
	width: 100%;
	
	font-size:1.5rem;
	line-height: 2rem
}


ul.coor li.li30,ul.coor2 li.li30{
	width: 30%;
	float: left;
	clear: both;

}


ul.coor li.li30 img,ul.coor2 li.li30 img{
	width: 75%;
	

}

ul.coor li.li70,ul.coor2 li.li70{
	width: 70%;
	
	font-size:1.2rem;
	line-height: 2rem;
	
	float: left;
	
	
}

ul.coor li.li70 > p,ul.coor2 li.li70 > p{
	
	
	font-size:1.2rem;
	line-height: 2rem;
	
}


ul.coor li.li70 span.new,ul.coor2 li.li70 > span{
	
	
	font-size:1rem;
	color: #fff;
	line-height: 2rem;
	padding: 1%;
	background: #928539;
	
}


@media screen  and (max-width:960px){/**480px〜：SP横 *600px〜タブレット　768px〜sp縦*/
	
#btn-close-modal {
     width:100%;
     text-align: right;
     cursor:pointer;
     color:#fff;
	 
            }
#btn-close-modal p{
	font-size: 7rem;
	color: #bbb;}	


ul.itemLink{
	width: 80%;
		
	margin: 0 auto;
}

ul.itemLink li.li60{
	float: left;
	width: 100%;}

ul.itemLink li.li60 img{
	
	width: 90%}

ul.itemLink li.li40{
	float: left;
	width: 100%;}

ul.itemLink li.li40 p.sub{
	margin-top: 10%;
	font-size:2rem }	

ul.itemLink li.li40 p.com{
	margin-top: 3%;
	font-size:1rem;
	line-height: 2rem}


div.yoko{
	width: 80%;
	margin: 0 auto;
	text-align: center;}

div.yoko img{
	width: 60%;
	
}


ul.itemLink2{
	width: 60%;
	margin: 0 auto;
	
	
}

ul.itemLink2 li.li50{
	width: 45%;
	margin: 0 auto;
	float:left;
	padding-left: 5%;

	
}


ul.itemLink2 li.li50 p.sub{
	margin-top: 10%;
	font-size:5rem }	

ul.itemLink2 li.li50 p.com{
	margin-top: 3%;
	font-size:1.5rem;
	line-height: 2.5rem;
}


ul.coor{
	width: 100%;
	margin: 10% auto 0;
}

ul.coor2{
	width: 100%;
	margin: 10% auto 0;
}



ul.coor li.li100,ul.coor2 li.li100{
	width: 100%;
	
	font-size:1.5rem;
	line-height: 2rem
}


ul.coor li.li30,ul.coor2 li.li30{
	width: 30%;
	float: left;
	clear: both;

}


ul.coor li.li30 img,ul.coor2 li.li30 img{
	width: 75%;
	

}

ul.coor li.li70,ul.coor2 li.li70{
	width: 70%;
	
	font-size:1rem;
	line-height: 1.5rem;
	
	float: left;
	
	
}

ul.coor li.li70 > p,ul.coor2 li.li70 > p{
	
	
	font-size:1rem;
	line-height: 1.5rem;
	
}


ul.coor li.li70 span.new,ul.coor2 li.li70 > span{
	
	
	font-size:.7rem;
	color: #fff;
	line-height: 2rem;
	padding: 1%;
	background: #928539;
	
}	
	
	
}
	
/***************************************

fotter

***************************************/





footer{
	clear:both;
	width: 98%;
	text-align:center;
	margin:0 auto;;
}

footer > p{
	font-size: .7rem;
	

}

/***************************************

LOADER

***************************************/

.loading {
width: 100%;
height: 100%;
background: rgba(255,255,255,1.0);
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.loading img {

position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
	
	
/********************************-*/
	
@media screen and (min-width:480px) and (max-width:600px){/**480px〜：SP横 */
	
 
}

@media screen and (min-width:600px) and (max-width:960px){/**600px〜タブレット　768px〜sp縦*/
	
 
}