/*==================== default setting ====================*/
body {
	font-family: 'Noto Sans JP', sans-serif;
}
section {
	padding : 5% 5%;
	box-sizing : border-box;
}
h2 {
	font-size : 2.2rem;
	font-weight : bold;
	width:40%;
	margin: auto;
	position: relative;
	padding: 1.5rem 1rem;
}	
h2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	content: '';
	background-size: 7px 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
p {
	font-size : 1.6rem;
}
iframe {
	width: 90%;
	aspect-ratio: 16/9;
}
/*==================== default setting(SP) ====================*/
@media screen and (max-width: 768px) {
	body {
		line-height: 1.5rem;
	}
	h2 {
		font-size : 1.5rem;
		font-weight : 900;
		width:80%;
		border-bottom: solid 1px #F799C7;
		position: relative;
	}
	h2:after {
		content: "";
		display: block;
		height: 1px;
		background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
		background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
	}
	p {
		font-size : 1rem;
		font-weight:bold;
	}
	.section {
		padding: 10vw;
	 }
}

/*==================== general ====================*/
.center {
	text-align : center;
}
.left {
	text-align : left;
}
.pt10 {
	padding-top : 10px;
}
.pt20 {
	padding-top : 20px;
}
.pt30 {
	padding-top : 30px;
}
.bold {
	font-weight : bold;
}
.underline {
	text-decoration : underline;
}
.wrapper {
	display : flex;
	justify-content : space-between;
	padding : 20px;
	align-items : center;
}
.img-wrapper {
	width : 50%;
	text-align : center;
}
.img-wrapper img{
	width: 75%; 
	height: auto;
}	
.text-wrapper {
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
}
.text{
	text-align: center;
	width: 80%; 
	margin: 0 auto; 
}
.container {
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
}
.container img {
	margin-bottom : 20px;
	width : 50%;
	text-align : center;
}

/*==================== general(SP) ====================*/
@media screen and (max-width: 768px) {
	.wrapper {
		flex-direction : column;
		align-items : center;
		text-align : center;
	}
	.img-wrapper {
		width : 100%;
		padding-left : 0;
	}
	.text-wrapper {
		width: 100%;
		max-width: none;
		margin-top: 20px;
	}
	.text{
		text-align: left;
		width: 80%; 
		margin: 0 auto; 
	}
	.container img {
		margin-bottom : 20px;
		width : 100%;
		text-align : center;
	}
}
/*==================== section1 ====================*/
.section1 {
	background-color : #FFFCFB;
	text-align : center;
}
/*==================== section2 ====================*/
.section2 {
	background-color : #F6F7F8;
	text-align : center;
}
/*==================== section3 ====================*/	
.section3 {
	background-color : #FFFCFB;
	text-align: center;
}
/*==================== section4 ====================*/	
.section4 {
	background-color : #F4F2F2;
}
/*==================== section5 ====================*/	
.section5 {
	background-color : #F2F6FC;
}
/*==================== section6 ====================*/	
.section6 {
	background-color : #FEF8FB;
}
/*==================== section7 ====================*/	
.section7 {
	background-color : #FFFFFF;
}
.info p{
	font-size:0.8rem;
	line-height:1rem;
}
/*==================== footer ====================*/
footer p{
	font-size: 0.8rem;
	line-height:1rem;
}


/*==================== side banner(SP) ====================*/
/* phone */
@media screen and (max-width: 768px) {
	.right-fixed-banner {
		position: fixed;
		writing-mode: vertical-rl;
		top: 50px;
		bottom: 20%;
		right: 0;
		width: 5%;
		margin-right: 0%;
		text-align: center;
		line-height: 50px;
		font-size: 18px;
		opacity: 0.9;
		z-index:10000;
	}
	
	.banner-box {
		height: 150px;
		box-shadow: -3px 3px gray;
		opacity: 0.9;
	//	border: 1px solid #000;
	}

	.banner-box a{
		text-decoration: none;
		color:black;
	}

	.banner-box a:visited{
		text-decoration: none;
		color:black;
	}

	.banner-box a:hover{
		text-decoration: none;
		color:black;
	}

	
	#banner-1 {
		background: #B3E4CD;
	}
	
	#banner-1:before {
		content: url('../img/phone.png');
		margin-bottom:5px;
	}
}

/* mail */
@media screen and (max-width: 768px) {
	.right-fixed-banner2 {
		position: fixed;
		writing-mode: vertical-rl;
		top: 200px;
		bottom: 20%;
		right: 0;
		width: 5%;
		margin-right: 0%;
		text-align: center;
		line-height: 50px;
		font-size: 18px;
		opacity: 0.9;
		z-index:10000;
	}
	
	#banner-2 {
		background: #F4D7E6;
	}
	
	#banner-2:before {
		content: url('../img/mail.png');
		margin-bottom:5px;
	}
}

/*==================== footer(SP) ====================*/
@media screen and (max-width: 768px) {
	.info p{
		line-height:1.5rem;
	}
}
/*==================== scrollup ====================*/
.scroll_up {
	-webkit-transition: 1.5s ease-in-out;
	-moz-transition: 1.5s ease-in-out;
	-o-transition: 1.5s ease-in-out;
	transition: 1.5s ease-in-out;
	transform: translateX(30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.scroll_up.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
.scroll_up2 {
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	-o-transition: 2s ease-in-out;
	transition: 2s ease-in-out;
	transform: translateX(30px);
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}
.scroll_up2.on {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	transform: translateX(0);
}
 .fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeRightAnime{
	from {
	opacity: 0;
	transform: translateX(30px);
	}
	to {
	opacity: 1;
	transform: translateX(0);
	}
}