@charset "utf-8";


/*--------------------------〇comon----------------------------------------*/

body  { 
       font-size: 14px;
       margin: 0px;
       text-align: center;
       line-height: 1.8em;}   

.mobile_only{
       display:none ;}



/*---------〇フェードイン（interSectionOvserver）------------*/

.pickup_aaa{
	
}
.fade{

}

.fadein_left{
  opacity: 0;
}

.fadein_left_plus{
  opacity: 1 !important;
}




/*--------------------------〇start---------------------------------------------*/

#start{
        max-width: 1500px;
        margin: 0 auto;
        display: flex;
		align-items: center;}
#name{
        margin: 0 0 0 25px;}
#name h1{
        margin:10px 0 0 ;}
#start_navi{
        padding:0 ;}
#start_navi_ul{
        margin: 0px ;
        padding: 0px ;
        list-style-type: none;}
#start_navi_ul li{
        display: inline-block;
        margin-right: 10px;}
#start_navi_ul li a{
	    position: relative;
        display: inline-block;
        text-decoration:none ;
        color:#000 ;
        font-size:18px ;
        padding: 15px 10px;
        font-weight: 700;}
#start_navi_ul li a:hover{
		transition: 0.1s ;
		transform: scale(1.1);
		color: #219c10;
}
#start_navi_ul li a:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 5px;
		width: 100%;
		height: 3px;
		background: #7cce8e;
		transform: scale(0, 1);
		transition: 0.3s; }
#start_navi_ul li a:hover:before {
		transform: scale(1); }
.info {
		margin: 10px 0 0 0;}



/*--------------------------〇content-main-----------------------------------------*/

#contet-main{
        max-width: 1500px;
        width:100% ;}





/*------------------〇content001------------*/

#content001{
	
}
#content001 img { 
        max-width:100% ;
        height: auto ;
        background-color: #fff;}
.swiper-wrapper{
		height:auto !important ;}	
#design{
        position: relative;	
        height: 0;
        width: 100%;
        padding-top: 40%;
        margin-bottom: 60px;}
#design ul{
		background-color: #fff;
		margin: 0;
		height: 100%;
		list-style: none;}
#design ul li{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: inherit;
		overflow: hidden;}






/*------------------〇content002------------*/

#content002 h2{
	font-size:40px ;
	line-height:120% ;}
#content002 p.text02{
	font-size:25px ;
	font-weight:400 ;
	line-height:120% ;}
#content002 img { 
	max-width:100% ; }



/*------------------〇haikei_bg------------*/

#haikei_bg{
	width:auto;
	height: 100px ;
	background-color: #efefef;
	padding: 0;
	margin: 0;
    background-image: url(img/haikei_bg.jpg);
    background-repeat: no-repeat;
	background-size: 100% auto ; }


#haikei_bg2{
	width:auto;
	height: 100px ;
	background-color: #fdfaef;
	padding: 0;
	margin: 0;
	background-image: url(img/haikei_bg2.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto ; }

/*------------------〇content003------------*/

#content003{
	background-color: #efefef;
	padding: 0 0 100px ;
	margin: 0; }
#content003 h2{
	margin: 0 0 25px ;
	font-size:40px ;
	line-height:120% ;}
#content003 p.text02{
	font-size:25px ;
	font-weight:400 ;
	line-height:120% ;}
#content003_inner{
	margin: auto ;
	max-width:100% ;
	width: 980px ;
	display:flex ;}
#content003_inner h3{
	margin: 0;
	padding: 10px;
	background-color: #178f0f;
	color: #fff;}
#content003 ul {
	text-align: left; }
#inner01,#inner02,#inner03{
	width:33% ;
	margin:5px ;	
	background-color: #fff ;}
#inner01 a,#inner02 a,#inner03 a{
	text-decoration:none ;
	color: #000;}
#inner01 a:hover,#inner02 a:hover,#inner03 a:hover{
	text-decoration:none ;}
#inner01 img,#inner02 img,#inner03 img{
	max-width:100% ;}
#inner01 .aitem,#inner02 .aitem,#inner03 .aitem{
    margin: 25px 0 5px;
    height: 198px ;}
#inner01 p.info,#inner02 p.info,#inner03 p.info{
	text-align: left;
	padding: 10px;
	line-height: 150%; }


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

#html5 {
    background-image: url(img/naname.png);
    background-repeat: repeat;
	background-size: auto ;
	padding: 0 0 100 0;
	margin: 0px ;}
#html5 h2{
        font-size: 40px;
        line-height: 100%;
        margin: 40px 0;
        display: inline-block;}
#html5_inner{
	display:flex;
	margin: auto ;
	max-width:100% ;
	width: 750px ;
	display:flex ;
    background-image: url(img/dog.png);
    background-repeat: no-repeat;
	background-position: center ;
	background-size: 800px ; }
#html5_inner h3{
	margin: 0;
	padding: 5px;
	background-color: #824116;
	color: #fff;}
#ht01{
	width:30% ;
	margin:5px ;}
#ht02{
	width:70% ;
	margin:5px 5px 45px 5px ;}
#ht02 p{
	text-align: left;
	padding: 10px;
	line-height: 150%;}
#ht02 p.paragraph3{
	padding: 0 0 50px 0;}


--〇HTML5------------*/


/*------------------〇soft-----------*/


#soft {
	background: #fdfaef;
	padding: 0px ; }
#soft_inner{
	margin: auto ;
	max-width:100% ;
	width: 800px ;}
