@charset "utf-8";
@import url("nav.css");
@import url("nav_sp.css");
@import url("grid.css");
@import url("grid_sp.css");

/* CSS Document */
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #96a8a7;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
.formbtn{
  text-align: center;
	margin:5rem auto; 
}
/*サンクス ----------------------*/  
.catch3 p {
text-align: center;
margin: 1rem auto 10rem auto;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
	border-collapse:collapse;
  	border-bottom:0;

}
table.formTable th {
	border-bottom:0;
  	border-collapse:collapse;

}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size: 16px;
  transform: scale(0.8);
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
/*ヘッダー固定 高さ 色--------------------*/
header {
background-color:#b2a085;/*#fdfdfd*/
width:100%;
height:3.5em;
text-align:center;
position:fixed;
z-index:100;
padding: 1rem 0rem 0rem 0rem;   
}
header h1{
margin: 0.7rem 0rem 0rem 0rem;
font-family: "Comic Sans MS","serif";  
}
header a{
margin: -0.6rem auto 0rem auto;
color: #000;
font-size: 90%
}
  
/* -サンクス--------------- */  
.catch3 p {
text-align: left;
margin: 1rem auto 10rem auto;
width: 90%;  
}  
}

/* ---------------- */
img {
max-width:100%;
height: auto;/*高さ自動*/
}
a {
display:inline;
color: #666;
text-decoration-line: none;
}
a:hover { 
color: #999;
text-decoration-line: none;
}  
#top{
margin: 0rem auto 0rem auto;
}
/* パソコンで見たときは"pc"のclassが表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassが表示される */
@media only screen and (max-width: 768px) {
.pc { display: none !important;}
.sp { display: block !important;}  
}

/*ヘッダー固定 高さ 色--------------------*/
header {
background-color:#b2a085;/*#fdfdfd*/
width:100%;
height:3.5em;
text-align:center;
position:fixed;
z-index:100;
padding: 1rem 0rem 0rem 0rem;   
}
header h1{
margin: 0.7rem 0rem 0rem 0rem;
font-family: "Comic Sans MS","serif";  
}
header a{
margin: -0.6rem auto 0rem auto;
color: #000;
font-size: 90%
}


/*---mainimg---------------------*/

.mainimg img {
width: 100vw;
position: relative;
margin: 0rem;
}
.mainimg p {
position: absolute;
top: 250px;
left: 150px;
}

/*見出し----------------------*/
.midashi {
text-align: center;
margin: 10rem auto 0rem auto;  
}  
.midashi h5 {
text-align: center;    
margin: 10rem auto 0rem auto;
padding: 0rem auto 0rem auto;
} 
.midashi h3 {
text-align: center;    
margin: -1rem auto 2rem auto;
padding: 0rem auto 0rem auto;
}  
.midashi p {
text-align: center;    
margin: 3rem auto 0rem auto;
padding: 0rem 0rem 0rem 0rem;
}  
.midashi1 h3 {
  text-align: center;
  color: #fdfdfd;
  background-color: #b2a085;
  width: 96%;
  margin: 7rem auto 0rem auto;
  padding: 0.2rem 0 0rem 0;
}  
.midashi2 h3 {
text-align: center;    
margin: 5rem auto 3rem auto;  
}  
.midashi3 h3 {
text-align: center;    
margin: 5rem auto 3rem auto;  
}  
.midashi4 h3 {
text-align: left;    
margin: 3rem auto 0.5rem auto;  
}  


/*フッター
-------------------------------------*/
footer ul {
display: flex;  
color: #000;  
list-style: none;
text-align: center;
margin: auto;  
max-width: 800px;  
}
footer li {
display: flex;  
color: #000;  
list-style: none;
margin: 2rem auto 2rem auto; 
font-size: 90%;  
}


/*コピーライト
-------------------------------------*/
.copyright {
text-align: center;
padding: 1rem 0;
background-color: #b2a085;

}
.copyright a {
color: #fff;
text-decoration: none;
display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
position: fixed;
bottom: 15px;
right: 15px;
}
#pagetop a {
display: block;
background: #96a8a7;
color: #fff;
width: 50px;
padding: 10px 5px;
text-align: center;
}
#pagetop a:hover {
background: #a7b9b8;
}


#btn {
position: fixed;
bottom: 15px;
left: 10px;
}
#btn a {
display: block;
background: #6cd440;
color: #fff;
width: 100px;
border-radius: 6%;
padding: 5px 3px;
text-align: center;
}
#btn a:hover {
background: #08C201;
}



