body {
    background: white;
    color: #333333;
}
.main-visual {

   height: 600px;
width: 100%;

  background: url('./img/header.jpg') top center/ cover no-repeat;
}

/*見出し*/
 h1 {
    color: #fff;
    font-size: 35px;
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
    height: 65px;
    line-height: 65px;
}

h2{
    color: white;
    font-size:50px;
    width: 80%;
    padding-right: 15px;
    padding-left: 15px;
    margin-top:5%;
    margin-left:10%;
    height: 65px;
    line-height: 65px;

}
h3{
	font-size:50px;
	text-align: center;
	font-weight: bolder;

}
h4{
	color:#D2691E;
	font-size:50px;
	text-align: center;
	font-weight: bolder;

}
h5{
	font-size:30px;
	text-align: center;
	font-weight: bolder;

}
h6{
	font-size:30px;
	text-align: center;
	font-weight: bolder;

}
h7{
	font-size:20px;
	text-align: center;
	font-weight: bolder;

}
/*ヘッダー */
nav ul{
	display: table;
	margin-top:-175px;
	margin-bottom:30px;
	padding: 0 ;
	width: 70%;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}
nav li{
	  list-style: none;
	  float: left;
	  margin-left:8%;
}
nav a{
	display: block;
	width: 100%;
	text-decoration: none;
	padding-bottom: 5px;
	color:white;
	font-size:15px;
	margin-top:-20px;

}
.nav-toggle {
	  display:none;
}


/*画像*/
img{
	margin-left:-5%;
	width:10%;

}

/*サブタイトル*/
.sub-tittle{

		width:100%;
		height:10%;
		font-size:30px;
		text-align: center;
		background:#28A6D1;
		color:white;

}
/*サブタイトル2*/
.sub-problem{

	text-align: center;



}
/*課題解決*/
.problem{
	margin-top:15%;
	width:100%;
	height:20%;

}


/*問題3つ*/
main {
	  display: flex;
	  flex-wrap: wrap;
	  padding: 10px;
	margin-top:5%;
}

main div.animal {
	  width: calc(33.3% - 10px);
	  margin: 5px;
}

main div.animal div.heading
{
	margin-top:5%;
	margin-bottom:10%;
	font-size:30px;
	text-align: center;

}

main div.animal p{
	margin-top:5%;
	text-align:left;
	

}

/*4つの場合*/
main1 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

}

main div.animal1 {
  width: calc(25% - 10px);
  margin: 5px;
}


main div.animal1 div.circle{
	  width:100%;

}	 

main div.animal1 p{
	margin-top:5%;
	text-align:left;
	

}
.features{
	width:40%;
	height:40%;
	margin-left:10%;

}
/*6つの場合*/
main1 {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin-left:25%;

}
main1 div.animal2 {
  width: calc(16.7% - 10px);
  margin: 5px;
}


main1 div.animal2 div.circle{
		  position: relative;
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  border-radius: 50%;
		  background: skyblue;

}	 
main1 div.animal2 div.circle span{
		  position: absolute;
		  display: inline-block;
		  left:10%;
		  top: 50%;
		  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
		  width :80px;
		  text-align:center;
}


main1 div.animal2 div.circle2{
		  position: relative;
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  border-radius: 50%;
		  background: skyblue;

}
main1 div.animal2 div.circle2 span{
		  position: absolute;
		  display: inline-block;
		  left:10%;
		  top: 50%;
		  -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
		  width :80px;
		  text-align:center;
}



/*画像*/
.cont{
	width:100%;
	height:100%;
		  text-align:center;

}
.contimg{
	width:70%;
	height:70%;
}

.imgsize{
	margin-left:0;
	height:200px;
	width:100px;
}


/*スライドショーとボックス*/

.contents {
			margin-top:15%;
			margin-left:10%;
			padding:50px;
			height:80%;
    			width: 80%;
 		 	overflow: hidden;
			background:#112B4C;

	
}
.contents p{
	font-size:40px;
	color:#ADBA69;
	text-align:center;
	font-weight: bolder;


}
.contents div.p{
	font-size:20px;
	color:white;
	text-align:right;
	font-weight: bolder;


}
.contents a{
	text-decoration: none;


}
.imgsize{
	height:400px;
	width:500px;
}