#soft h2{
	font-size:40px ;
	margin:0 0 40px ;
	line-height:120% ;}
.soft_flex h3{
	font-size:25px;}
.soft_flex{
	display:flex;
	text-align:left;
	padding:0 0 14px 0 ; }
.soft_flex_area2{
	margin:0 0 0 25px;}
.font700{
     font-weight: 700;
     color:#41bb7e;}



	 
/*------------------〇EC-----------*/



#ec1{
	position:relative;
	background-color: #fff;
	background-image: url(img/078.jpg);
    background-repeat: repeat;
	background-size: contain ;
	padding: 0px;
	margin: 0px;}
#ec1 h2{
        font-size: 40px;
        line-height: 100%;
        margin: 40px 0 0 0;
		color: #fff;
        display: inline-block; }
.ec1_text{
	font-size: 25px;
    color:#fff;	 }


#ec2{
		background-image: url(img/naname.jpg);
		background-repeat: repeat;
		background-size: contain ; }

.ec2_flex{
    width: 800px;
    margin: auto;
    display: flex;
    justify-content: center; }

.ec2_flexbox1,.ec2_flexbox2{
	width:48%;
	text-align: left;
}

#ec3 a:hover{
	opacity: 0.5 ;
	transition: 0.1s ;
	transform: scale(1.1); }



/*------------------〇EC--------
#ec{
	position:relative;
    background-image: url(img/003_002_haikei.jpg);
    background-repeat: repeat-y;
	background-size: 100% auto ;
	padding: 0px;
	margin: 0px;}
#ec h2{
        font-size: 40px;
        line-height: 100%;
        margin: 40px 0 0 0;
        display: inline-block;}
#ec .decoration1{
	position:absolute;
	top: -25px;
	left: 10%;
	transform:rotate(-5deg);}
#ec .decoration2{
	position:absolute;
	top: -50px;
	right: 10%;
	transform:rotate(5deg);}
#ec .decoration3 img{
	max-width:90%;}
#ec .decoration4{
	position:absolute;
	top: 258px;
	left: 30%;
	z-index:10;
	transform:rotate(0deg);}
#ec .decoration5{
	position:absolute;
	top: 258px;
	left: 55%;
	z-index:20;
	transform:rotate(0deg);}
#ec .decoration6{
	position:absolute;
	top: 297px;
	left: 25%;
	z-index:30;
	transform:rotate(0deg);}
#ec .decoration7{
	position:absolute;
	top: 125px;
	left: 65%;
	z-index:70;
	transform:rotate(10deg);}

---*/




/*------------------〇javascript_jqery------------*/

#javascript_jqery{

	background-color: #efefef;
	padding: 25px 0 30px 0;
	margin: 0px ; }
#javascript_jqery h2{
	font-size:40px ;
	line-height:120% ;}
#javascript_jqery p.text1{
	font-size:25px ;
	font-weight:400 ;
	line-height:120% ;}

#javascript_jqery img { 
	max-width:100% ; }
#javascript_jqery button{
    padding: 15px 40px;
	margin: 0 8px;
    background: #6fc78e;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 18px;}
#javascript_jqery button:hover{
    background: rgb(255, 195, 106);}


#thumbnail_flex_area1_inner,
#thumbnail_flex_area2_inner{
	display:flex ;
	justify-content: center;
	margin: 18px 0 0 0; }
#thumbnail_flex_area1_001,
#thumbnail_flex_area2_001{
        margin: 5px 25px 0 0 ;}
#thumbnail_flex_area1_001 img,
#thumbnail_flex_area2_001 img{
	display: flex ; }
#thumbnail_flex_area1_001 img:hover,
#thumbnail_flex_area2_001 img:hover{
	opacity: 0.5; }
#thumbnail_flex_area1_002 img,
#thumbnail_flex_area2_002 img{
	border: 1px solid #ccc;}
#thumbnail_flex_area2{
	display: none ; }
#thumbnail_flex_area1_002_inner{
	width: 400px;
	height: 400px; }
#thumbnail_flex_area2_002_inner{
	width: 400px;
	height: 400px; }





	/*------------------〇Google_map_API------------*/

	.google_map_api{
		background: #fff;
		padding: 0 0 50px;
	}
	.google_map_api h2{
		font-size: 40px;
		line-height: 100%;
		margin: 40px 0 0 0;
		display: inline-block;}
	.google_map_api p.text1{
	line-height:120% ;}
	#map_canvas {
	height: 400px;
	width: 600px;
	margin: 25px auto;}













/*------------------〇content005------------*/


#content005{
	background-color: #F2EBE2;
	max-width: 100%;
	padding: 0px;
	margin: 0px; }
#content005 h2{
	font-size:40px ;
	line-height:120% ;}
#content005_inner{
	margin: auto ;
	padding:50px 0 ;
	width: 980px ;
	max-width: 100%;
	display:flex ;}
#content005_inner01,#content005_inner02,#content005_inner03{
        width: 33%;
        margin: 5px;
        background-color: #fff;
        text-align: left;
        padding: 18px 10px;}
#content005_inner01 ul{
	margin: 0;}
#content005_inner01 li{}
#content005 ul li a{
	text-decoration:none ;
	color: #000;}
#content005 ul li a:hover{
	text-decoration: underline;}






/*---------〇フェードイン------------*/


.fadein1,.fadein2,.fadein3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;

 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;

 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 visibility: visible !important; }

@-webkit-keyframes fadeIn {
 0% { opacity: 0; -webkit-transform: translateX(500px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeIn {
 0% { opacity: 0; -webkit-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}