/* CSS Document: Home */
:root {
	--home-bottom: 3em;
	--home-sec-bottom: 7.5rem;
	--home-im-top: 140px;
}
@media only screen and (max-width:1000px) {
	:root {
		--home-bottom: 2em;
	}
}
@media only screen and (max-width:640px) {
	:root {
		--home-sec-bottom: 6em;
	}
}

/**/
.home-wide {
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width:1281px) {
	.home-wide {
		max-width: var(--bindwrap-width);
	}
}
@media only screen and (max-width:1280px) {
	.home-wide {
		padding: 0 var(--share-space);
	}
}
@media only screen and (max-width:640px) {
	.home-wide {
		padding: 0 var(--share-smp-padding);
	}
}

/*heading*/
.h-box {
	margin-bottom: var(--home-bottom);
}
.h-sub {
	font-family: var(--font-en);
	font-size: 1.25em;
	line-height: 1.4;
	color: var(--cl-hsub);
	margin-bottom: 0.8em;
}
.h-main {
	font-family: var(--font-m1);
	font-size: 2.815em;
	line-height: 1;
}
@media only screen and (max-width:640px) {
	.h-main {
		font-size: 2em;
	}
}

/*button*/
#main-content a.bt {
	color: var(--cl-pageink);
	background-color: #fff;
	border-color: var(--cl-line);
	background-image: var(--ui-bt-hover-icon);
}
#main-content a.bt:hover {
	color: #fff;
	background-color: var(--cl-pageink);
	border-color: var(--cl-pageink);
	background-image: var(--ui-bt-base-icon);
}

/**/
.t-sec,
.main-im {
	margin-bottom: var(--home-sec-bottom);
}
.t-sec.t-oshare-lash {
	margin-bottom: 0;
}
@media only screen and (min-width:1001px) {
	.main-im {
		margin-bottom: calc(var(--home-sec-bottom) + var(--home-im-top) - 40px);
	}
	.t-sec.t-salon {
		margin-bottom: 260px;
	}
}
@media only screen and (max-width:640px) {
	.main-im {
		margin-bottom:5em;
	}
}

/*Main vis*/
.top-vis {
	position: relative;
	font-size: 1.15vw;
	margin-top: 2em;
}
.top-vis .main-title::before {
	position: absolute;
	z-index: -1;
	content: "";
	display: inline-block;
	width: 16em;
	height: 16em;
	top: 0;
	left: 0;
	background-color: #ececec;
	border-radius: 0 0 100% 0;
}
.top-vis .pl {
	font-size: 2.375em;
	font-family: var(--font-m1);
}
	.top-vis .pl span {
		font-size: 1.5em;
		margin: 0 0.15em 0 0.3em;
	}
