@charset "utf-8";

body div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    display: block;
}
 html{
  font-size: 16px;
 }
body{
    width: 100%;
    margin: 0;
    font-size: 100%;
    font-family: "ヒラギノ角ゴシック" "Noto sans cjk jp","游明朝";
    font-weight: 500;
    background-color: #88AF8B;
	background-image:
	 linear-gradient(-90deg, #F7F5E1 50%, transparent 50%);
	background-size: 200px 200px;
}
#header{
    position: relative;
}

.header-main{
    width: 100%;
    height: auto;
}
.header-title{
    z-index: 2;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
}
.wrapper{
    width: 1024px;
    margin: 0 auto;
}
#about{
    margin: 40px 0;
}
.about-txt-ja{
    border-bottom: rgb(152, 152, 152) 1px solid;
    padding-bottom: 30px;
}
.about-txt-en{
    padding-top: 30px;
}
.section-content{
    margin: 60px auto;
    
    background-color: #FFFFFF;
    padding: 80px;
    border-radius: 10px;
}
.section-content h1{
    text-align: center;
    margin-bottom: 50px;
}
.section-content h2{
    text-align: center;
}
.about-txt{
  text-align: center;
}
/* #contact{} */
form{
	width:400px;
	margin:0 auto;
}
.inputs{
	position: relative;
	width: 100%;
	margin: 20px 3%;
	overflow: hidden;
}
.input_form{
	float: left;
	width: 100%;
}
input[type="text"],
input[type="number"],
input[type="mail"],
textarea {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	margin: 8px 0;
	transition: 0.3s;
	outline: none;
	border: solid 1px #e0e0e0;
	border-radius:5px;
	padding:8px;
	font-size: 15px;
}
textarea {
	height: 200px;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="mail"]:focus,
textarea:focus {
	border-color: #88AF8B;
}
input[type="text"],
input[type="number"],
input[type="mail"],
textarea {
	padding-left: 40px;
}
i {
	position: absolute;
	top: 12px;
	left: 0;
	padding: 9px 8px;
	transition: 0.3s;
	color: #aaaaaa;
}
input[type="text"]:focus + i,
input[type="number"]:focus + i,
input[type="mail"]:focus + i
textarea:focus + i {
	color: #88AF8B;
}
.btn-area{
	text-align: center;
}
input[type="submit"]{
	background: #88AF8B;
    
	border: none;
	color: #fff;
	font-size:15px;
	font-weight:bold;
	padding: 10px 20px;
	margin: 0 10px;
	border-radius: 10px;
}
input[type="submit"]:hover{
    background-color: #8AC98F;
}
input[type="reset"]{
	background: #aaa;
	border: none;
	color: #fff;
	font-size:15px;
	font-weight:bold;
	padding: 10px 20px;
	margin: 0 10px;
	border-radius: 10px;
}
.from-txt{
    text-align: center;
    margin-top: 30px;
}
#item{
    margin: 40px 0; 
}
.item-title{
    font-size: 3.2rem;
}
.item-content{
    margin: 80px 0;
}
.item-content h3{
    margin-bottom: 30px;
    font-size: 2rem;
    display: inline-block;
    background: #88AF8B;
    padding: 10px 30px;
    color: #FFFFFF;
    text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
    border-radius: 10px;
}
.section-content img{
    width: 100%;
}
#footer{
    padding: 20px 0;
    background-color: #FFFFFF
}
.footer-content{
    text-align: center;
    padding: 0 120px;
}
.footer-content img{
    width: 60%;
}

@media (max-width: 1024px){
    html{
        font-size: 14px;
    }
    .wrapper{
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
}
@media (max-width: 599px){
   body{
    background-color: #88AF8B;
	background-image:
	 linear-gradient(-90deg, #F7F5E1 50%, transparent 50%);
	background-size: 100px 100px;
   } 
   .br-pc{
       display: none;
   }
   .section-content h1 {
    padding-top: 20px;
    margin-bottom: 30px;
    font-size: 1.5rem;
    }
    .about-txt-ja,
    .about-txt-en{
        font-size: 0.8rem;
    }
   .section-content {
       padding:10px;
       margin: 30px 0;
   }
   .section-content h2{
       margin-top: 20px;
   }
   .about-txt{
       font-size: 0.9rem;
   }
   .item-content {
    margin: 40px 0;
    }
   .item-title {
    font-size: 1.8rem;
    }
    .item-content h3{
        font-size: 1.3rem;
        margin-bottom: 20px;
        padding: 10px 20px;
    }
    .item-content {
    margin: 40px 0;
}
    form {
        width: 100%;
    }
    .inputs {
        margin: 20px 0;
    }
    .footer-content {
        text-align: center;
        padding: 0 ;
    }
}