@charset "UTF-8";
/*==========================================================
common
==========================================================*/
.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
}

/* mainvisual */
.mainvisual {
	position: relative;
}

.mainvisual h1 {
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* sliderarea */
.sliderarea .swiper-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sliderarea .swiper-slide {
	background: #fff;
}

.sliderarea .swiper-container {
	padding-bottom: 48px;
}

.sliderarea .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	margin: 0 8px !important;
}

.sliderarea .swiper-pagination-bullet {
	background-color: #e4e4e4;
	opacity: 1;
}

.sliderarea .swiper-pagination-bullet-active {
	background-color: #00623C;
}

/* brandstoryarea */
.brandstoryarea {
	text-align: center;
}

.brandstoryarea p {
	line-height: 2;
}

.brandstoryarea .btn {
	width: 150px;
	height: 50px;
	margin: 0 auto;
}

.brandstoryarea .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00623C;
	border: 1px solid #00623C;
	border-radius: 15px;
}

/* campaignarea */
.campaignarea {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.campaignarea .txtarea {
	position: absolute;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	text-align: center;
}

.campaignarea .txtarea h2,
.campaignarea .txtarea h3 {
	font-weight: 500;
}

.campaignarea .txtarea h2 span {
	color: #000000;
	font-size: 18px;
	margin-top: 10px;
}

.campaignarea .txtarea p {
	line-height: 2;
}

.campaignarea .btn {
	width: 150px;
	height: 50px;
	margin: 0 auto 96px;
}

.campaignarea .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00623C;
	border: 1px solid #00623C;
	border-radius: 15px;
}

/* coursearea */
.coursearea .txtarea {
	text-align: center;
}

.coursearea .txtarea h2 span {
	color: #000000;
	font-size: 18px;
	margin-top: 10px;
}

.coursearea .txtarea p {
	line-height: 2;
}

.coursearea .btn {
	width: 150px;
	height: 50px;
	margin: 0 auto;
}

.coursearea .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00623C;
	border: 1px solid #00623C;
	border-radius: 15px;
}

.coursearea .block {
	text-align: center;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* homecarearea */
.homecarearea {
	position: relative;
}

.homecarearea .txtarea {
	position: absolute;
	top: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	text-align: center;
}

.homecarearea .txtarea h2 {
	font-weight: 500;
}

.homecarearea .txtarea h2 span {
	color: #000000;
	font-size: 18px;
	margin-top: 10px;
}

.homecarearea .txtarea p {
	line-height: 2;
}

.homecarearea .btn {
	width: 150px;
	height: 50px;
	margin: 0 auto 96px;
}

.homecarearea .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00623C;
	border: 1px solid #00623C;
	border-radius: 15px;
}

/* salonarea */
.salonarea {
	position: relative;
}

.salonarea .txtarea {
	position: absolute;
	top: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	text-align: center;
}

.salonarea .txtarea h2 {
	font-weight: 500;
}

.salonarea .txtarea h2 span {
	color: #000000;
	font-size: 18px;
	margin-top: 10px;
}

.salonarea .txtarea p {
	line-height: 2;
	letter-spacing: 0.2em;
}

.salonarea .btn {
	width: 150px;
	height: 50px;
	margin: 0 auto 56px;
}

.salonarea .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #00623C;
	border: 1px solid #00623C;
	border-radius: 15px;
}

