@charset "UTF-8";

.midashi{
	font-size: 6rem;
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	margin-top: 1em;
}
.midashi small{
	display: block;
	font-size: 3rem;
}
h1{
	text-align: center;
	margin-top: 50px;
}
.tukru{
	margin: 50px 0 20px;
	background-color: #219F2C;
	color: #FFF;
	padding: 20px;
}
.eco{
	background-color: #219F2C;
}
.hashin{
	background-color: #E8456D;
}
.kyosei{
	background-color: #036EB8;
}
.katuyaku{
	background-color: #00B5C3;
}
.tukru h3{
	background-color: #008F72;
	margin: 0;
	padding: 10px;
}
.eco h3{
	background-color: #008F72;
}
.hashin h3{
	background-color: #C51534;
}
.kyosei h3{
	background-color: #00307F;
}
.katuyaku h3{
	background-color: #308097;
}
.tukru2 h3{
	color:#fff;
	background-color: #008F72;
	margin: 0;
	padding: 10px;
}
.eco2 h3{
	background-color: #008F72;
}
.hashin2 h3{
	background-color: #C51534;
}
.kyosei2 h3{
	background-color: #00307F;
}
.katuyaku2 h3{
	background-color: #308097;
}
.tukru h2{
	font-size: 4rem;
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	border-bottom: solid 1px #FFF;
	margin: 0;
	padding-bottom: 10px;
}
.tukru .flex{
	display: flex;
	justify-content: space-between;
	align-items: end;
}
.tukru ul{
	margin: 10px 0;
	padding: 0 0 0 1em;
}

