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

/*全体*/

section{
	margin-bottom: 3rem;
}


h1{
	margin-bottom: 1rem;
}

h2{
	font-size: 2rem;
	font-weight: 700;
	color: #0ea280;
	text-align: center;
	margin-bottom: 1.3rem;
	background: #ebf3d7;
	position: relative;
	padding: 7px 5px;
	height: 90px;
	display: flex;
	align-items: center;
}


h2 span{
	display: flex;
	margin: 0 auto;
	align-items: center;
}


h2 span:after{
 position: absolute;
  content: " ";
  border-bottom: solid 1.8px #00aa84;
  bottom: 8px;
  left:4%;
  width: 88%;
}

h2 span:before{
 position: absolute;
  content: " ";
  border-bottom: solid 1.8px #00aa84;
  top: 8px;
  left:8%; 
  width: 88%;
}

h2:before{
	content: "";
	width: 68px;
	border-top: 90px solid #00aa84;
	border-right: 48px solid transparent;
	height: 0;
	box-sizing: border-box;
	top:0;
	left: 0;
	position: absolute;
}


h2:after{
	content: "";
	width: 68px;
	border-bottom: 90px solid #00aa84;
	border-left: 48px solid transparent;
	height: 0;
	box-sizing: border-box;
	top:0;
	right: 0;
	position: absolute;
}

h2 br{
	display: none;
}


h3{
	background: #ecf4d8;
	font-size: 1.3rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	border-width: 0 3px;
	border-color: #00aa84;
	margin-bottom: 2rem;
}

h3 .s1{
	border-right: 8px double #00aa84;
	padding: 10px;
}

.inner{
	margin:0 20px;
}

/*クリックしたら下に沈むバナー*/
.banner-down {
	filter: drop-shadow(0px 5px 3px #aaaaaa);
	transition: .2s;
	margin-bottom: 2rem;
}

.banner-down:hover{
  filter: unset;
  transform: translateY(4px);
}


/*sectionクラス「.about-sail」==========================*/
.about-sail p:first-letter{
	font-weight: bold;
	font-size:1.6rem;
	color: #00aa84;
}


/*sectionクラス「.about-size」========================*/
.about-size h3{
	border-width: 3px 0;
	background: #fff;
	padding: 8px 6px;
	color: #00aa84;
	margin-bottom: 1rem;
	margin-top: 2rem;
}


.about-size p{
	margin-bottom: 1rem;
}

/*sectionクラス「.about-kiji」======================*/
.kiji-ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:14px 5px;
}

.kiji-ul li{
	width:48%;
}

.kiji-ul img{
	margin-bottom: 10px;
}

/*sectionクラス「.about-kigu」*/
.about-kigu h3{
	border-width: 3px 0;
	background: #fff;
	padding: 8px 6px;
	color: #00aa84;
	margin-bottom: 1rem;
	display: flex;
	gap:8px;
	align-items: center;
}

.about-kigu ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:18px 5px;
}

.about-kigu li{
	width: 47%;
}

/*sectionクラス「.about-setup」====================*/

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
 padding: 0 20px;
 margin-bottom: 10%;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}

/*「お問い合わせはこちらから」*/
.contact a{
	display: flex;
	align-items: center;
	gap:20px;
	font-size: 2.5rem;
	font-weight: bold;
	justify-content: center;
	background: #ed6e20;
	color: #fff;
	padding: 13px 3px;
	border-radius: 40px;
	border: 6px double #fff;
}

.contact div{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.5rem;
}


/*ウェブアイコン*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?fs3kpn');
  src:  url('fonts/icomoon.eot?fs3kpn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?fs3kpn') format('truetype'),
    url('fonts/icomoon.woff?fs3kpn') format('woff'),
    url('fonts/icomoon.svg?fs3kpn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mail4:before {
  content: "\ea86";
  margin-left:-5px;
}


@media screen and (max-width: 863px){
	h2 span:after{
  left:6.5%; 
  width: 83%;
}

h2 span:before{
  left:10.5%; 
  width: 83%;
}
	
}

@media screen and (max-width: 768px){
	
	h2{
		font-size: 2rem;
		background-size: 100% 70px;/*横が100%*/
	}
	
	.inner{
		margin:0 10px;
	}
}

@media screen and (max-width: 686px){
h2 span:after{
  left:8%; 
  width: 80%;
}

h2 span:before{
  left:12%; 
  width: 80%;
}
}

@media screen and (max-width: 670px){
	
h2{
	font-size: 1.5rem;
	
}
	
}

@media screen and (max-width: 605px){
	
h2:before{
	content: "";
	width: 55px;
	border-right: 42px solid transparent;
}


h2:after{
	content: "";
	width: 55px;
	border-left: 42px solid transparent;
}

/*「お問い合わせはこちらから」*/
.contact a{
	display: flex;
	align-items: center;
	gap:10px;
	font-size: 2rem;
	padding: 10px 3px;
}

.contact div{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.3rem;
}

}

@media screen and (max-width: 532px){
	h2{
		font-size: 1.3rem;
	}
}

@media screen and (max-width: 500px){
	
/*全体*/
	section{
	margin-bottom: 2rem;
}
	
.inner{
margin: 0 8px;	
}
	
 h2 span:after{
  left:9%; 
  width: 72%;
}

h2 span:before{
  left:18%; 
  width: 72%;
}

h2 br{
	display: block;
}
	
h3{
	font-size: 1.15rem;
}

/*sectionクラス「.about-kiji」======================*/
.kiji-ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap:16px 5px;
}

.kiji-ul li{
	width:100%;
}

.kiji-ul img{
	margin-bottom: 8px;
}
	
/*sectionクラス「.about-kigu」*/
.about-kigu ul{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	gap:18px 5px;
}

.about-kigu li{
	width: 100%;
}

	
/*sectionクラス「.about-setup」====================*/

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
 padding: 0px;
}
	
/*「お問い合わせはこちらから」*/
.contact a{
	display: flex;
	align-items: center;
	gap:10px;
	font-size: 1.7rem;
	padding: 10px 3px;
}

.contact div{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.1rem;
}

}