@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*
font-family: 'Noto Sans JP', sans-serif;
*/
body{
	text-align: center;
	/* font-size:62.5%; 10px */
 	  /*font-size:87.5%; 14px */
	 /*font-size:93.75%; 15px*/
	font-size:clamp(15px,2.5vw,130%);
	line-height:1.8;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
	}
body,html{
  width:100%;
  height: 100%;
}
:root{
  --mainColor:#4DAE41;
}

.inner{
  max-width: 1500px;
  margin:auto;
	padding:0 20px;
}

.mini{
  font-size:.8em;
  line-height: 1.3;
}

#main{
	position: relative;
	overflow: hidden;
}
.contents{
	background:white;
	padding:10px 0;
}
.addimage{
	height: 40vh;
}
.addimage .add{
	position: fixed;
	top:0;
	left:0;
	z-index: -1;
	width:100%;
	height: 100%;
}
.addimage .imgs {
	width:100%;
	height: 100%;
}
.addimage .imgs img{
	width:100%;
	height:100%;
	object-fit: cover;
}
h1{
	width:100%;
}
h1 img{
	width:100%;
}
h2{
	font-size:clamp(1.6em,3vw,2.5em);
	text-align: center;
	margin: 0 auto min(40px,4%) ;
	color:white;
	line-height: 1.6;
	color:var(--mainColor);
	font-weight: normal;
}

h3{
	font-size:clamp(1.4em,3vw,1.8em);
	text-align: left;
	margin:  auto;
	font-weight: normal;
	color:white;
	line-height: 1.6;
	color:var(--mainColor);
}
#intro {
	padding:min(80px,8%) 0;
}
#intro h2{
	font-size:clamp(30px,5vw,56px);
}
#intro h2 span{
	display: inline-block;
	width:min(195px,20vw);
}
#intro .intro_content{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
#intro .intro_content .photoarea{
	width:48%;
}
#intro .intro_content .textarea{
	width:min(600px,48%);
}
#intro .intro_content .textarea .txt{
	margin:min(80px,8%) 0;
}
#intro .intro_content .textarea h3{
	font-size:clamp(22px,4vw,40px);
	margin-bottom: min(40px,4%);
}
#intro .intro_content .textarea p{
	font-size:1.1em;
}
#making h3{
	margin:min(40px,4%) auto;
	text-align: center;
}
#making .read{
	width:min(75%,650px);
	margin:auto;
}
#making .making_area{
	background:url(../img/bg02.png) no-repeat left center ;
	background-size:contain;
	margin-top:min(80px,8%) ;
}
#making .making_area h3{
	text-align: left;
	width:min(450px,35%);
	margin:0 auto 0 0
}
#making .making_area .textarea{
	width:70%;
	margin:-13% 0 0 auto;
}
#making .making_area .elem{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin:5% 0;
}
#making .making_area .elem:nth-child(2n){
	flex-direction: row-reverse;
	justify-content: flex-end;
}
#making .making_area .elem:nth-child(2n) .txt p{
	text-align: right;
}
#making .making_area .elem:first-child .imgs{
	width:50%;
}
#making .making_area .imgs{
	width:45%;
}
#making .making_area .txt{
	width:48%;
	padding:0 4%;
}
#item {
	background:white;
	padding-top:min(80px,8%);
}
#item .item_area{
	background:url(../img/item_bg.jpg) no-repeat center center ;
	background-size:cover;
	padding:60px 30px;
}
#item .item_area .item_photo{
	width:min(450px,50vw);
	margin:auto;
}
.user_area {
	max-width:1200px;
	margin:min(150px,13%) auto;
}
.user_area .flex{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.user_area h4{
	font-size:1.2em;
	text-align: left;
	margin-bottom: 20px;
}
.user_area .flex .imgs{
	width:48%;
}
.user_area .flex .txt{
	width:max(400px,35%);
	padding-left:min(30px,4%);
}
/*====================================================================
   footer
/*==================================================================*/
#footer{
	position: relative;
	text-align: center;
	font-size:1rem;
	padding: 30px 30px;
	background:white;
}

#footer .btm_logo{
	width:clamp(200px,30vw,530px);
	margin:30px auto;
}
#footer p{
	text-align: center;
	margin:20px auto;
}