@charset "utf-8";

:root{
  --oh: 0;
}

.tb,
.sp {
	display: none;
}
.pc {
	display: block;
}
@media screen and (max-width: 1024px) {
	.pc,
	.sp {
		display: none;
	}
	.tb {
		display: block;
	}
}
@media screen and (max-width: 619px) {
	.pc,
	.tb {
		display: none;
	}
	.sp {
		display: block;
	}
}

/* top page(梅田css流用)
 * ========================================================================== */
body{
	position: relative;
	background: none;
    height: inherit;
    overflow-y: visible;
	font-family: 'Shippori Mincho', sans-serif;
}
body.loaded{
	background: none;
	height: inherit;
	overflow-y: visible;
}
.loading_wrap{
	position: fixed;
	top: 0;
	left: 0;
	background-color: #c0ac9b;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: var(--vh);
	height: 100%;
	z-index: 1000;
	pointer-events: none;
}
.load_catch_wrap{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.load_catch_words{
	position: relative;
	height: 0;
	overflow: hidden;
}
.load_catch_words > .load_catch_word{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform-origin: bottom;
	opacity: 0;
}
.load_catch_text{
	position: relative;
	font-size: 0;
	opacity: 0;
}
.loading_ster_wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--vh);
	z-index: 1001;
	pointer-events: none;
}
.meritItems .meritItem a .merit-title {
	left: 7.5%;
	top: 7.5%;
	font-size: min(calc(40/1280*100vw), 40px);
}
.meritItems .meritItem a .merit-text {
	left: 7.5%;
	bottom: 17.5%;
	font-size: min(calc(44/1280*100vw), 44px);
}
.meritItems .meritItem a .arrow {
	left: 7.5%;
	bottom: 5%;
    font-size: 13px;
	line-height: 1.5;
}
.meritItems .meritItem figure::before {
	top: 0;
	background: linear-gradient(to bottom,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.8) 100%);
}
.meritItem .caption {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #fff;
	z-index: 1;
	font-size: 12px;
}


@media screen and (max-width: 767px) {
	.meritItems .meritItem a .merit-title {
		font-size: calc(52/700*100vw);
	}
		.meritItems .meritItem a .merit-text {
		/*font-size: calc(60/700*100vw);*/
	}
	.meritItems .meritItem a .arrow {
		/*font-size: calc(44/700*100vw);*/
	}
}

/* #information #info-column .bnrArea {
  margin-top: 10px;
  height: fit-content;
} */


#actionproposal p {
font-size: min(4.8vw, 30px);
    line-height: 2;
}


.info_esalon_wrap {
    margin-bottom: 20px;
    margin-top: 20px;
}


.infor_wrap{
	background-color: #E6E9EB;
	position: relative;
	padding: 0.01% 0;
	z-index: 1;
}
.infor_wrap .tel-link {
	background-color: #fff;
	border: none;
}
.infor_wrap .attent{
	background-color: #fff;
  width: 100%;
  max-width: 1360px;
	padding: 20px;
	margin: 60px auto;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
	box-sizing: border-box;
}
a.cvBtn.reqBtn {
	background: #23b3e0 !important;
}


@media screen and (max-width: 619px) {
	.loading_wrap{
		background-image: url("../img/top/kv_bg_sp.jpg");
	}
	.load_catch_words{
		width: 77.333%;
		padding-top: 20.267%;
		margin-bottom: 8%;
	}
	.load_catch_text{
		width: 51.467%;
	}
	.load_catch_logo{
		width: 59.733%;
	}
}
@media screen and (min-width: 620px) {
	.loading_wrap{
		background-image: url("../img/top/kv_bg_tb.jpg");
	}
	.load_catch_words{
		width: 56.641%;
		padding-top: 14.844%;
		margin-bottom: 5.859%;
	}
	.load_catch_text{
		width: 37.695%;
	}
	.load_catch_logo{
		width: 44.141%;
	}
}
@media screen and (min-width: 1025px) {
	.loading_wrap{
		background-image: url("../img/top/kv_bg_pc.jpg");
	}
	.load_catch_words{
		width: 580px;
		padding-top: 152px;
		margin-bottom: 60px;
	}
	.load_catch_text{
		width: 386px;
	}
	.load_catch_logo{
		width: 406px;
	}
}

header{ opacity: 1; }

/**
/* Mainvisual
 * ========================================================================== */
/*↓↓↓変更不可*/
#mainvisual { position:relative; width: 100%; overflow: hidden;}
@media screen and (max-width:1200px) {
	#mainvisual { overflow: initial; margin-bottom: 93px!important;}
}
/*↑↑↑変更不可*/

