@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900');

#ledextension {
	color: #555;
	font-size: 14px;
	font-family: "Noto Sans JP";
}

/*----- COMMON -----*/
#ledextension {
	.sp {
		display: none;
	}
	video,
	img {
		width: 100%;
	}
	a {
		font-size: inherit;
		text-decoration: none;
	}
	.text_pink {
		color: #d36274;
	}
	.text_blue {
		color: #456498;
	}
	.text_cancel {
		text-decoration: line-through;
	}
	.line_yellow {
        padding: 0 2px;
		background: linear-gradient(transparent 40%, #fffcd1 0%);
	}
	.line_white {
        padding: 0 2px;
		background-color: #FFF;
	}
	.box_shadow {
		box-shadow: 0 0 16px 0 rgba(0,0,0,0.1);
	}
	p {
		letter-spacing: 0.3rem;
	}
	.commonBtn {
		font-family: "Cormorant Garamond","Noto Serif JP";
		letter-spacing: 0.3rem;

		&:hover {
			opacity: .7;
		}
		&.productLink {
			display: block;
			padding: 16px 32px;
			margin: 24px auto 0 auto;
			width: fit-content;
			color: #FFF;
			font-size: 1.8rem;
			border-radius: 12px;
			background-color: #456498;
		}
		&.seminarLink {
			display: block;
			padding: 16px 32px;
			margin: 24px auto 0 auto;
			width: fit-content;
			color: #FFF;
			font-size: 1.8rem;
			border-radius: 12px;
			background-color: #df8f9c;
		}
	}
	.flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.flex.equal > * {
		flex: 1 1 0;
	}

	/*OBSERVER ANIMATION*/
	.anim {
		transition: all 1s cubic-bezier(0, 0, 0.1, 1);;
	}
	.scale_in {
		transform: scale(2);
	}
}

#ledextension ::selection {
	color: #FFF;
	background: #ff9541;
}

/*----- H1 H2 H3 H4-----*/
#ledextension nav,
#ledextension h1,
#ledextension h2,
#ledextension h3,
#ledextension h4 {
	font-family: "Cormorant Garamond","Noto Serif JP";
	font-weight: 200;
}
	#ledextension h2 span {
		display: block;
		font-size: 1.3rem;
	}

/* HEADER */
#ledextension header {
	position: relative;
	height: 480px;
	background-image: url("../img/FV_bg.jpg");
	background-position: center;

	.introduction_salon {
		padding: 12px;
		color: #FFF;
		text-align: center;
		background: rgba(255,255,255,.1);
	}

	.kvArea {
		height: 100%;
		overflow: hidden;
		img {
			position: absolute;
			display: block;
			width: auto;
		}
		.kv_p {
			top: 60px;
            left: 20%;
			height: 80%;
			transform: translateX(-50%);
		}
		.kv_l {
			top: 50%;
            left: 50%;
            height: 30%;
            transform: translate(-50%, -50%);
		}
		.kv_y {
			bottom: 0;
			left: 80%;
			height: 80%;
			transform: translateX(-50%);
		}
	}
}

/* NAV */
#ledextension nav {
	position: sticky;
	top: 0;
	display: flex;
	height: 60px;
	font-size: 1.6rem;
	background: #FFF;
	box-shadow: 0 4px 12px 0 rgba(0,0,0,0.2);
	z-index: 10;
	
	> a {
		display: block;
		flex: 1 1 0;
		padding-top: 10px;
		height: 100%;
		color: #456498;
		text-align: center;
		cursor: pointer;
		
		&:hover {
			background: linear-gradient(0deg, #d8dbf8, #e2f1ff);
		}

		span{
			display: block;
			font-size: 1rem;
		}
	}
}