.top-vis .pt {
	font-size: 3.125em;
	font-family: var(--font-m1);
	line-height: 2;
}
.top-vis .brn {
	font-size: 5.25em;
	font-family: var(--font-brand);
	font-weight: 600;
	line-height: 1.4;
}
.top-vis .mm {
	display: inline-block;
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	letter-spacing: 0.1em;
	background-color: #888;
	padding: 0.4em 0.9em 0.5em;	
	margin-top: 0.3em;
}
.top-vis .t-scroll {
	display: inline-flex;
	align-items: center;
	margin-right: 0.5em;
	transform-origin: top left;
	transform: translate(30%,0) rotate(90deg);
}
.top-vis .scr-text {
	margin-right: 0.5em;
}
.top-vis .scr-line {
	position: relative;
}
.top-vis .scr-line,
.top-vis .scr-line::after {
	content: "";
	display: inline-block;
	width: 5em;
	height: 0.1em;
	background-color: var(--cl-pageink);
}
.top-vis .scr-line::after {
	position: absolute;
	z-index: -1;
	background-color: #fff;
	transition: all 0.4s;
	animation: line-main-anim 2s ease-in-out infinite;
}
.top-vis .main-img {
	display: inline-block;
	right: 0;
}
.top-vis .main-img img {
	border-radius: 26em 0 0 0;
	object-fit: cover;
	aspect-ratio: 1/0.65;
}
@media only screen and (min-width:1001px) {
	.top-vis .main-title {
		width: 47%;
		padding-left: 7.5em;
		padding-top: 6em;
	}
	.top-vis .mm {
		margin-left: 8.5em;
	}
	.top-vis .main-img {
		width: 53%;
	}
	.top-vis .main-img img {
		aspect-ratio: 1/0.8;
	}
}
@media only screen and (max-width:1000px) {
	.top-vis .main-title {
		width: 100%;
		text-align: center;
		margin-bottom: 1em;
		margin-top: 10em;
	}
	.top-vis .main-title::before {
		width: 41%;
		height: 41vw;
	}
	.top-vis .t-caco {
		font-size: 1.6vw;
	}
	.top-vis .t-scroll {
		display: none;
	}
	.top-vis .main-img {
		margin-top: 5em;
		padding-left: 2.5rem;
	}
}
@media only screen and (max-width:640px) {
	.top-vis .t-caco {
		font-size: 2.2vw;
	}
	.top-vis .main-img {
		padding-left: 1.4rem;
	}
}

/**/
.top-vis .main-button {
	margin-top: 4em;
}
.top-vis .main-button .flexbox {
	font-size: 1em;
	width: 64%;
	margin: 0 auto;
	max-width: 1000px;
}
.top-vis .main-button .flexbox > * {
	text-align: center;
	margin: 0 auto;
}
.top-vis .main-button p {
	margin-bottom: 0.5em;
}
.top-vis .main-button p span {
	font-size: 1.3em;
	font-weight: 500;
	margin-right: 0.25em;
}
#main-content .top-vis .main-button a.bt {
	width: 100%;
	font-size: 1.8vw;
	background-color: var(--cl-pageink);
	border-color: var(--cl-pageink);
	color: #fff;
	background-image: var(--ui-bt-base-icon);
	padding-right: 1.6em;
}
#main-content .top-vis .main-button a.bt:hover {
	background-color: #fff;
	color: var(--cl-pageink);
	background-image: var(--ui-bt-hover-icon);
	border-color: var(--cl-line);
}
@media only screen and (min-width:1001px) {
	.top-vis {
		margin-bottom: calc(var(--home-sec-bottom) + var(--home-im-top)/2);
	}
	.top-vis .main-button .flexbox > * {
		width: 49.5%;
	}
	.top-vis .main-button .bt-left .bt {
		border-radius: 10em 0em 0em 10em;
	}
	.top-vis .main-button .bt-right .bt {
		border-radius: 0 10em 10em 0;
	}
}
@media only screen and (min-width:1601px) {
	.top-vis {
		margin-bottom: calc(var(--home-sec-bottom) + var(--home-im-top));
	}
	.top-vis .main-button .flexbox {
		font-size: 1vw;
	}
	#main-content .top-vis .main-button a.bt {
		width: 100%;
		font-size: 1.5vw;
	}
}
@media only screen and (max-width:1000px) {
	.top-vis {
		margin-bottom: 15em;
	}
	.top-vis .main-button {
		margin-top: 10em;
	}
	 .top-vis .main-button .flexbox > * {
		width: 100%;
	}
	.top-vis .main-button .bt-left {
		margin-bottom: 2.5em;
	}
	#main-content .top-vis .main-button a.bt {
		font-size: 1.1em;
	}
	.top-vis .main-button .flexbox {
		font-size: 1.8em;
	}
}
@media only screen and (max-width:640px) {
	.top-vis .main-button .flexbox {
		font-size: 3vw;
	}
	#main-content .top-vis .main-button a.bt {
		font-size: 1em;
	}
}
@media only screen and (max-width:400px) {
	.top-vis .main-button .flexbox {
		font-size: 4vw;
	}
}