/* salondetailarea */
.salondetailarea ul {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.salondetailarea ul li {
	text-align: center;
	color: #030012;
	font-size: 16px;
}

.salondetailarea ul li p.place {
	font-size: 18px;
	margin-bottom: 54px;
}

.salondetailarea ul li .img {
	margin-bottom: 43px;
}

.salondetailarea ul li p.salonname {
	margin-bottom: 40px;
	height: 56px;
}

.salondetailarea ul li p.tel {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 40px;
	letter-spacing: 0.2em;
}

.salondetailarea ul li .btn {
	width: 159px;
	height: 56px;
	margin: 0 auto;
}

.salondetailarea ul li .btn a {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 15px;
}

/* newsarea */
.newsarea h2 {
	font-weight: 500;
	text-align: center;
}

.newsarea .inner {
	border: 1px solid #00623C;
	padding: 20px;
	overflow-y: scroll;
}

.newsarea .inner .block {
	margin-bottom: 50px;
	padding-bottom: 50px;
	border-bottom: 1px solid rgba(0, 98, 60, 0.09);
}

.newsarea .inner .block:last-child {
	margin-bottom: 0;
	padding-bottom: 20px;
	border: none;
}

.newsarea .inner h3 {
	font-size: 24px;
	margin-bottom: 20px;
}

.newsarea .inner p {
	font-size: 16px;
	line-height: 2;
}

/*==========================================================
PC Layout
==========================================================*/
@media screen and (min-width: 1024px) {
	.mainvisual {
		margin: 0 50px 55px;
	}
	.mainvisual h1 {
		width: 943px;
	}
	/* brandstoryarea */
	.brandstoryarea {
		margin: 173px 0 140px;
	}
	.brandstoryarea h2 {
		font-size: 48px;
		margin-bottom: 112px;
	}
	.brandstoryarea p {
		font-size: 24px;
		letter-spacing: 0.2em;
	}
	.brandstoryarea .btn {
		margin-top: 145px;
	}
	/* campaignarea */
	.campaignarea {
		margin: 0 50px;
	}
	.campaignarea .txtarea {
		right: 40px;
		width: 359px;
	}
	.campaignarea .txtarea h2 {
		font-size: 40px;
		margin-top: 70px;
		margin-bottom: 60px;
	}
	.campaignarea .txtarea h2 span {
		display: block;
	}
	.campaignarea .txtarea h3 {
		font-size: 32px;
		margin-bottom: 20px;
	}
	.campaignarea .txtarea p {
		font-size: 20px;
		letter-spacing: 0.2em;
		margin-bottom: 50px;
	}
	.campaignarea .btn a {
		font-size: 16px;
	}
	/* coursearea */
	.coursearea {
		width: 1376px;
		margin: 229px auto 196px;
		display: flex;
		justify-content: center;
	}
	.coursearea .txtarea {
		width: 277px;
		margin: 0 50px;
		padding-left: 15px;
	}
	.coursearea .txtarea h2 {
		font-size: 40px;
		margin-bottom: 66px;
	}
	.coursearea .txtarea h2 span {
		display: block;
	}
	.coursearea .txtarea p {
		font-size: 20px;
		letter-spacing: 0.1em;
		margin-bottom: 72px;
	}
	.coursearea .btn {
		width: 150px;
		height: 50px;
		margin-bottom: 96px;
	}
	.coursearea .block {
		width: 300px;
		margin: 0 50px;
	}
	.coursearea .block .image {
		margin-bottom: 26px;
	}
	/* homecarearea */
	.homecarearea {
		margin: 0 50px;
	}
	.homecarearea .txtarea {
		width: 359px;
		right: 40px;
		transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.homecarearea .txtarea h2 {
		font-size: 40px;
		margin-top: 133px;
		margin-bottom: 40px;
	}
	.homecarearea .txtarea h2 span {
		display: block;
	}
	.homecarearea .txtarea p {
		font-size: 20px;
		letter-spacing: 0.2em;
		margin-bottom: 78px;
	}
	/* homecaredetailarea */
	.homecaredetailarea {
		margin: 130px 0 0;
	}
	.homecaredetailarea ul,
	.homecaredetailarea .swiper-wrapper {
		width: 997px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.homecaredetailarea ul li,
	.homecaredetailarea .swiper-slide {
		width: 141px;
		margin: 0 29px 140px;
		text-align: center;
	}
	.homecaredetailarea ul li .img,
	.homecaredetailarea .swiper-slide .img {
		width: 100%;
		margin: 0 auto 34px;
	}
	.homecaredetailarea ul li p,
	.homecaredetailarea .swiper-slide p {
		font-size: 16px;
		line-height: 2;
		font-weight: 700;
		font-family: 'Roboto', sans-serif;
		letter-spacing: 0.1em;
	}
	/* salonarea */
	.salonarea {
		margin: 0 50px;
	}
	.salonarea .txtarea {
		width: 359px;
		left: 40px;
		transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.salonarea .txtarea h2 {
		font-size: 40px;
		margin-top: 90px;
		margin-bottom: 110px;
	}
	.salonarea .txtarea h2 span {
		display: block;
	}
	.salonarea .txtarea p {
		font-size: 20px;
		margin-bottom: 118px;
	}
	/* salondetailarea */
	.salondetailarea {
		margin: 164px 0 0;
	}
	.salondetailarea ul {
		width: 1020px;
		justify-content: center;
	}
	.salondetailarea ul li {
		width: 240px;
		margin: 0 50px 105px;
	}
	.salondetailarea ul li p.salonname {
		font-size: 18px;
		line-height: 2;
		color: #00623C;
	}
	/* newsarea */
	.newsarea {
		width: 861px;
		margin: 123px auto 200px;
	}
	.newsarea h2 {
		font-size: 72px;
		margin-bottom: 113px;
	}
	.newsarea .inner {
		height: 427px;
	}
	.newsarea .inner h3 {
		line-height: 2;
	}
}

/*==========================================================
Tablet以下 Layout
==========================================================*/
@media screen and (max-width: 1023px) {
	.mainvisual h1 {
		width: 100%;
	}
	/* brandstoryarea */
	.brandstoryarea {
		margin: 132px 0 102px;
	}
	.brandstoryarea h2 {
		font-size: 36px;
		margin-bottom: 92px;
	}
	.brandstoryarea p {
		font-size: 18px;
	}
	.brandstoryarea .btn {
		margin-top: 110px;
	}
	.brandstoryarea .btn a {
		font-size: 16px;
	}
	/* campaignarea */
	.campaignarea .txtarea {
		width: 74.79%;
		/* width: 359px; */
	}
	.campaignarea .txtarea h2 {
		font-size: 30px;
		margin-top: 51px;
		margin-bottom: 86px;
	}
	.campaignarea .txtarea h2 span {
		display: none;
	}
	.campaignarea .txtarea h3 {
		font-size: 30px;
		margin-bottom: 32px;
	}
	.campaignarea .txtarea p {
		font-size: 18px;
		margin-bottom: 90px;
	}
	/* coursearea */
	.coursearea {
		margin: 179px auto 158px;
	}
	.coursearea .txtarea h2 {
		font-size: 30px;
		margin-bottom: 73px;
	}
	.coursearea .txtarea h2 span {
		display: none;
	}
	.coursearea .txtarea p {
		font-size: 18px;
		margin-bottom: 112px;
	}
	.coursearea .btn {
		margin-bottom: 133px;
	}
	.coursearea .block {
		width: 62.5%;
		margin: 0 auto 84px;
	}
	.coursearea .block .image {
		margin-bottom: 42px;
	}
	/* homecarearea */
	.homecarearea .txtarea {
		width: 74.79%;
		/* width: 359px; */
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}
	.homecarearea .txtarea h2 {
		font-size: 30px;
		margin-top: 133px;
		margin-bottom: 106px;
	}
	.homecarearea .txtarea h2 span {
		display: none;
	}
	.homecarearea .txtarea p {
		font-size: 18px;
		margin-bottom: 90px;
	}
	/* homecaredetailarea */
	.homecaredetailarea {
		margin: 100px 0 110px;
	}
	.homecaredetailarea .swiper-slide {
		text-align: center;
	}
	.homecaredetailarea .swiper-slide .img {
		width: 141px;
		margin: 0 auto 34px;
	}
	.homecaredetailarea .swiper-slide p {
		font-size: 16px;
		line-height: 2;
		font-family: 'Roboto', sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
	}
	/* salonarea */
	.salonarea .txtarea {
		width: 74.79%;
		/* width: 359px; */
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}
	.salonarea .txtarea h2 {
		font-size: 30px;
		margin-top: 133px;
		margin-bottom: 97px;
	}
	.salonarea .txtarea h2 span {
		display: none;
	}
	.salonarea .txtarea p {
		font-size: 18px;
		margin-bottom: 100px;
	}
	/* salondetailarea */
	.salondetailarea {
		margin: 152px 0 40px;
	}
	.salondetailarea ul {
		width: 76.458%;
		/* width: 400px; */
	}
	.salondetailarea ul li {
		width: 100%;
		margin: 0 0 64px;
		overflow-y: visible;
	}
	.salondetailarea ul li p.place {
		line-height: 1;
	}
	.salondetailarea ul li p.salonname {
		font-size: 18px;
		line-height: 1.6;
		letter-spacing: 0.2em;
	}
	/* newsarea */
	.newsarea {
		width: 90%;
		margin: 0 auto 100px;
	}
	.newsarea h2 {
		font-size: 40px;
		margin-bottom: 60px;
	}
	.newsarea .inner {
		height: 300px;
	}
	.newsarea .inner h3 {
		line-height: 1.5;
	}
}

/*==========================================================
Smartphone Layout
==========================================================*/
/*==========================================================
iPad Layout
==========================================================*/
/*# sourceMappingURL=top.css.map */

/*# sourceMappingURL=index.css.map */