/*よくある質問*/
.question{
	margin-top:15%;
	font-size:30px;
	text-align: center;
	font-weight: bolder;

}
main3 {
  display: flex;
  flex-wrap: wrap;
  padding:30px;

}
main3 div.animal3 {
  width: calc(50% - 10px);
  margin: 5px;
}




/*よくある質問折り畳み表示*/
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
	width:100%;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

/*フッター関係*/
.footer{
	margin-top:10%;
	background:#28A6D1;
	width:100%;
}
.footer_font{
	margin-left:35%;
	font-size:15px;
	color:white;
}
.footer_font a{
		color:white;
		margin:5%;



}
/*フッターロゴ*/
.foot{
	margin-top:1%;
	width:12%;
	margin-right:20%;
	margin-left:-50%;
}


/* Ipad pro,Ipadのみ   */
@media screen and (max-width:1024px) {


.main-visual {

  background: url('./img/header.jpg')  cover no-repeat;
	width:100%;
	height:350px;

}

h2{
    color: white;
    font-size:40px;
    width: 80%;
    padding-right:10px;
    padding-left: 10px;
    margin-left:20%;
	margin-top:30px;
    line-height:50px;

}




/*ロゴサイズ、位置*/
img{
	margin-left:-5%;
	width:20%;

}





/*よくある質問折り畳み表示*/
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
	width:80%;
	margin-left:10%;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}





body {
    background: white;
    color: #333333;
}




/*ハンバーガーアイコン*/
.btn-burger {
    cursor: pointer;
    display: block;
    width: 56px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 10px;
}

/*ハンバーガーアイコンを作る三本線*/
.icon, .icon:before, .icon:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px; /*線の太さ*/
    width: 35px; /*線の長さ*/
    background-color:white;
    border-radius: 2px;
    display: block;
    content: '';
    cursor: pointer;
    margin: auto;
}

/*三本線の間隔*/
.icon:before {
  top: 20px;
}
.icon:after {
  top: -20px;
}

/*チェックボックス非表示*/
.nav-toggle {
    display: none;
}

/*アイコンをクリックしたら*/
.nav-toggle:checked ~ .btn-burger .icon {
    background: transparent;
}
.nav-toggle:checked ~ .btn-burger .icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.nav-toggle:checked ~ .btn-burger .icon:after {
    transform: rotate(45deg);
    top: 0;
}

.icon,
.icon:before,
.icon:after {
    transition: all .8s;
}


/*中身*/
.nav {
	    background-color:#f7f6f1;
	    width:100%;
	    float: none;
	    margin-top:-10%;

	    

    
}
.nav-list a {
	    display: block;
	    text-decoration: none;
	    color: black;
	    float: none;
	    font-size:20px;



}

.nav-list {
	    list-style: none;
	    display: none;
	    margin-top:10px;
	    padding: 10px 10px;
	    float: none;

}

.nav-list li {

float: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  list-style: none;
margin-top:3px;


}

.nav-toggle:checked ~ .nav .nav-list {
    display: block;
float: none;

}
/*フッター関係*/
.footer{
	margin-top:10%;
	background:#28A6D1;
	width:100%;
}
.footer_font{
	margin-left:35%;
	font-size:15px;
	color:white;
}
.footer_font a{
		color:white;
		margin:5%;



}
/*フッターロゴ*/
.foot{
	margin-top:1%;
	width:12%;
	margin-right:20%;
	margin-left:-50%;
}


}