/*Content with image*/
.t-imcon {
	text-align: center;
}
.t-imcon .t-con,
.t-imcon .t-im {
	display: inline-block;
	width: 100%;
}
.t-imcon .h-box{
	margin-bottom: var(--home-bottom);
}
.t-imcon .t-text {
	margin-bottom: calc(var(--home-bottom) - 1em);
}
.t-imcon .t-text p {
	line-height: 2.4;
}
.t-imcon .t-im img {
	height: 100%;
	object-fit: cover;
}
@media only screen and (min-width:1001px) {
	.t-imcon {
		text-align: left;
		background-color: var(--cl-sec-bg);
		padding: calc(var(--base-unit) * 4) 0;
		margin-top: calc(var(--home-im-top) - 80px);		
	}
	.t-imcon .t-con,
	.t-imcon .t-im {
		width: 50%;
	}
	.t-imcon .t-im {
		position: relative;
		margin-top: calc(var(--home-im-top) * -1);
	}
	.t-imcon .t-im picture {
		display: inline-block;
		aspect-ratio: 1/1;
		width: 100%;
		height: 100%;
	}
}
@media only screen and (max-width:1000px) {
	.t-imcon .home-wide {
		padding: 0;
	}
	.t-imcon .t-con {
		padding: 0 var(--home-padding-smp);
		margin: auto;
		margin-bottom: 3em;
	}
	.t-imcon .h-box{
		margin-bottom: var(--home-bottom);
	}
	.t-imcon .h-main {
		justify-content: center;
	}
	.t-imcon .t-text p {
		line-height: 1.9;
	}
	.t-imcon .t-im img {
		width: 100%;
		aspect-ratio: 2/1;
	}
}
@media only screen and (max-width:640px) {
	.t-imcon .t-con {
		padding: 0 var(--share-smp-padding);
	}
}

/*About + Seminar*/
.t-about .t-con {
	max-width: 25em;
}
.t-about .h-main {
	align-items: flex-end;
}
.t-about .h-main span {
	font-size: 0.53em;
	line-height: 1.5;
}
.t-about .lgm-cnt {
	width: 5em;
	object-fit: contain;
}
@media only screen and (min-width:1001px) {
	.t-seminar.t-imcon .t-con {
		order: 2;
	}
	.t-seminar.t-imcon .t-im {
		order: 1;
	}
}
@media only screen and (min-width:1281px) {
	.t-seminar.t-imcon .t-con {
		padding-left: 7.5em;
	}
}
@media only screen and (max-width:1280px) {
	.t-seminar.t-imcon .t-con {
		padding-left: 8vw;
	}
}
@media only screen and (max-width:1000px) {
	.t-about .lgm-cnt {
		width: 3.8em;
		object-fit: contain;
	}
	.t-about .h-main span {
		width: 100%;
		margin-top: 0.5em;
	}
	.t-about .h-main span {
		font-size: 0.45em;
	}
	.t-seminar.t-imcon .t-con {
		padding-left: 0;
	}
}
@media only screen and (max-width:640px) {
	.t-about .t-con {
		max-width: 29em;
	}
	.t-seminar.t-imcon .t-con {
		padding-left: 0 var(--share-smp-padding);
	}
}

/*t-sec-list*/
.t-sec-list ul {
	width: 100%;
	margin-bottom: var(--home-bottom);
}
@media only screen and (min-width:641px) {
	.t-sec-list .bt {
		font-size: 1.2em;
	}
}

