@charset "utf-8";
/* CSS Document */

.thp1 {
	background-color: #f4f7e6;
	font-size: large;
	}

.thp2 {
	padding: 1em 5%;
	margin: 2em 30% 2em 30%;
	background: #deecff;/*枠内の色*/
	border: solid 4px #6767c3;/*枠線の仕様*/
	border-radius: 20px;/*角の丸み*/
	text-align: left;
}

.thp3 {
	margin: 0 40% 0 40%;
	text-align: left;
}

.thp4 {
	background-color: #d0ddfa;
	font-size: large;
	margin: 0;
	padding: 0;
	}



.tx1 {
	margin-left: 35%;
	font-size: 1.3em;
}

.txtbox {
    display: inline-block;
    width: 260px;
	height: 35px;
    border: 1px solid #999;
    box-sizing: border-box;
    background: #f2f2f2;
	padding-left: 1em;
    margin-left: 35%; 
	font-size: 1.1em;
}




.sousin {
	font-size: 1.3em;
	padding: 0.2em 1em;
	margin-left: 38%;
}
.thp4 {
	width: 50%;
	margin-left: 23%;
	margin-bottom: 2em;
	padding: 0.5em;
	background: #6767c3;
	border: hidden;
	border-radius: 10px;
}


.cataimg {
	width: 25%;
	margin: 0.5em;
}
.catatex {
	margin-right: 0px;
	margin-top: 0px;
	font-size: xx-large;
	font-weight: bold;
	color: aliceblue;
}

.faq {
	width: 50%;
	margin: 0.5em;
}



.footer {
	width: 100%;
	height: 35px;
	color: black;
	background-color: #FFF;
    position: absolute;/*←絶対位置*/
    bottom: 0; /*下に固定*/}




/*　画面が980px以下は　*/
@media screen and (max-width: 980px) {	

.thp2 {
	padding: 1em 5%;
	margin: 2em 20% 2em 20%;
	background: #deecff;/*枠内の色*/
	border: solid 3px #6767c3;/*枠線の仕様*/
	border-radius: 18px;/*角の丸み*/
	text-align: left
}

.thp3 {
	margin: 0 30% 0 30%;
	text-align: left;
}


	
}

.sousin {
	background-color: lightgray;
	font-size: large;
	margin-top: 1em;
	margin-left: 35%;
	margin-bottom: 4em;
	border: #ED0E32;
	border-radius: 7px;
}
}

/*　画面が600px以下は　*/
@media screen and (max-width: 600px) {	

.thp2 {
	padding: 1em 5%;
	margin: 2em 5% 2em 5%;
	background: #deecff;/*枠内の色*/
	border: solid 3px #6767c3;/*枠線の仕様*/
	border-radius: 18px;/*角の丸み*/
	text-align: left
}

.thp3 {
	margin: 0 15% 0 15%;
	text-align: left;
}
	
.thp4 {
    display: none;
}	


.sousin {
	background-color: lightgray;
	font-size: large;
	margin-top: 1em;
	margin-left: 35%;
	margin-bottom: 4em;
	border: #ED0E32;
	border-radius: 7px;
}

	
	
	
}


/* ＝＝＝＝ END　＝＝＝＝  

481以上の時表示しない
@media screen and (min-width: 481px) {
  .mobile {
    display: none;
  }
}
480以下の時表示しない
@media screen and (max-width: 480px) {
  .pc {
    display: none;
  }
}

.main-visual {
  background-image: url('main-sp.jpg');
}

@media screen and (min-width: 481px) {
  .main-visual {
    background-image: url('main-pc.jpg');
  }
}


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

フレックス表示

html
<ul>
  <li>
    <img src="https://">
  </li>
    <li>
    <img src="https://">
  </li>
  <li>
    <img src="https://">
  </li>
  <li>
    <img src="https://">
  </li>
</ul>


css

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
}

@media screen and (min-width: 481px) {
  ul {
    display: flex;
    flex-wrap: wrap;
  }
  li {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
  }
}
@media screen and (min-width: 640px) {
  li {
    width: 33%;
  }
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝



*/




/* CSS Document */