.tukru .flex > div:first-child{
	width: %;
}
.tukru .flex > div:last-child{
	width: calc(40% - 20px);
}
.tukru .flex p{
	margin-top: 10px;
}
.tukru2 .flex{
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.tukru2 ul{
	margin: 10px 0;
	padding: 0 0 0 2em;
}

.tukru2 .flex > div:first-child{
	width: 59%;
}
.tukru2 .flex > div:last-child{
	width: calc(41% - 15px);
}
.tukru2 .flex p{
	margin-top: 10px;
}

.demos h2{
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-size: 3.5rem;
	padding-bottom: 10px;
	border-bottom: solid 2px #EA524A;
	margin-top: 50px;
	color: #EA524A;
}
.demos h2.color_blue {
	border-bottom: solid 2px #44c6e6;
	color: #44c6e6;
}
.demosport{
	margin: 50px 0;
}
.demosport h3{
	background-color: #EA524A;
	color: #FFF;
	padding: 10px;
	font-size: 2.5rem;
}
.demosport .photo{
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-top: 10px;
}
.demosport .photo > div:first-child{
	width: calc(70% - 20px);
}
.demosport .photo > div:last-child{
	width: 30%;
}
.demosport .photo > div:last-child .fukidashi {
	display:block;
	margin:0 0 10px;
	padding:15px;
	border-radius:20px;
	background-color:#f4b844;
	position: relative;
	text-align:left;
}
.demosport .photo > div:last-child .fukidashi:after {
	content:"";
	position: absolute;
	right: 45%;
	bottom:-26px;
	width:10px;
	border: 12px solid transparent;
	border-top: 14px solid #f4b844;
}

.demostaff{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30px 0;
	background-color:#f9dfde;
	padding:25px;
	border-radius:30px;
}
.demostaff .photo{
	width: calc(30% - 20px);
	text-align:center;
}
.demostaff .comment{
	width: 70%;
}

.omotenasi h3{
	background-color: #ED6A00;
}
.pickup h3{
	font-size: 2.5rem;
	margin-top: 0;
}
.pickupbox{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
.pickupbox > div:first-child{
	width: 60%;
}
.pickupbox .photo{
	display: flex;
	justify-content: space-between;
	align-items: end;
	width: calc(40% - 20px);
	border: solid 1px #D8EAF4;
	padding: 10px;
	box-sizing: border-box;
	background-color:#D8EAF4;
}
.pickupbox .photo > div{
	width: calc(40% - 10px);
}
.pickupbox .photo > p{
	width: 60%;
}

/*スマホ*/
@media (max-width: 730px) or ((min-width: 767px) and (max-width: 1100px)) {

	.midashi{
		font-size:3rem;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		margin-top: 1em;
	}
	.midashi small{
		display: block;
		font-size: 1.5rem;
	}
	h1{
		text-align: center;
		margin-top: 50px;
	}


	.tukru{
		margin: 50px 0 20px;
		background-color: #219F2C;
		color: #FFF;
		padding: 10px;
	}
	.eco{
		background-color: #219F2C;
	}
	.hashin{
		background-color: #E8456D;
	}
	.kyosei{
		background-color: #036EB8;
	}
	.katuyaku{
		background-color: #00B5C3;
	}
	.tukru h3{
		background-color: #008F72;
		margin: 0;
		padding: 10px;
		font-size: 1.3rem;
	}
	.eco h3{
		background-color: #008F72;
	}
	.hashin h3{
		background-color: #C51534;
	}
	.kyosei h3{
		background-color: #00307F;
	}
	.katuyaku h3{
		background-color: #308097;
	}
	.tukru h2{
		font-size: 2.5rem;
		font-family: "Noto Sans JP", serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		border-bottom: solid 1px #FFF;
		margin: 0;
		padding-bottom: 10px;
	}
	.tukru .flex{
		display: block;
		justify-content: space-between;
		align-items: end;
	}
	.tukru ul{
		margin: 10px 0;
		padding: 0 0 0 2em;
	}

	.tukru .flex > div:first-child{
		width: 100%;
		margin-bottom: 10px;

	}
	.tukru .flex > div:last-child{
		width: 65%;
		margin: 0 0 0 auto;
	}
	.tukru .flex p{
		margin-top: 10px;
	}
	.tukru2 .flex{
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin: 0px 0;
	}
	.tukru2 ul{
		margin: 0px 0;
		padding: 0 0 0 2em;
	}
	.tukru2 .flex > div:first-child{
		width: 100%;
	}
	.tukru2 .flex > div:last-child{
		display:none;;
	}
	.tukru2 .flex p{
		display:none;;
	}

	.demos{
			margin: 50px 0 10px;
	}

	.demos h2{
			font-family: "Noto Sans JP", serif;
			font-optical-sizing: auto;
			font-weight: 700;
			font-style: normal;
			font-size: 2.2rem;
			padding-bottom: 10px;
			border-bottom: solid 2px #000;
			margin-top: 0;
	}
	.demosport{
		margin: 20px 0 50px;
	}
	.demosport h3{
		background-color: #EA524A;
		color: #FFF;
		padding: 10px;
		font-size: 1.6rem;
	}
	.demosport .photo{
		display: block;
		justify-content: space-between;
		align-items: end;
		margin-top: 10px;
	}
	.demosport .photo > div:first-child{
		width: auto;
	}
	.demosport .photo > div:last-child{
		width: auto;
		margin-top: 10px;
	}
	.demosport .photo > div:last-child .fukidashi {
		display:block;
		float:left;
		width:45%;
		margin:0 0 10px;
		padding:15px;
		border-radius:20px;
		background-color:#f4b844;
		position: relative;
		text-align:left;
	}
	.demosport .photo > div:last-child .fukidashi:after {
		content:"";
		position: absolute;
		left: none;
		right:-26px;
		bottom:50%;
		width:10px;
		border: 12px solid transparent;
		border-left: 14px solid #f4b844;
	}
	.hitokoto img{
		width: calc(55% - 10px);
		float: right;
	}
	.omotenasi h3{
		background-color: #ED6A00;
	}
	.photo::after{
		content: "";
		display: block;
		clear: both;
	}

	.demostaff{
		display: block;
		justify-content: space-between;
		align-items: flex-start;
		margin: 30px 0;
		background-color:#f9dfde;
		padding:20px;
		border-radius:30px;
	}
	.demostaff .photo{
		width: 100%;
		text-align:center;
		margin-bottom:10px;
	}
	.demostaff .comment{
		width: 100%;
	}

	.pickup h3{
		font-size: 2rem;
		margin-top: 0;
	}
	.pickupbox{
		display: block;
		justify-content: space-between;
		margin-bottom: 50px;
	}
	.pickupbox > div:first-child{
		width: auto;
	}
	.pickupbox .photo{
		margin-top: 10px;
		display: block;
		width: 100%;
		border: solid 1px #D8EAF4;
		padding: 10px;
		box-sizing: border-box;
		background-color:#D8EAF4;
	}
	.pickupbox .photo > div{
		display: block;
		width: 100%;
	}
	.pickupbox .photo > p{
		display: block;
		width: 100%;
	}


}


/*追加*/
#body_wrap main{
	background-image: url("../images/back/back2.webp");
	background-size: contain;
	background-repeat: repeat-y;
	background-position: center top;
}