/*ヘッダー
-------------------------------------*/
.header-box {
display: none;
}	
.catch h4 {
margin: 0rem auto 0rem auto;  
padding: 0rem 0rem 0rem 0rem;
} 
.catch h3 {
margin: 0rem auto 0rem auto;
padding: 0rem 0rem 0rem 0rem;
}  
.catch p {
text-align: left;
text-align: justify;  
padding: 0rem 0rem 0rem 0rem;
}


@media only screen and (max-width: 768px) {

img {
max-width:100%;
height: auto;/*高さ自動*/
}
a {
display:inline;
color: #666;
text-decoration-line: none;
}
a:hover { 
color: #999;
text-decoration-line: none;
}  
.br-sp {
display: none;
}
/* パソコンで見たときは"pc"のclassが表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassが表示される */
.pc { display: none !important;}
.sp { display: block !important;}  

/*ヘッダー固定 高さ 色-----スマホ---------*/
header {
background-color:#b2a085;
width:100%;
height:3.5em;
text-align:center;
position:fixed;
z-index:100;
padding: 1rem 0rem 0rem 0rem;  
}
header h1{
margin: 0.65rem 0rem 0rem 0rem;
font-family: "Comic Sans MS","serif";
}
header a{
margin: -0.6rem auto 0rem auto;
color: #000;
font-size: 90%
}

.header {
display: flex;
flex-direction: row;
padding: 2rem 0 0 0;
}
.container img{
width: 80%;
height: auto;
margin: -3.5rem 1.5rem 0rem -2rem;
}
.header-box {
margin-left: auto;
margin-top: 8px;
}
.contact-button {
padding: 1rem;
border: 2px solid #000;
}
/*------------------------*/
.mainimg img {
width: 100vw;
position: relative;
margin: 0rem;
}
.mainimg p {
position: absolute;
top: 250px;
left: 150px;
}

/*見出し----------------------*/
.midashi {
text-align: center;
margin: 0rem auto 0rem auto;  
}  
.midashi h5 {
text-align: center;    
margin: 5rem auto 0rem auto;
padding: 0rem auto 0rem auto;
} 
.midashi h3 {
text-align: center;    
margin: 1rem auto 1rem auto;
padding: 0rem auto 0rem auto;
}  
.midashi p {
text-align: center;    
margin: 3rem auto 0rem auto;
padding: 0rem 0rem 0rem 0rem;
}  
.midashi4 h3 {
text-align: center;    
margin: 3rem auto 1rem auto;
padding: 0rem auto 0rem auto;
}   

.midashi1 h3 {
  text-align: center;
  color: #fdfdfd;
  background-color: #b2a085;
  width: 96%;
  margin: 7rem auto 0rem auto;
  padding: 0.2rem 0 0rem 0;
}  
.midashi2 h3 {
text-align: center;    
margin: 2rem auto 1rem auto;  
}  
.midashi3 h3 {
text-align: center;    
margin: 7rem auto 1rem auto;  
}  
/*サンクス ----------------------*/  
 #thanks p {
text-align: center;
text-align: justify;  
margin: 3rem auto 10rem auto;
width: 90%;
}
/*フッター----------------------*/
footer ul {
text-align: center;  
display: block;  
list-style: none;
margin: 0rem auto 0rem auto;    
}
footer li {
text-align: center;  
display: block;  
list-style: none;
margin: 1rem auto 2rem auto;    
}
/*お問い合わせ
-------------------------------------*/
.contact-box {
border: 1px solid #ccc;
text-align: center;
padding: 2rem 0;
}

/*コピーライト
-------------------------------------*/
.copyright {
text-align: center;
padding: 1rem 0;
background-color: #b2a085;

}
.copyright a {
color: #fff;
text-decoration: none;
display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
position: fixed;
bottom: 15px;
right: 15px;
}
#pagetop a {
display: block;
background: #96a8a7;
color: #fff;
width: 50px;
padding: 10px 5px;
text-align: center;
}
#pagetop a:hover {
background: #666;
}
#btn {
position: fixed;
bottom: 15px;
left: 10px;
}
#btn a {
display: block;
background: #6cd440;
color: #fff;
width: 100px;
border-radius: 6%;
padding: 5px 3px;
text-align: center;
}
#btn a:hover {
background: #08C201;
}
}