@charset "UTF-8";




/* CSS Document */

/*---------------------------------------------

reset

---------------------------------------------*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
img {
	margin:0;
	padding:0;
	}
table {
	border-collapse:collapse;
	border-spacing:0;
	}
fieldset,
img {
	border:0;
	}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
	}
ol,
ul {
	list-style:none;
	}
caption,
th {
	text-align:left;
	}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
	}
img {
	vertical-align:top;
	}

a {
	border:none; outline:none;
	}
*{
	zoom : 1;
	}

/*---------------------------------------------

style

---------------------------------------------*/
ol, ul {
    list-style: none;
}
/* clearfix */
.cf {
	zoom: 1;
}
.cf:before, .cf:after {
	content: "";
	display: table;
}
.cf:after {
	clear: both;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	text-decoration: none;
}


#page-top {
    position: fixed;
    bottom: 85px;
    right: 15px;
    font-size: 70%;
	z-index:10000;
}


#page-top a {
	text-decoration: none;
	color: #666;
	width: 45px;
	padding:10px 0;
	text-align: center;
	display: block;
	border-radius: 20px;
	background-color: #f0edec;
}


#page-top a:hover {
	text-decoration: none;
	background-color: #efe2d9;
}
	


a.navi2{
	color: #000;
	text-decoration:underline;
	
}


a.navi2:hover {
	color: #36c;
	text-decoration:underline;
}





a.navi3{
	color: #36c;
	text-decoration:underline;
	
}

a.navi3:hover {
	color: #600;
	text-decoration:underline;
}




a.navi4{
	color: #455f92;
	text-decoration:underline;
	
}

a.navi4:hover {
	color: #600;
	text-decoration:underline;
}


html,  body {
margin: 0;
width: 100%;
height: 100%;
}





header {
width: 100%;
height: 60px;
background-color:white;
position:relative;
}






	


body{
	/* スマホ横揺れ防止 */
	overflow-x:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
	
	

}




body{
	/* KEEP REALのセンター揃えの親要素用指定 */
		position:relative;
	text-align:center;
	}









#rogo_1{/*左配置のマークrogo*/
      	padding:0px;
      	background:#;
      	position:absolute;
		
		top:0px;
		
		width:100%;
		max-width:130px;
}











/*-------------------- 下部詳細 ---------------------*/


#contents{/*ブルー背景*/
	width:100%;
	

	
    background-image: url(../img/top/blue_back_sp.jpg);
	
	background-position:top top;
    background-size:100% 100%;
	background-repeat:no-repeat;
	
	margin:0;
	padding:0;  
	
}






/* mv */
.mv{
    width: 100vw;
    height: 30vh;/*全面表示の高さ*/
    display: flex;
    justify-content: center;
    align-items: center;
	
	margin:0px 0 30px 0;
}

.mv h1{
	
	
	  font-family:"Oswald" , sans-serif;  
	  text-align: center;
    font-size: 25px;/******** WORKS OF PUBLIC **********/
    font-weight: bold;
	
	margin:150px 0 0px 0;/*旧safariではtop隠れるからこれで調整するか*/
}

.mv p{
    font-size: 16px;
    text-align: center;
}



/*main*/
main{
    padding: 10px 0;
}

.demo{
    margin-bottom: 100px;
}

.demo:last-of-type{
    margin-bottom: 0;
}





.wrap{
	width:90%;
	
	margin: 0 auto;
}




/********************************* ここからフッター イラストまわり ************************************/

footer{
	position:relative;
	top:-49px;/*ここでイラストの下位置を青背景の線と合わせている*/
	left:0px;
	
	width:100%;
	max-width:95%;
	
	text-align:left;
	margin:0 auto;	
     background:;
	
}


.flex_box{/*親要素*/
	display:flex;
	align-items:flex-end;/*要素下部揃え*/
	justify-content:space-between;/*最初と最後を左右の一番端に配置*/
}



