﻿
body{
	width:100%;
	margin:0 auto;
	padding:0 auto;
	color:#000;
	font-size:16px;	
	text-align:center;
	background:#31948d;
}


/*メニュー*/
.title{
	padding:65px 0 65px 0;
	background:#fff;
}
.title p{
	font-size:1.75em;
	font-weight:bold;
	color:#31948d;
	margin:0 auto;
	text-align:center;
}
#titleue{
	width:280px;
	border-bottom: 4px dotted #31948d;
	letter-spacing:0.1em;
	padding-bottom:5px;
}
#titlesita{
	padding-top:10px;
	font-size:1em;
	font-weight:bold;
	color:#31948d;
	letter-spacing:0.1em;
}
#menu{
       background-color:#fff;
       display:flex;
       justify-content:center;
}
.m1,.m2,.m3{
       background-color:#efb194;
       width:200px;
       height:40px;
       border-radius:20px;
       margin-left:20px;
       margin-right:20px;
       margin-bottom:20px;
       line-height:2.5em;
       position:relative;
       z-index:1;
}
a{
       text-decoration:none;
       color:#000;
       display:block;
}       
/*メニューのアニメーション*/
.message{
       position:relative;
}
.m1, m2. m3{

}
#hana1{
       position:absolute;
       left:70px;
       top:-30px;
       opacity:0%;
       transition:.3s;
}
.access{
       position:relative;
}
#hana2{
       position:absolute;
       top:-30px;
       left:70px;
       opacity:0%;
       transition:.3s;
	z-index:0;
}
.contact{
       position:relative;
}
#hana3{
       position:absolute;
       top:-30px;
       left:70px;
       opacity:0%;
       transition:.3s;
	z-index:0;
}
.m1:hover+#hana1{
       top:-65px;
       opacity:100%;
}
.m2:hover+#hana2{
        top:-65px;
       opacity:100%;
}
.m3:hover+#hana3{
        top:-65px;
       opacity:100%;
}
/*メッセージ*/
.main{
        background-color:#31948d;
}
.maina{
        display:flex;
        margin:0 auto;
	padding:15px;
        justify-content:center;
	max-width:1300px;
}

.main img{
        text-align:center;
        padding-top:20px;
        width:90%;
	max-width:1300px;
}
#main1{
       color:#fff;
       text-align:left;

}
h3{
        font-size:34px;
}
img[src$="sozai/about2.png"]{
       width:80%;
}
img[src$="sozai/about3.png"]{
       display:none;
}
.main2{
       margin-top:50px;
}



/*学べること紹介*/
#mainb{
        background-color:#fff;
        height:550px;
        width:90%;
        border-top-right-radius:40px;
        border-bottom-right-radius:40px;
        margin-bottom:50px;
}
#mainb p{
        font-size:25px;
        color:#31948d;
        font-weight:700;
        border-bottom:4px dotted #31948d;
        width:80%;
        text-align:left;
        padding-top:50px;
}
.manabi{
	max-width:1000px;
	margin:0 auto;
}
.mainb_1{
	margin-left:60px;
}
.a{
        font-size:18px;
}
#main3{
       max-width:1000px;
       margin:0 auto;
	justify-content:center;
}
#main3 img{
         margin-top:40px;
	margin-left:50px;
	border-radius:20px;
}
#main3 p{
        color:#31948d;
        font-size:18px;
        border:none;
        margin-left:13px;
        margin-top:-10px;
        font-size:15px;
        font-weight:500;
}
.b{
        font-size:22px;
        font-weight:700;
        line-height:2em;
}
.m3-1,.m3-2{
        display:flex;
	width:
}
.r1{
       display:none;
}
.sp_br{
       display:none;
}
#kakusu1{
	display:none;
}
#kakusu2{
	display:none;
}
@media screen and (max-width:768px){
   body {
    overflow-x: hidden;
  }
#maina_res{
	margin-left:15px;
}
   .m1,.m2,.m3{
         width:100%;
         height:30px;
         font-size:13px;
         margin-right:20px;
         margin-top:-30px;
}
   #mainb{
	display:none;
	margin:0 auto;
}
   .message,.access,.contact{
         margin-right:20px;
	z-index:0;
}
   .main img{
         width:90%;
}
   #menu{
         width:100%;
}
   #menu img{
         display:none;
}
   .sp_br{
         display:block;
}
   .maina{
         
}
   #main1 h3{
         line-height:40px;
         font-size:22px;