/* SECTION */
#ledextension section {
	padding-top: 80px;

	h2 {
		padding-bottom: 64px;
		color: #456498;
		font-size: 4rem;
        letter-spacing: 0.8rem;
		text-align: center;titt6
	}
	> *:last-child:not(.tabArea) {
		padding-bottom: 80px;
	}
	.tabTargetArea > *:last-child {
		padding-bottom: 80px;
	}
}
/* conceptArea */
#ledextension section.conceptArea {
	color: #FFF;
	background-image: url("../img/concept_bg.jpg");
	background-position: center;
	background-repeat: no-repeat;
    background-size: cover;

	h2 {
		color: #FFF;
	}
	ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 64px 0;

		li {
			margin: 0 8px;
            font-size: 1.6rem;
            letter-spacing: 0.4rem;
			text-align: center;
			border-bottom: 2px solid rgba(255,255,255,0.7);
		}
	}
	p {
		padding-bottom: 12px;
		text-align: center;
	}
}

/* aboutArea */
#ledextension section.aboutArea {
	color: #456498;
	background-image: url("../img/merit_bg.jpg");

	> div {
		margin: 0 auto;
		padding: 32px;
		width: 75%;
		border-radius: 12px;
		background-color: rgba(255,255,255,0.7);
		box-shadow: 0 0 24px 0 rgba(0,0,0,0.1);

		.flex > * {
			flex: 1 1 0;
			padding: 0 12px;

			img {
				display: block;
				margin: 0 auto;
				max-width: 200px;
			}
		}
		p {
			padding-bottom: 24px;
			font-size: 1.4rem;
			text-align: justify;
			letter-spacing: 0.25rem;
			line-height: 2.4rem;
		}

		.attentionBlock {
			padding-top: 12px;
			font-size: 1.2rem;
			text-align: center;

			span {
				display: block;
				font-size: 1rem;
			}
		}
	}
}

/* meritArea */
#ledextension section.meritArea {
	position: relative;
	background-image: url("../img/merit_bg.jpg");

	ul {
		display: flex;
		justify-content: center;

		li {
			margin: 12px;
			width: 240px;
			height: 240px;
			text-align: center;
			font-family: "Noto Serif JP";
			border: 4px solid #d8dbf8;
			border-radius: 120px;
            outline: 2px solid #FFF;
            outline-offset: -4px;
			background-image: linear-gradient(0deg, #d8dbf8, #e2f1ff);
			cursor: pointer;
			overflow: hidden;
			opacity: 1;
			transition: .5s;

			&:hover {
				outline-color:  #456498;
			}
	
			p {
				position: relative;
				top: 20%;
				color: #456498;
				font-size: 1.4rem;
				font-weight: 400;
				transition: .3s;
			}
			img {
				position: relative;
				display: block;
				bottom: -15%;
				margin: 0 auto;
				width: 70%;
				transition: .5s;				
			}
			.detail_text {
				display: none;
			}

			/* MODAL */
			&.detail {
				transform: scale(1.6);
				z-index: 2;
				
				> p {
					opacity: 0;
				}
				> img {
					width: 30%;
					bottom: 16px;
				}
				.detail_text {
					display: block;
					margin-top: -30px;
                    font-size: 0.8rem;
                    line-height: 1.8rem;
				}
				.closeBtn {
                    position: absolute;
                    left: 50%;
					bottom: 0;
                    font-size: 3rem;
                    transform: translateX(-50%);
					z-index: 10;
				}
				
			}
		}
	}

	.modalBack {
		position: fixed;
		display: none;
		top: 0;
		left: 0;
		height: 100dvh;
		width: 100dvw;
		background: rgba(255,255,255,.5);
		z-index: 1;
	}
}