.flex_item{/*子要素*/
	width:49%;
	background:;
}


.flex_item h1{/*contact*/
	
	position:relative;
	top:-100px;
	left:60px;
	
  font-family:"Oswald" , sans-serif;
	font-size:1.13em;
	color:#003;
	text-align:left;
	font-weight:normal;
	line-height:180%;
	
	
}



.flex_item img.left{/*看板イラスト*/
	
	width:100%;
	max-width:180px;
	
	float:none;
	
	position:relative;
	top:36px;
}



.flex_item img.rogo{/*看板内ロゴ*/
	
	width:100%;
	max-width:70px;
	
	float:none;
}



.flex_item img#right{/*********** ヤシの木イラスト *************/
	
    width:100%;
	max-width:120px;
	
	float:right;
	
	margin-right:0px;
	
	position:relative;
	bottom:35px;

}







.copyright{
display:block;	
position:relative;

text-align:center;
color:black;
font-family: "Courier New", Courier, monospace;
font-size:0.75em;
letter-spacing:0em;

margin:0 auto;


height:20px;

}






@media only screen and (min-width: 500px) {





/********************************* ここからフッター イラストまわり ************************************/

footer{
	position:relative;
	top:-74px;/*ここでイラストの下位置を青背景の線と合わせている*/
	left:0px;
	
	width:100%;
	max-width:97%;
	text-align:left;
	margin:0 auto;	
     background:;
	
}

.flex_item h1{/*contact*/
	
	position:relative;
	top:100px;
	left:-100px;
	  font-family:"Oswald" , sans-serif;
	font-size:1.13em;
	color:#003;
	text-align:left;
	font-weight:normal;
	line-height:180%;
	
	
}



.flex_item img.left{/*看板イラスト*/
	
	width:100%;
	max-width:160px;
	
	float:left;
	
	
	position:relative;
	top:0px;
}



.flex_item img.rogo{/*看板内ロゴ*/
	
	
	
	float:none;
}




.flex_item img#right{/*********** ヤシの木イラスト *************/
	
      width:100%;
	max-width:120px;
	
	float:right;
	
	margin-right:0px;
	
	position:relative;
	bottom:0px;
}




	
}







@media only screen and (min-width: 741px) {
	
	
	/*-------------------- 下部詳細 ---------------------*/


#contents{/*ブルー背景*/
	background-image: url(../img/top/blue_back5.jpg);
	
 
	
}
	
	
	.mv h1{
	
font-size: 30px;/******** WORKS OF PUBLIC **********/
 
}
	
.slidetitle{/*スクロール*/
  　　　left:44%;
      	bottom:3%;
}




header {
width:100%;
height: 75px;
background-color:white;
position:fixed;

z-index:20;
}


	
	


	
#rogo_1{/*rogo*/
      	padding:0px;
      	background:#;
      	position:absolute;
		
		top:0px;
		left:0px;
		
		width:100%;
		max-width:200px;
		
		
}















/********************************* ここからフッター イラストまわり ************************************/

footer{
	position:relative;
	top:-123px;/*ここでイラストの下位置を青背景の線と合わせている*/
	left:0px;
	
	width:100%;
	max-width:96%;
	
	text-align:left;
	margin:0 auto;	
     background:;
	
	

}


.flex_box{/*親要素*/
	display:flex;
	align-items:flex-end;/*要素下部揃え*/
	justify-content:space-between;/*最初と最後を左右の一番端に配置*/
}



.flex_item{/*子要素*/
	width:49%;
	background:;
}


.flex_item h1{/*マルキ化粧合板 contact*/
	
	position:relative;
	top:120px;
	left:-130px;
	
	  font-family:"Oswald" , sans-serif;
	font-size:1.38em;
	color:#003;
	text-align:left;
	font-weight:normal;
	line-height:180%;
	
	background:;
	
	
	
}



.flex_item img.left{/*看板*/
	
	width:100%;
	max-width:200px;
	
	float:left;
	
	position:relative;
	top:0px;
}