.mainvisual_catch{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	filter: drop-shadow(0 0 0.625rem rgba(75,75,75,.8));
}
.mainvisual_catch .catch_txt{
	font-family: "Ryumin Regular KL";
	color: #fff;
	line-height: 1;
	filter: drop-shadow(0 0 0.3125rem rgba(75,75,75,1));
}
.mainvisual_img {
  position: absolute;
	top: 0;
	left: 0;
	display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
	z-index: -1;
}
.mainvisual_img > picture{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
.mov_wrap .vm {
  position: absolute;
	top: 0;
	left: 0;
	display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
	z-index: 1;
}
.mov_wrap iframe,
.mov_wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
	width: 177.778vh;
  height: 56.25vw;
  min-height: 100%;
  min-width: 100%;
  min-height: 110%;
  min-width: 110%;
  transform: translate(-50%, -50%);
	pointer-events: none;
}
.mov_wrap .sound {
  position: absolute;
	bottom: 0;
	left: 0;
	display: block;
  height: 0;
	z-index: 90;
}
.mov_wrap .sound > span {
  position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 100%;
  height: 100%;
}
.mov_wrap .sound .on {
}
.mov_wrap .sound .off {
}
.important-info {
	padding: 18px;
	border: solid 1px #999;
	background-color: #fff;
	text-align: center;
	line-height: 1.5;
	font-size: 14px;
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media screen and (max-width: 619px) {
	#mainvisual {
		width: 100vw;
		height: 100vw;
	}
	.mainvisual_catch{
		width: 78.667%;
		margin-bottom: 5.333%;
	}
	.mainvisual_catch .catch_wh{
		margin-bottom: 1.695%;
	}
	.mainvisual_catch .catch_txt{
		font-size: 4vw;
	}
	.mainvisual_img > picture{
	aspect-ratio: 150	/	227;
	}

.mov_wrap video {
width: 100%;
height: 100vw;
  min-height: inherit;
  min-width: inherit;
}


	.mov_wrap iframe{
		width: 115vh;
		height: 100vw;
		min-height: 100%;
		min-width: 100%;
	}
	.mov_wrap .sound {
		width: 5.333%;
		padding-bottom: 5.333%;
		margin: 4%;
	}
}
@media screen and (min-width: 620px) {
	#mainvisual {
		height:56.25vw;
	}
	.mainvisual_catch{
		width: 600px;
		margin-bottom: 50px;
	}
	.mainvisual_catch .catch_wh{
		margin-bottom: 20px;
	}
	.mainvisual_catch .catch_txt{
		font-size: 28px;
	}
	.mainvisual_img > picture{
		aspect-ratio: 16 / 8;
	}
	.mov_wrap .sound {
		width: 24px;
		padding-bottom: 24px;
		margin: 20px;
	}
}
@media screen and (min-width: 1025px) {

#mainvisual {
	height: 100vh;
}

.mov_wrap {
background: #000;
	height: 100%;
}
.mov_wrap img {
	width: 100%;
	height: 100%;
	    object-fit: cover;
}

	.mainvisual_catch{
		margin-bottom: 40px;
	}
	.mainvisual_img > picture{
		width: 100%;
	}
}
@media screen and (max-width: 1366px) {
	.infor_wrap .attent{
		width: calc(100% - 40px);
		padding: 20px;
		margin: 40px auto;
	}
}
@media screen and (max-width: 619px) {

.mov_wrap {
width: 100%;
	height: auto;
}


	.infor_wrap .attent{
		padding: 20px;
		margin: 60px auto;
		font-size: 2.604vw;
		text-align: left;
	}
	.infor_wrap .attent span{
		display: inline-block;
		width: 100%;
		text-align: center;
	}
}


/**
/* freeArea
 * ========================================================================== */
#freeArea {
    padding: 50px 0;
    max-width: none;
    background: #dbdbdb;
    text-align: center;
}

/* @media
 * ========================================================================== */
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 619px) {}
@media screen and (max-width: 320px) {}

@media screen and (max-width: 1024px) {
  /* #information #info-column .bnrArea {
    margin-top: initial; height: fit-content;
	} */
	#information #info-column {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 619px) {
  #information #info-column {
    margin-bottom: 20px;
  }
  /* #information #info-column .bnrArea { margin-top: 1vw; height: auto;} */
}

/* campaign & topics */
#topics figure .caption {
	position: absolute;
	right: 4px;
	bottom: 0px;
	line-height: 1;
	font-size: 12px;
	color: #fff;
}
@media screen and (max-width: 1024px) {
  #topics figure .caption {
		font-size: calc(( 12 / var(--media_tb)) * 100vw);
    right: 0;
    bottom: 0;
  }
}
@media screen and (max-width: 619px) {
  #topics figure .caption {
    font-size: calc(( 10 * 2 / var(--media_sp)) * 100vw);
    right: 0;
    bottom: 0;
  }
}
#topics.sectionItem .mousedragscrollable {
	cursor: initial;
}