/* seminarArea */
#ledextension section.seminarArea {
	ul.tabBtn {
        margin: 0 auto;
        padding: 0 10%;
		width: fit-content;
		justify-content: center;
		border-bottom: 1px solid #CCC;
		
		li {
			position: relative;
			margin: 0 8px;
			padding: 16px 24px;
			color: #FFF;
			cursor: pointer;
			border-radius: 12px 12px 0 0;
			user-select: none;

			&:first-child {
				background-color: #708dbd;
				&.active::after {
					color: #708dbd;
				}			}
			&:last-child {
				background-color: #df8f9c;
				
				&.active::after {
					color: #df8f9c;
				}
			}
			&:hover {
				opacity: .7;
			}
			&.active::after {
				content: "▼";
                position: absolute;
                bottom: -16px;
                left: 50%;
                transform: translateX(-50%);
                color: #AAA;
                font-size: 1.6rem;
			}
		}
	}
	h3 {
		margin: 0 auto;
		padding-top: 48px;
		width: fit-content;
		color: #456498;
        font-size: 2.8rem;
		text-align: center;
		letter-spacing: 0.6rem;

		span {
			position: relative;
			display: block;
			font-size: 1.6rem;

			&::before {
				content: "";
                position: absolute;
                top: 2px;
                left: 15%;
                height: 20px;
                border-left: 1px solid #456498;
                transform: rotate(-20deg);
			}
			&::after {
				content: "";
                position: absolute;
                top: 2px;
                right: 15%;
                height: 20px;
                border-left: 1px solid #456498;
                transform: rotate(20deg);
			}
		}
	}

	/* 導入セミナー */
	.introduction .seminarBlock {
		margin: 0 auto;
		width: 60%;
		> .flex {
			> * {
				margin: 16px;
				padding: 12px;
				text-align: center;
				border-radius: 16px;

				&:nth-child(1),
				&:nth-child(2) {
					flex: 1 1 0;
					border: 1px dashed #456498;
					background-color: #ebf5ff;

					table {
						margin: 16px 0;
						th, td {
							padding: 8px;
							font-size: 1.6rem;
						}
						th {
							text-align: right;
						}
						td {
							text-align: left;
						}
					}
				}
				&:nth-child(4){
					padding: 32px;
					width: 100%;
					background-color: #f9fcff;
					> .flex {
						margin-top: 16px;

						> * {
							padding: 12px;
							text-align: left;

							h4 {
								margin: 16px 0 4px 0;
								font-weight: 400;
								font-family: "Noto Sans JP";
							}
							p {
								text-align: justify;
								font-size: 1.2rem;
                                line-height: 2.1rem;
							}
						}
					}
				}

				h3 {
					padding-top: 0;
					font-size: 2.1rem;
					border-bottom: 1px solid #456498;

					span {
						font-size: 1.2rem;
					}
				}
			}
			> .certificateArea {
				width: 100%;
				h3 {
					padding-bottom: 16px;
					font-size: 1.8rem;
					border: none;
				}
				p {
					margin: 0 56px;
					padding-bottom: 12px;
                    color: #999;
					font-size: 1.2rem;
					text-align: justify;
				}
			}
		}
		.commonBtn {
			display: block;
            margin: 16px auto 0 auto;
            padding: 8px 40px;
            width: fit-content;
            color: #FFF;
            font-size: 1.6rem;
            border-radius: 12px;
            background: linear-gradient(0, #6a91c7, #a3bded);
		}
	}

	/* 毛筆改善リフトセミナー */
	.improvement .seminarBlock {
		padding: 24px 0 48px 0;

		.improvement_free_user {
			margin: 12px auto;
            padding: 20px;
            width: fit-content;
			font-weight: 600;
			text-align: center;
            border: 4px solid #d36274;
            border-radius: 36px;

			span {
				font-size: 2.4rem;
				&.text_cancel {
					font-size: 1.8rem;
				}
			}
		}

		> div {
			margin: 0 auto;
			padding: 24px;
			width: 75%;
		}
		/* 情報  */
		.seminar_info {
			border: dashed 1px #eba2ae;
			border-radius: 12px;
			background-color: #fef8f9;

			p {
				margin: 32px 0;
                text-align: center;
                font-size: 1.6rem;
			}
			h4 {
                margin: 32px 0 16px;
				color: #456498;
                font-size: 2.4rem;
                text-align: center;
			}
			.feature {
				justify-content: center;
				align-items: center;

				li:nth-child(odd) {
					padding-top: 24px;
					width: 90px;
					height: 90px;
					color: #FFF;
					text-align: center;
					border-radius: 70px;
					outline: 2px dotted rgba(255,255,255,0.5);
                    outline-offset: -4px;
					background: #eba2ae;
				}
			}
			.salon_merit li {
				display: block;
                margin: 8px 0;
                padding: 4px 16px;
                width: 100%;
                border: 1px solid #eba2ae;
                border-radius: 20px;
			}
			.before_after {
				li:nth-child(odd) {
					flex:8;
				}
				li:nth-child(even) {
					flex:1;
					text-align: center;
				}
			}
			.checkList {

				li {
					position: relative;
					margin: 8px 0;
					padding: 8px 0 8px 40px;
					border-radius: 12px;
					background: #FFF;

					&::before {
                        content: "";
						position: absolute;
                        top: 6px;
                        left: 8px;
                        height: 24px;
                        width: 24px;
                        background-image: url(../img/icon_check.png);
                        background-size: cover;
					}

				}
			}
		}
		/* ポイント */
		.seminar_points {
			ul.flex {
				align-items: stretch;

				> li {
					margin: 32px 8px;
					border-radius: 16px;
					background-color: #FFF;

					> p {
						padding: 12px 0;
						color: #FFF;
						font-family: "Cormorant Garamond", "Noto Serif JP";
						text-align: center;
						border-radius: 16px 16px 0 0;
						background: #eba2ae;
					}
					h4 {
						padding: 16px;
						color: #d36274;
						font-size: 1.6rem;
						font-weight: 400;
						text-align: center;
					}
					.image {
						padding: 16px;
					}
					.text {
						padding: 16px;
						font-size: 1.4rem;
					}
				}
				> li.point02 {
					ul {
						flex-direction: row;
					}
				}
			}
		}
		/* 理由 */
		.seminar_reason {
			h4 {
				margin-top: 60px;
				color: #456498;
				font-size: 1.8rem;
				text-align: center;
			}
			table {
				margin-top: 32px;

				thead {
					background: #CCC;
				}
				tbody {
					background: #EEE;

					.sign_table::before {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 8rem;
						font-weight: 900;
						color: #FFF;
					}
					.sign_table.round::before {
						content: "◯";
					}
					.sign_table.triangle::before {
						content: "△";
					}
					.sign_table.double::before {
						content: "◎";
					}
				}
				th, td {
					position: relative;
					padding: 24px;
					width: 25%;
					text-align: center;
					vertical-align: middle;
					border: 2px solid #FFF;

					p {
    					position: relative;
						z-index: 1;
					}
				}
				.sign_table.double {
					background: #fde9ec;
				}


			}
		}
		/* 流れ */
		.seminar_flow {
			width: 60%;

			p {
				padding: 4px 0;
				font-size: 1.2rem;
				letter-spacing: 0rem;
			}

			.flex {
				margin: 32px 0;
				justify-content: space-evenly;

				li {
					position: relative;
					text-align: center;


					h4 {
						font-family: "Noto Sans JP";
						font-size: 1.4rem;
						font-weight: 400;
						line-height: 1.6rem;
					}
					img {
						display: block;
						position: absolute;
						top: 55%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: 50%;
					}
					div {
						position: absolute;
						font-size: 1rem;
						bottom: 5%;
						left: 50%;
						width: 100%;
						transform: translateX(-50%);
					}
					&:nth-child(odd){
						padding: 8px;
						width: 200px;
						height: 200px;
						border-radius: 100px;
						background: #ffe9ef;
					}
				}
			}
		}
		.commonBtn {
			display: block;
			margin: 32px auto 0 auto;
			padding: 12px 24px;
			width: fit-content;
			color: #FFF;
			font-size: 2rem;
			border-radius: 12px;
			background: linear-gradient(0, #d3818e, #ecadb7);
		}
	}

	/* SEMINAR BACKGROUND */
	.seminarBlock:nth-child(3) {
		background-image: url("../img/bg.jpg");
		background-size: cover;
	}
	.seminarBlock:nth-child(5) {
		background-color: #fff8f9;
	}


	/* 毛質改善リフト */
	.tabTargetArea .improvement {
		background-color: #fef2f4;
	}
}
/* contentsArea */
#ledextension section.contentsArea {
	background-image: url("../img/contents_bg.jpg");

	.videoArea {
		margin: 0 auto 120px auto;
		width: 400px;
	}
	.instagramArea {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
		a {
			display: block;
			width: 20dvw;
			height: auto;
		}
}
/* voiceArea */
#ledextension section.voiceArea {
	background-color: #5d88c0;

	h2 {
		color: #FFF;
	}
		.flex {
			align-items: flex-start;
			justify-content: center;
			> div {
				position: relative;
				margin: 0 1%;
				padding-bottom: 12px;
				width: 15%;
				height: 400px;
				min-width: 180px;
				border-radius: 12px;;
				background-color: #FFF;
				overflow: hidden;
			}
			img {
				display: block;
				margin-bottom: 8px;
			}
			h4 {
				margin-bottom: 8px;
				padding: 0 8px;
				font-size: 1.4rem;
			}
			p.body {
				padding: 0 8px 60px 8px;
				overflow: hidden;
				font-size: 1.2rem;
				text-align: justify;
				letter-spacing: unset;
				line-height: 2rem;
			}
				p.body::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: 0;
					height: 80px;
					width: 100%;
					background: linear-gradient(0deg, #FFF 65%, transparent);
				}

			p.more {
				position: absolute;
				left: 10%;
				bottom: 8px;
				padding: 4px 0;
				width: 80%;
				color: #456498;
				font-size: 1rem;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0;
				border-radius: 16px;
				background: #dee8f4;
				cursor: pointer;
			}

		}
}
/* faqArea */
#ledextension section.faqArea {
	background-color: #e8ecf1;
	* {
		letter-spacing: 0;
	}
	> div {
		margin: 0 auto;
		width: 60%;
		letter-spacing: 0;
		> * {
			display: none;
		}
		.answer {
			display: none;
			padding: 4px 12px 12px 36px;
            font-size: 1.2rem;
            text-align: justify;
			line-height: 2.1rem;
		}
		.openCloseBtn {
			position: relative;
			display: block;
			margin-bottom: 8px;
			padding: 8px 16px;
			color: #456498;
			font-size: 1.6rem;
			font-family: "Noto Sans JP";
			font-weight: 400;
			border-radius: 24px;
			background-color: #FFF;
			cursor: pointer;

			&::before, &::after {
				content: "";
				position: absolute;
				right: 20px;
				top: 0;
				bottom: 0;
				margin: auto 0;
				background-color: #CCC;
				width: 12px;
				height: 2px;
				transition: all 0.3s;
			}
			&::after {
				transform: rotate(90deg);
			}
			&.open::before, &.open::after {
				transform: rotate(180deg);
			}
			&.question {
				margin-left: 24px;
				font-size: 1.4rem;
				background: #FAFAFA;
			}
		}
	}
}