.flex_item img.rogo{
	
	width:100%;
	max-width:90px;
	
	float:left;
}




.flex_item img#right{/*********** ヤシの木イラスト *************/
	
    width:100%;
	max-width:160px;
	
	float:right;
	
	margin-right:0px;
	
	position:relative;
	bottom:0px;
    
}






.copyright{
display:block;	
text-align:center;
color:black;
font-family: "Courier New", Courier, monospace;
font-size:14px;

position:relative;
bottom:0px;

margin:0 auto ;
padding-top:50px;



width:100%;
max-width:100%;


	
background:;

z-index:100;

}




	

}



@media screen and (min-width: 790px) {




	

}






@media screen and (min-width: 840px) {


/****************** ここからフッター イラストまわり ******************/

footer{
	position:relative;
	top:-35px;/*ここでイラストの下位置を青背景の線と合わせている*/
	left:0px;
	
	width:100%;
	max-width:98%;
	
	text-align:left;
	margin:0 auto;	
     background:;
	
	

}


.flex_box{/*親要素*/
	display:flex;
	align-items:flex-end;/*要素下部揃え*/
	justify-content:space-between;/*最初と最後を左右の一番端に配置*/
}



.flex_item{/*子要素*/
	width:49%;
	background:;
}


.flex_item h1{
	
	position:relative;
	top:140px;
	left:-140px;
	
	
	font-size:1.75em;
	color:#003;
	text-align:left;
	font-weight:normal;
	line-height:180%;
	
	
}



.flex_item img.left{/*看板*/
	
	width:100%;
	max-width:250px;
	
	float:left;
	
	position:relative;
	top:0px;
}



.flex_item img.rogo{
	
	width:100%;
	max-width:110px;
	
	float:left;
}






.flex_item img#right{/*********** ヤシの木イラスト *************/
	
    width:100%;
	max-width:220px;
	margin-right:0px;
    
	
	

}


}









@media screen and (min-width: 1100px) {


	footer{
	position:relative;
	top:0px;/*ここでイラストの下位置を青背景の線と合わせている*/
	left:0px;
	
	width:100%;
	max-width:98%;
	
	text-align:left;
	margin:0 auto;	
     background:;
	
}

}









/* ------------------- */
/* ------ demo3　使用 ------ */
/* ------------------- */

.demo03 .masonry-demo03 {
    width: 100%;
    margin: 0 auto;
}

.demo03 .item {
  width:310px;
  margin-bottom:90px;
}

.demo03 .item img {
    width: 100%;
}

h1{  /**************************スマホ画像下タイトル*************************/
	  font-family:"Kosugi" , sans-serif;
	color:black; 
	font-size:1em;
	
	font-weight:bold; 
	line-height:140%;
	
	margin:5px 0 0 0;
}


@media screen and (min-width: 480px) {/*480以上*/

    .demo03 .item {
        width:340px;
		padding:10px;
		margin-bottom:-7px;/*画像横並び下部の余白調整*/
    }
	
	h1{
	font-family:"Kosugi" , sans-serif;
	color:black; 
	font-size:0em;/*スマホ用タイトルを消す*/
	
}


}






@media screen and (min-width:  741px) {/*741以上*/

    .demo03 .item {
        width:280px;
		padding:10px;
		margin-bottom:-7px;/*画像横並び下部の余白調整*/
    }
	
	h1{

	color:black; 
	font-size:0em;/*スマホ用タイトルを消す*/
	
}


}


   @media screen and (min-width: 1020px) {/*タブレット横*/
       .demo03 .item {
        width:270px;
		padding:10px;
		margin-bottom:-7px;/*画像横並び下部の余白調整*/
    }
	
}

   @media screen and (min-width: 1350px) {
    .demo03 .item {
        width:340px;
		padding:10px;
		
    }
	
}



/* Flexible Image */
img {
  max-width: 100%; 
  height:auto;
}