/*Product*/
.t-product li {
	position: relative;
	width: 33.33%;
	aspect-ratio: 1/1;
	text-align: center;
	margin-bottom: 0;
}
.t-product li a {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	margin-bottom: 0;
}
.i-pro1 a {background-image: url("/share/im_oshare/1_home/3_product_srm.jpg");}
.i-pro2 a {background-image: url("/share/im_oshare/1_home/3_product_tr.jpg");}
.i-pro3 a {background-image: url("/share/im_oshare/1_home/3_product_rod.jpg");}
.i-pro4 a {background-image: url("/share/im_oshare/1_home/3_product_csm.jpg");}
.i-pro5 a {background-image: url("/share/im_oshare/1_home/3_product_tl.jpg");}
.i-pro6 a {background-image: url("/share/im_oshare/1_home/3_product_sanitary.jpg");}
.t-product li a:hover {
	background-image: none;
	background-color: var(--cl-line);
	transition: all 0.4s;
}
.t-product a:hover .f-jp,
.t-product a:hover .f-en {
	color: var(--cl-pageink);
}
.t-product .f-jp {
	font-size: 1em;
	font-weight: 400;
	color: #fff;
}
.t-product .f-en {
	font-size: 1.625em;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: #fff;
}
@media only screen and (max-width:640px) {
	.t-product li {
		width: 50%;
	}
}

/*Beauty Salon*/
.t-salon ul {
	background-color: var(--cl-sec-bg);
}
	.t-salon li {
		display: flex;
		width: 33.33%;
		aspect-ratio: 1/1;
		background-size: cover;
		margin-bottom: 0;
		align-items: flex-end;
	}
	.t-salon li.i-salon7 {
		width: 66.66%;
		aspect-ratio: 2/1;
	}
.i-salon1 {background-image: url("/share/im_oshare/1_home/4_salon_01.png");}
.i-salon3 {background-image: url("/share/im_oshare/1_home/4_salon_02.jpg");}
.i-salon4 {background-image: url("/share/im_oshare/1_home/4_salon_03.jpg");}
.i-salon5 {background-image: url("/share/im_oshare/1_home/4_salon_04.jpg");}
.i-salon6 {background-image: url("/share/im_oshare/1_home/4_salon_05.jpg");}
.i-salon7 {background-image: url("/share/im_oshare/1_home/4_salon_06.jpg");}
.t-salon .caco-box {
	margin-bottom: calc(var(--home-bottom) * 1.5);
}
.t-salon .caco-box p {
	font-family: var(--font-m1);
	font-size: 1.3125em;
	line-height: 2.3;
}
.t-salon .caco-box p:last-of-type {
	position: relative;
	display: inline-block;
	text-align: center;
}
	.t-salon .caco-box p:last-of-type::before,
	.t-salon .caco-box p:last-of-type::after {
		position: absolute;
		content: "";
		display: inline-block;
		width: 2em;
		height: 2em;
		background-image: url("/share/im_oshare/ui/line-stoke.svg");
		bottom: -0.6em;
	}
	.t-salon .caco-box p:last-of-type::before {
		left: -2em;
	}
	.t-salon .caco-box p:last-of-type::after {
		right: -2em;
		transform: scaleX(-1);
	}
.t-salon .textbox {
	position: relative;
}
	.t-salon .textbox div {
		display: inline-block;
		text-align: left;
		padding: 2em;
	}
	.t-salon .textbox div p:first-of-type {
		font-family: var(--font-m1);
		font-size: 1.8em;
		line-height: 1.7;
		margin-bottom: 0.75em;
	}
	.t-salon .textbox div p:last-of-type {
		font-size: 1em;
		line-height: 2.5em;
	}