white-space: nowrap
}
    .r1{
         display:inline-block;
}
    
    #main1 p{
        font-size:14px;
        width:100%;
}
    img[src$="sozai/about2.png"]{
        display:block;
}


	#kakusu1{
		display:block;
		
	}
	#kakusu2{
		display:block;
	}
	#manabu_naiyou_res{
		display:flex;
		justify-content:center;
		text-align:left;
		height:

	}
	#res_res{
	  color:#31948d;
    	  background-color:#fff;
      	  width:90%;
      	  border-top-right-radius:40px;
      	  border-bottom-right-radius:40px;
      	  margin-bottom:50px;
	}
	.manabu_icon_res{
		margin:20px 0;
	
	}
	.manabu_icon_res img{
		border-radius:20px;
		padding:0;
		margin:20px;
	}
	#manabu_setumei_res{
		padding-left:10%;

	}
	.manaberukoto_res{
		font-size:25px;
		font-weight:700;
		text-align:left;
		padding-top:20px;
		margin-left:5%;
		margin-bottom:0;
	}
	#mainb_res{
		border-bottom:4px dotted #31948d;
		width:80%;
		margin:0 auto;
	}
	.excel_res, .word_res, .pc_res, .iphone_res{
		display:flex;
	}
	.setumei1, .setumei2, .setumei3, .setumei4{
		margin-right:10%;
	}
}

/*390pxスマホ版*/
@media screen and (max-width:390px){
  body {
    overflow-x:hidden;
  }
   #titleue {
         font-size:17px;
}
   .m1,.m2,.m3{
         width:100px;
         height:30px;
         font-size:12px;
         margin-left:2px;
         margin-right:2px;
         margin-bottom:50px;
}
   .main img{
         width:90%;
}
   #menu{
         width:100%;
}
   #menu img{
         display:none;
}
   .sp_br{
         display:block;
}
   .maina{
         position:relative;
}



	#syosin{
 	 font-size:20px;
         line-height:10px;
         font-size:20px;
         margin-top:2px;
	}

    #main1{
          margin-left:0;
}
    .r1{
         display:inline-block;
}
    .maina{
        display:block;
}
    
    #main1 p{
        font-size:12px;
        width:270px;
}
    img[src$="sozai/about2.png"]{
        display:none;
}


	#kakusu1{
		display:block;
		
	}
	#kakusu2{
		display:block;
	}
	#manabu_naiyou_res{
		display:flex;
		justify-content:center;
		text-align:left;
	}
	#res_res{
	  color:#31948d;
    	  background-color:#fff;
      	  width:90%;
      	  border-top-right-radius:40px;
      	  border-bottom-right-radius:40px;
      	  margin-bottom:50px;
	}
	.manabu_icon_res{
		margin:20px 0;
	
	}
	.manabu_icon_res img{
		border-radius:20px;
		padding:0;
		margin:20px;
		
	}
	#manabu_setumei_res{
		padding-left:10%;

	}
	.manaberukoto_res{
		font-size:25px;
		font-weight:700;
		text-align:left;
		padding-top:20px;
		margin-left:5%;
	}
	#mainb_res{
		border-bottom:4px dotted #31948d;
		width:80%;
		margin:0 auto;
	}
	.excel_res, .word_res, .pc_res, .iphone_res{
		display:flex;
	}
   .message,.access,.contact{
  	z-index:0;
}
}