/*Ipad pro,Ipad以外のスマホデバイス*/
@media screen and (max-width:700px) {


.main-visual {

  background: url('./img/header.jpg')  cover no-repeat;
	width:100%;
	height:350px;

}
/*見出し*/
h2{
    color: white;
    font-size:30px;
    width: 80%;
    padding-right:10px;
    padding-left: 10px;
    margin-left:5%;
    line-height:50px;

}
h3{
	font-size:20px;
	text-align: center;
	font-weight: bolder;

}

h4{
	color:#D2691E;
	font-size:30px;
	text-align: center;
	font-weight: bolder;

}
h5{
	font-size:13px;
	text-align: center;
	font-weight: bolder;

}
h6{
	font-size:30px;
	text-align: center;
	font-weight: bolder;

}
h7{
	font-size:13px;
	text-align: center;
	font-weight: bolder;

}
/*サブタイトル*/
.sub-tittle{

	width:100%;
	height:10%;
	font-size:15px;
	text-align: center;
	background:#28A6D1;
	color:white;

}
.sub{

	font-size:15px;
	text-align: center;

}
/*課題解決*/
.problem{
	margin-top:20%;
	width:100%;
	height:20%;

}




.imgsize{
	margin-left:0;
	height:200px;
	width:100px;
}





/*ロゴのサイズ*/
img{
	margin-left:-5%;
	width:30%;

}

/*最新案件画像等 */
.contents {
			margin-top:15%;
			margin-left:10%;
			padding:20px;
			height:80%;
    			width: 80%;
 		 	overflow: hidden;
			background:#112B4C;

	
}
.contents p{
	font-size:20px;
	color:#ADBA69;
	text-align:center;
	font-weight: bolder;


}
.contents div.p{
	font-size:10px;
	color:white;
	text-align:right;
	font-weight: bolder;


}
.contents a{
	text-decoration: none;


}


/*フッター関係*/
.footer{
	margin-top:10%;
	background:white;
	width:100%;
	height:30%;
	padding:30px;
}
.footer_font{
	margin-left:12%;
	font-size:1rem;
	color:black;
	margin-bottom:5%;
}








body {
    background: white;
    color: #333333;
}





/*ハンバーガーアイコン*/
.btn-burger {
    cursor: pointer;
    display: block;
    width: 56px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 10px;
}

/*ハンバーガーアイコンを作る三本線*/
.icon, .icon:before, .icon:after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px; /*線の太さ*/
    width: 35px; /*線の長さ*/
    background-color:white;
    border-radius: 2px;
    display: block;
    content: '';
    cursor: pointer;
    margin: auto;
}

/*三本線の間隔*/
.icon:before {
  top: 20px;
}
.icon:after {
  top: -20px;
}

/*チェックボックス非表示*/
.nav-toggle {
    display: none;
}

/*アイコンをクリックしたら*/
.nav-toggle:checked ~ .btn-burger .icon {
    background: transparent;
}
.nav-toggle:checked ~ .btn-burger .icon:before {
    transform: rotate(-45deg);
    top: 0;
}
.nav-toggle:checked ~ .btn-burger .icon:after {
    transform: rotate(45deg);
    top: 0;
}

.icon,
.icon:before,
.icon:after {
    transition: all .8s;
}


/*中身*/
.nav {
    background-color:#f7f6f1;
    width:100%;
float: none;
margin-top:-26%;

    
}
.nav-list a {
    display: block;
    text-decoration: none;
    color: black;
float: none;


}

.nav-list {
    list-style: none;
    display: none;
    margin-top:10px;
padding: 10px 10px;
float: none;

}

.nav-list li {

float: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  list-style: none;
margin-top:3px;

}

.nav-toggle:checked ~ .nav .nav-list {
    display: block;
float: none;

}

/*問題解決*/
 main div.animal {
    width: calc(70% - 20px);
    margin-left:20%;
  }
main div.animal div.heading
{
	margin-top:5%;
	font-size:20px;
	text-align: center;

}

/*問題解決4つの場合*/
 main div.animal1 {
    width: calc(70% - 10px);
    margin-left:20%;

  }
main div.animal1 div.circle
{
	margin-top:5%;
	font-size:20px;
	text-align: center;

}
/*問題解決6つの場合*/
main1 {
	  display:none;
}
/*画像*/
.cont{
	text-align: center;
	margin-top:2%;
	  display:block;

}
.contimg{
	margin-left:0%;
	width:80%;

}


/*よくある質問*/
.question{
	margin-top:15%;
	font-size:20px;
	text-align: center;
	font-weight: bolder;

}
main3 {
  display: flex;
  flex-wrap: wrap;
  padding:30px;

}
main3 div.animal3 {
  width: calc(100% - 10px);
  margin: 5px;
}
/*よくある質問折り畳み表示*/
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
	width:80%;
	margin-left:10%;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}
/*フッター関係*/
.footer{
	margin-top:10%;
	background:#28A6D1;
	width:100%;
	padding:-10%;
}
.footer_font{
	margin-left:30%;
	font-size:10px;
	color:white;
}
.footer_font a{
		color:white;
		margin:1%;
		


}
/*フッターロゴ*/
.foot{
	margin-top:1%;
	width:10%;
	margin-right:20%;
	margin-left:-50%;
}

.features{
	width:40%;
	height:40%;
	margin-left:-20%;

}
}