@media only screen and (min-width:1001px) {
	.t-salon .textbox div {
		padding: 0;
		width: 19.5em;
		margin: calc((100% - 19.5em) / 2) auto;
	}
}
@media only screen and (min-width:1601px) {
	.t-salon .textbox div p:first-of-type {
		font-size: 1.9em;
	}
}
@media only screen and (max-width:1200px) {
	.t-salon .textbox div {
		padding: 1em;
	}
	.t-salon .textbox div p:last-of-type {
		line-height: 2.2em;
	}
}
@media only screen and (max-width:1000px) {
	.t-salon .caco-box p {
		font-size: 1.2em;
	}
	.t-salon .textbox div {
		text-align: center;
		padding: 0;
	}
	.t-salon .textbox div p:last-of-type {
		line-height: 1.9em;
	}
	.t-salon li.i-salon1 {
		order: 9;
		display: none;
	}
	.i-salon2 {
		order: 3;
	}
	.i-salon3 {
		order: 4;
	}
	.i-salon4 {
		order: 1;
	}
	.i-salon5 {
		order: 2;
	}
	.i-salon6 {
		order: 5;
	}
	.i-salon7 {
		order: 7;
	}
	.i-salon8 {
		order: 6;
	}
	.t-salon li {
		width: 50%;
	}
	.textbox div {
		text-align: center;
		margin: auto;
	}
	.t-salon li.textbox,
	.t-salon li.i-salon7 {
		width: 100%;
		aspect-ratio: 2/1;
		align-items: center;
	}
	.t-salon .i-salon2.textbox,
	.t-salon .i-salon8.textbox {
		padding: 2.5em;
	}
}
@media only screen and (max-width:640px) {
	.t-salon .i-salon2.textbox,
	.t-salon .i-salon8.textbox {
		padding: 2em 1.4em;
	}
}
@media only screen and (max-width:400px) {
	.t-salon .textbox div p:first-of-type {
		font-size: 5vw;
	}
	.t-salon .textbox div p:last-of-type {
		font-size: 3.4vw;
	}
	.t-salon .caco-box p {
		font-size: 3.8vw;
	}
}

/*News*/
.t-news li {
	width: 100%;
	margin-bottom: 0;
}
.t-news .articles li a.im {
	display: none;
}
.t-news .articles li .info-wrap {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--cl-line);
	padding: 0;
}
	.t-news .articles li .head {
		margin-bottom: 0;
		width: 6em;
	}
	.t-news .articles li .title {
		margin-left: 1.5em;
		width: calc(100% - 6em);
	}
		.t-news .articles li .title > a {
			padding: 2em 0;
			width: 100%;
		}
		.t-news .articles li .title > a:hover {
			color: var(--cl-hsub);
			transition: all 0.4s;
		}
.t-news .bt {
	margin-top: 3em;
}
@media only screen and (min-width:1001px) {
	.t-news .h-box {
		width: 30%;
	}
	.t-news .t-list {
		width: 70%;
	}
}
@media only screen and (max-width:1000px) {
	.t-news .t-flex {
		display: block;
		text-align: center;
	}
	.t-news .t-flex > * {
		width: 100%;
	}
	.t-news .t-flex .align-R {
		text-align: center;
	}
	.t-news .articles li .title > a {
		padding: 1em 0;
	}
}
@media only screen and (max-width:400px) {
	.t-news ul li {
		width: 100%;
	}
}

/*Oshare-lash*/
.t-oshare-lash {
	position: relative;
	width: 100%;
	text-align: center;
	background-image: url("/share/im_oshare/1_home/6_oshare-lash-pc.jpg");
	background-size: cover;
	color: #fff;
}
.t-oshare-lash .home-wide {
	display: inline-block;
	width: 100%;
}
@media only screen and (min-width:641px) {
	.t-oshare-lash {
		height: 500px;
	}
	.t-oshare-lash .home-wide {
		padding: 0;
	}
	.t-oshare-lash div {
		width: 100%;
		max-width: calc(27em + var(--home-padding-tab) * 2);
	}
	.t-oshare-lash.t-sec .h-box {
		margin-bottom: 2em;
	}
}
@media only screen and (min-width:1281px) {
	.t-oshare-lash {
		height: 600px;
	}
}
@media only screen and (min-width:1601px) {
	.t-oshare-lash {
		height: 700px;
	}
}
@media only screen and (max-width:640px) {
	.t-oshare-lash {
		aspect-ratio: 1/1;
	}
}

/**/
@media only screen and (max-width:640px) {
	.t-sec .t-desc {
		max-width: 24em;
		margin-left: auto;
		margin-right: auto;
	}
}