/* linkArea */
#ledextension section.linkArea {
	.flex {
		margin: 0 auto;
		width: 80%;
		
		> * {
			margin: 0 12px;
			text-align: center;
		}
	}
}

/* FOOTER */
#ledextension footer {
	padding: 48px 0;
	color: #FFF;
	text-align: center;
	background: #5a77a6;

	p {
		padding-bottom: 24px;;
	}
	.flex {
		justify-content: center;

		> p {
			margin: 0 20px;
            width: 15%;
            min-width: 150px;
		}
	}
}


@media screen and (max-width: 1169px){
	#ledextension section.seminarArea {
		& .improvement .seminarBlock {
			.seminar_flow {
				width: 80%;
			}
		}
	}
}
	
@media screen and (max-width: 1024px){
}

@media (max-width: 767px){
	#ledextension {
		.flex {
			flex-direction: column;
		}
		.sp {
			display: block;
		}
		nav {
			height: 48px;
		}
		header {
			.kvArea {
				.kv_p {
					top: 80px;
            		left: 30%;
					transform: unset;
				}
				.kv_l {
					left: 35%;
					height: 16%;
				}
				.kv_y {
					display: none;
				}
			}
		}
		section {
			padding-top: 24px;
			> *:last-child:not(.tabArea){
				padding-bottom: 24px;
			}
		}

		section.conceptArea {
			ul {
				flex-direction: column;
				padding: 32px 0;
				
				li {
					margin: 8px auto;
					width: fit-content;
				}
			}
			p {
				font-size: 1.6rem;
			}
		}

		section.aboutArea {
    		> div {
				padding: 16px;
				width: 90%;

				.attention {

				}
			}
		}

		section.meritArea {
			ul {
				flex-wrap: wrap;
				li {
					width: 160px;
					height: 160px;
					&.detail {
						transform: scale(1.4);
					}
				}
			}
		}

		section.seminarArea {
			ul.tabBtn {
				padding: 0 1%;
				flex-direction: row;

				li {
					&.active::after {
                        font-size: 2.4rem;
						bottom: -16px;
					}
				}
			}
			h3 {
				letter-spacing: 0.4rem;

				span {
            		&::before {
						left: -2%;
					}
            		&::after {
						right: -2%;
					}
				}
			}
			.introduction .seminarBlock {
				width: 90%;

				> .flex {
					align-items: stretch;

					> * {
						margin: 16px 0;

						&:nth-child(4) {
							padding: 32px 12px;
							> .flex {
								> * {
									p {
										font-size: 1.4rem;
									}
								}
							}
						}

						h3 {
							font-size: 2.4rem;
						}
						
					}
					> .certificateArea {
                		p {
							margin: 0;
		                    font-size: 1.4rem;
						}
					}
				}
			}

			.improvement .seminarBlock {
				> div {
					padding: 12px;
					width: 90%;
				}
				.seminar_info {
					.feature {
						margin-bottom: 12px;
						flex-direction: row;
					}
					.before_after {
						li:nth-child(even) {
							padding: 8px 0;
							transform: rotate(90deg);
						}
					}
					.salon_merit {
						display: block;
					}
				}
				.seminar_points {
					& ul.flex {
						& > li {
							h4 {
								font-size: 2.1rem;
							}
						}
					}
				}
				.seminar_reason {
					width: 100%;

					table {
						display: block;
						overflow-x: scroll;

						tbody, thead {
							display: block;
							width: 640px;

							th, td {
								padding: 20px 12px;
								width: 160px;
								font-size: 1.6rem;
							}
						}
					}
        		}
			}
		}

		section.contentsArea {
			a {
				width: 25dvw;
			}
		}

		section.voiceArea {
    		.flex {
				flex-direction: row;
				align-items: stretch;

				> div {
					margin-bottom: 1%;
					height: auto;
				}
				p.body {
					padding: 8px;
					&::after {
						display: none;
					}
				}
				p.more {
					display: none;
				}
			}
		}
		section.faqArea {
    		> div {
				width: 90%;

	        	.openCloseBtn {
            		&.question {
						margin-left: 12px;
						padding-right: 36px;
					}
				}
			}
			
		}
		 section.linkArea {
			& .flex {
				> * {
					margin-bottom: 8px;
				}
			}
		}
	}
}