@charset "utf-8";




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

body{ 
    font-size: 14px;
    margin: 0px;
    text-align: center;
    line-height: 1.8em;}   
.pc_only{
    display:none ;}
.mobile_only{
    display:flex ;}



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

#start{
    max-width: 1500px;
    margin: 0 auto;	
    display: inline !important;}
#name{
    margin: 0 0 0 25px;}
#name h1{
    margin:10px 0 0 0 ;}
#start_navi{
    padding:0 ;}
#start_navi_ul{
    margin: 8px 0 14px   ;
    padding: 0px ;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;}
#start_navi_ul li{
    width: 50%;
    background: #fe908f;
    margin: 0px;
    position: relative;}
#start_navi_ul li a{
    display:inline-block ;
    width:92% ;
    text-align:center ;
    text-decoration:none ;
    color:#fff ;
    font-size:14px ;
    padding: 12px 0px;
    font-weight: 700;}

#start_navi_ul li a:hover{
    background-color: #efefef;
    color: rgb(90, 180, 55);}

    #start_navi_ul li.li09:before{
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    background: #789;
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    margin: auto 0;}
#start_navi_ul li.li02:before{
    content: '';
    display: block;
    width: 1px;
    height: 30px;
    background: #789;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
    margin: auto 0;}

#start_navi_ul li a:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 5px;
	width: 100%;
	height: 5px;
	background: none;
	transform: scale(0, 1);
	transition: 0.7s; }
#start_navi_ul li a:hover:before {
	transform: scale(1); }



/*--
#start_navi_ul li.li01:before{
    content: '';
    display: block;
    width: 140px;
    height: 1px;
    background: #789;
    position: absolute;
    top: 0;
    bottom: -40px;
    left: 18px;
    margin: auto 0;}
--*/

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

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


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

#content001{}
#content001 img { 
    max-width:100% ;}
.swiper-wrapper {
    height: auto !important ;}

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

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

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

#content003{
	background-color: #efefef;
	padding: 20px 0 50px ;}
#content003 h2{
	font-size:25px ;
    margin: -75px 0 0 0;
	line-height:120% ;}
#content003_003 h2 {
    font-size: 25px;}
#content003 p.text02{
	font-size:14px ;
	font-weight:400 ;
	line-height:120% ;}
#content003_inner{
	margin: auto ;
	max-width:100% ;
	width: 980px ;
        display: list-item;}
#content003_inner h3{
	margin: 0;
	padding: 5px;
	background-color: #824116;
	color: #fff;}
#inner01,#inner02,#inner03{
	width:80% ;
	margin:5px auto 25px ;	
	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 0;}
#inner01 p.info,#inner02 p.info,#inner03 p.info{
	text-align: left;
	padding: 10px;
	line-height: 150%;}


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


#soft h2{
	font-size:25px ;
    margin: -50px 0 0 0;
	line-height:120% ;}
.soft_flex{
    display: flex;
    flex-wrap: wrap;}
.soft_flex_area1{
    margin: auto; }
.soft_flex_area1 img{
	width:50% ; }
.soft_flex_area2{
	margin:0 15px;}
.area1_img{
	text-align:center; }
.order1{
     order:1; }
.order2{
     order:2; }

/*---------〇html5エリア------------*/

#html5 {
    padding: 0 0 25px 0;}
#html5 h2{
	font-size:25px ;
	line-height:120% ;}
#html5_inner{
        background-image: none;}
#ht01 {
    width: 2%;
    margin: 5px;}
#ht02 {
    width: 98%;
    margin: 5px;}
#html5_inner {
    background-size: auto 30%;}




/*---------〇ECエリア------------*/

#ec{
	position:relative;
        background-image: url(img/ec_haikei.jpg);
        background-repeat: repeat-y;
	background-size: 100% auto ;
	padding: 0px;
	margin: 0px;}
#ec h2{
	font-size:25px ;
	line-height:120% ;}
#ec .ec_text{
    margin:0 10px;}
#ec .decoration1{
	width:33%;}
#ec .decoration2{
	width:14%;}
#ec .decoration1 img,
#ec .decoration2 img,
#ec .decoration3 img{
        max-width: 100%;}
#ec .decoration1 {
        position: absolute;
        top: 45%;
        left: -1%;
        transform: rotate(-8deg);}
#ec .decoration2 {
       position: absolute;
       top: -50px;
       right: 1%;
       transform: rotate(8deg);}
#ec .decoration1 {
       width: 30%;}



/*---------〇javascriptエリア------------*/

#javascript_jqery h2{
    margin: 25px 0 ;
    font-size: 25px;}
.javascript_button{
    display: flex;
    justify-content: center; }

.javascript_button button{
    font-size: 12px !important; }

#thumbnail_flex_area1_inner, #thumbnail_flex_area2_inner {
    display: block ;
    margin: 18px 0 0 0; }

#thumbnail_flex_area1_001, 
#thumbnail_flex_area2_001 {
    margin: 0 auto;
    display: flex;
    justify-content: center; }
#thumbnail_flex_area1_001 img,
#thumbnail_flex_area2_001 img {
    margin: 5px 5px 5px 0;}

#thumbnail_flex_area1_002 img,
#thumbnail_flex_area2_002 img {
    margin: 0 auto ;
    max-width: 95% ; 
    height: auto;  }
#thumbnail_flex_area1_002_inner,
#thumbnail_flex_area2_002_inner {
    margin: auto;
    width:95% ; }

/*---------〇Google_map_apiエリア------------*/

#map_canvas {
    width: 90%;
    height: 300px ;
    margin: 25px auto;}
#google_map_api h2{
    font-size: 25px;
    margin: 40px 0 15px;}



/*---------〇ランディングページエリア------------*/


#ec1 h2{
	font-size:25px ;
	line-height:120% ;}
.ec1_img01 img{
    max-width: 90% ; }

.ec2_flex,.ec3_flex {
    display: block; }
.ec2_img01 img {
    max-width: 80%;
    margin: 25px auto 0; }
.ec2_img02 img {
    max-width: 90%;
    margin: 0px auto 15px; }
.ec2_img03 img {
    max-width: 80%;
    margin: 0px auto 15px; }





/*---------〇content004------------*/

#content004 {
    width: 90%;
    margin: auto;}
#content004 h2{
	font-size:25px ;
	line-height:120% ;}
#content004_inner{
	margin: auto ;
        max-width: 100%; }
#content004 .aitem{
	margin: auto ;
	width: 80%;
	max-width: 100%; }
#content004 table{
	margin: auto;
	width:100% !important ;} 
#content004 table th{
	background-color:#1f8c3b ;
	padding:15px ;
	width:50%  ;
	color: #fff;}
#content004 table td{
	padding: 15px ;
	background-color: #efefef;
	text-align: center;}


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

#content005{
	background-color: #F2EBE2;
	max-width: 100%;}
#content005 h2{
	font-size:40px ;
	line-height:120% ;}
#content005_inner{
	margin: auto ;
	padding:50px 0 ;
	width: 980px ;
	max-width: 100%;
	display: list-item;}
#content005_inner01,#content005_inner02,#content005_inner03{
	width: 80%;
	margin: 10px auto;
	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; }