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

html, body {
	scroll-behavior: smooth;
}
/*----- ANIMATION -----*/
#lashira {
	.anim {
		transition: 1s;
	}
	#kv.blur::before {
		filter: blur(3px);
		transform: scale(1.05);
		transition: filter 0.005s ease-out, transform 0.015s ease-out;
	}

	.blur{
		filter: blur(3px);
		transition: filter 0.01s ease-out;
	}

	.opacity{
		opacity: 1;
		transition: opacity 0.5s ease;
	}

	.slideup {
		transform: translateX(100px);
		opacity: 0;
		transition: transform 0.6s ease, opacity 0.6s ease;

	}

	.slidein {
		transform: translateX(-100px);
		opacity: 0;
		transition: transform 0.6s ease, opacity 0.6s ease;
	}

	.slideinrev {
		transform: translateX(100px);
		opacity: 0;
		transition: transform 0.6s ease, opacity 0.6s ease;
	}

	.fadeup {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.fadein {
		opacity: 0;
		transition: opacity 0.8s ease;
	}

	.zoomin {
		transform: scale(1.1);
		transition: transform 6s ease, opacity 3s ease;
	}	
}

/*----- SETTING -----*/
:root {
	--main: #E6E6DE;
	--main_dark: #8D8D7D;
	--main_light: #F7F7F5;
}


#lashira {
	color: #555;
	font-size: 14px;
	font-family: "Noto Sans JP";
	scroll-behavior: smooth;
}

/*----- COMMON -----*/
#lashira img {
	width: 100%;
	transition: 1s;
}

#lashira a {
	font-size: inherit;
	text-decoration: none;
}

#lashira a:hover{
	opacity: 0.7; 
}

#lashira ::selection {
	color: #FFF;
	background: #e6e6de;
}

/*----- H1 H2 H3 H4-----*/
#lashira h1,
#lashira h2,
#lashira h3,
#lashira h4 {
	font-weight: 300;
	font-family: "Noto Serif JP";
}

#lashira {
	h1 {
		font-size: 3.6rem;
		text-align: center;
		color: #333;
	}
	h2 {
		font-size: 2.8rem;
		text-align: center;
		color: #333;
	}

	h3 {
		margin-bottom: 24px;
		font-size: 2.4rem;
		text-align: center;
		color: #333;
	}
	h5 {
		font-family: "Noto Sans JP";
		font-size: 1.6rem;
		line-height: 2.8rem;
		font-weight: 400;
		color: #333;
	}

	p {
		margin-bottom: 16px;
		font-size: 1.6rem;
		text-align: center;
		line-height: 2.8rem;
	}
	.line {
		width: fit-content;
		text-align: center;
		border-bottom-style: solid;
		border-right-style: solid;
		border-width: 1px;
		border-color: var(--main_dark);
		padding: 16px;
		margin:0 auto 32px;
	}

	.inner {
		margin: 0 auto 16px auto;
		padding: 16px;
		width: fit-content;
		text-align: center;
	}


	.fixedBack {
		position: relative;
		height: 60vw;
		margin: 30px auto 24px;

    img {
        position: absolute;
        display: block;
        object-fit: contain;
        height: auto;
    }

    img:nth-child(1) {
        width: 40%;
        top: 0;
        right: 0;
        z-index: 3;
    }

    img:nth-child(2) {
        width: 30%;
        top: 15%;
        left: 5%;
        z-index: 1;
    }

    img:nth-child(3) {
        width: 20%;
        top: 43%;
        right: calc((100vw - 1170px) / -2 + 60%);
        z-index: 2;
    }
}

	.commonBtn {
		display: block;
		margin: 0 auto;
		padding: 12px 48px!important;
		width: fit-content;
		background: #153126;
		font-size: 1.6rem;
		color: #FFF;
	}
	.link_seminar_common {
		display: block;
		margin: 64px auto;
		padding: 60px 24px;
		width: 850px;
		background-image:url("../img/seminer_bnr_pc.jpg") ;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		
		> div {
			color: #FFF;

			h2 {
				color: #FFF;
			}
		}
		a {
			display: block;
			margin: 0 auto;
			width: fit-content;
		}
	}

/*----- STRUCTURE-----*/
#kv {
    position: relative;
    height: 100vh;
    overflow: hidden;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url(../img/kv.jpg) center bottom / cover no-repeat;
        z-index: 0;
		transition: 4s;
    }

    > * {
        position: relative;
        z-index: 1;
    }

    .kvBottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
        width: 100%;
        inset: 0;
    }

    .kvLogo {
        position: absolute;
        top: 0;
        right: -3px;
        height: 100%;
        width: auto;
    }

    h1 {
        position: absolute;
        top: 15%;
        left: 50%;
        width: fit-content;
        transform: translateX(-50%);
        white-space: nowrap;

        span {
            font-family: "Noto Sans JP";
            display: block;
            font-size: 2rem;
            text-align: left;
        }
    }

    .seminarLinkBtn {
        position: absolute;
        bottom: 20px;
        padding: 8px 40px 0 24px;
        background: rgba(230,230,222,.8);
        display: flex;
        gap: 20px;
        align-items: center;
        z-index: 2;

        h2 {
            text-align: left;
            text-decoration: underline solid 1px var(--main_dark);
            text-underline-offset: 8px;
        }

        p {
            text-align: left;
        }

        img {
            padding-left: 20px;
        }
    }
}
	article {
		margin: 0 auto;

		section {
			margin-bottom: 80px;
		}
	}

	/*----- CONCEPT -----*/
	#conceptArea {
		h1 {
			margin: 64px 0;
		}
		h2 {
			margin: 64px 0;
		}
		p {

		}
	}

	/*----- SEMINAR -----*/
	#seminarArea {
		background-color: #F7F7F5;
		padding-bottom: 8px;
		
		h1 {
			margin: 48px;
		}
		p {
			
			&.lead {
				font-size: 2.1rem;
				padding-top: 32px;
			}
		}
	}
	/*----- PRODUCT -----*/
	#productArea {
		.switcher {
			position: sticky;
			display: flex;
            top: 0;
			flex-wrap: wrap;
			margin-bottom: 24px;
            z-index: 1;

			> li {
				flex: 1 1 0;
				font-family: "Noto Serif JP";
				text-align: center;
				font-size: 1.6rem;
				font-weight: 500;
				border-bottom: 4px solid transparent;
				transition: .2s;
				border-left: 1px solid  var(--main);
				background-color: rgba(255,255,255,0.8);
				cursor: pointer;

				&:hover,
				&.active {
					border-bottom-color:  var(--main_dark);
				}

				> a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100%;
					padding: 16px;
					color: inherit;
					text-decoration: none;
				}
		
				&:first-child {
					border-left-width: 0;
				}
			}
		}

		.switchArea {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 32px;
			
			> div {
				width: 50%;

				img {
					border: 1px solid #FFF;
				}

				&.titleBlock {
					padding: 32px 160px 0px 32px ;

					h2 {
						margin-bottom: 16px;
						color: var(--main_dark);
						text-align: left;

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

					> div {
						position: sticky;
						top: 80px;

						p {
							text-align: justify;
						}
					}
					.flex_right {
						display: flex;
                        justify-content: flex-end;
					}
					a {
						display: block;
						margin-top: 56px;
						width: fit-content;
					}
				}

				&.spec {
					width: 850px;
					max-width: 100%;
					margin: 80px auto;

					h4 {
						position: relative;
						cursor: pointer;
						padding-bottom: 8px;
						margin-bottom: 16px;
						border-bottom: solid 1px var(--main_dark);

						&::after {
							content: "－";
							position: absolute;
							right: 8px;
							top: 50%;
							transform: translateY(-50%);
						}
						&.plus::after {
							content: "＋";
						}
					}

					 .flex {
							margin-bottom: 24px;

							> div {
								display: flex;
								box-sizing: border-box;

								> * {
									&:first-child {
										padding-left: 24px;
										width: 30%;
									}

									&:last-child {
										width: 70%;
									}
									span {
										display: block;
										color: #AAA;
										font-size: 1.2rem;
									}
								}
								h5:first-child {
									padding: 12px 0 12px;
								}
							}

							p {
								margin: 0;
								padding-top: 12px;
								text-align: left;
							}
						}
				}
			}
		}
	}

	/*----- REASON -----*/
	#reasonArea {
		padding: 96px 0 16px 0;
		background-color: #F7F7F5;
		margin-bottom: 0;
		
		.feature {
			background-image: url("../img/round3_back.png");
			background-size: contain;
			background-repeat: no-repeat;
			max-width: 850px;
			margin: 0 auto;

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

			}
		}

		li {
			flex: 1 1 0;
			color: #4a4a4a;
			font-size: 16px;
			margin-left: -35px;
			border-radius: 50%;
			
			&:first-child {
				margin-left: 0;
			}

			h3 {
				padding-top: 46%;
				font-size: 2rem;
			}

			p {
				margin-top: 50%;
				padding: 0 36px;
				font-size: 1.4rem;
			}
		}
	}
	/*----- LIFE STYLE -----*/
	#lifestyleArea {
		div:first-child {
			margin: 0 0 0 40%;
		}
		div:last-child {
			position: relative;
			margin: -80px 40% 0 0;
			padding: 24px;
			background-color: #FFF;
		}
	}
}


@media screen and (max-width: 1199px){
	/*bootstrapを使用する場合。幅を1200pxとして
	左右に15pxずつpaddingをつけている為*/
}
@media screen and (max-width: 1169px){
	/*bootstrapを使用しない場合*/
}
	
@media screen and (max-width: 1024px){
}

@media (max-width: 767px) {
	
  #lashira {
		h1 {
		font-size: 3.4rem;
		margin: 16px 0;
		text-align: left;
		span{
			font-weight: 400;
		}
		}
		h2 {
		font-size: 2.8rem;
		margin: 8px 0;
		}
		h3 {
        font-size: 2.6rem;
        text-align: center;
		font-weight: 400;
		}
		h4 {
        font-size: 2.4rem;
		font-weight: 400;
		}
		h5 {
        font-size: 2.4rem;
		font-weight: 400;
		}
		p {
		font-size: 2.0rem;
		text-align: center;
		line-height: 3.0rem;
		letter-spacing: 0.1em;
		color: #333;
		margin-bottom: 16px;
		}
		.commonBtn{
			color: #fff;
			font-size: 2.0rem;
			letter-spacing: 0.08rem;
			font-weight: 400;
			text-align: center;
		}

	#kv{
		height: 70vh;
		h1{
			top:6%;
		}
		.kvBottom .seminarLinkBtn{
			width: 100%;
			bottom:0;
			padding: 4px 16px;
		}
		.kvLogo{
			height: 80%;
		}
		.seminarLinkBtn{
			height: 20%;
		}
	}

	#conceptArea{
		h2 {
		font-size: 2.8rem;
		margin: 32px 0;
		}
	}

    .fixedBack {
      position: relative;
	  height: 80vw;
      margin: 0 auto 24px;

      img {
        position: absolute;
        display: block;
        height: auto;
        object-fit: contain;
      }

      img:nth-child(1) {
        width: 50%;
        top: 0;
        right: 0;
        z-index: 2;
      }

      img:nth-child(2) {
        width: 42%;
        top:36%;
        left: 0;
        z-index: 1;
      }

      img:nth-child(3) {
		width: 32%;
		top: 70%;
		right: 43%;
		z-index: 3;
      }
    }

	.inner{
    width:fit-content;
    padding:16px;
    box-sizing:border-box;
	}

	.inner p{
		width:auto;
	}

	#seminarArea {
        & p {
            &.lead {
                font-size: 2.6rem;
				font-weight: 400;
                padding-top: 32px;
				color: #333;
            }
        }
    }
	
	.link_seminar_common {
		width: calc(100% - 32px);
		background-position: center top;
		background-size: cover;
		padding: 32px 16px;
		background-image: url("../img/seminer_bnr_sp.jpg");

		.textArea p{
			color: #FFF;
			font-size: 1.6rem;
		}
	}


	#productArea {
		.switchArea {
				display: block;

				> .imageBlock,
				> .titleBlock,
				> .spec {
					width: 100%;
				}

				> div {
					width: 100%;

					&.spec {
						width: 100%;
						padding: 0 16px 0;
						box-sizing: border-box;
				
						& .flex {
							& > div {
								padding: 8px;

								> *:first-child {
									padding-left: 0;
								}

								span{
									font-size: 1.6rem;
								}
							}
						}
					}
				}

				& .titleBlock {
					padding: 24px 16px 0 !important;
				         .flex_right {
                        display: flex;
                        justify-content: center;
					}
				}

				> .imageBlock {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				overflow-y: hidden;
				gap: 1px;
				padding-bottom: 8px;
				width: 100%;
				min-width: 0;

				img {
					flex-shrink: 0;
					width: auto !important;
					height: 70vw;
					max-height: 320px;
				}

				/* &::-webkit-scrollbar {
					height: 6px;
				}

				&::-webkit-scrollbar-track {
					background: var(--main_light);
				}

				&::-webkit-scrollbar-thumb {
					background: var(--main_dark);
					border-radius: 999px;
				} */
				}

		}

		.switcher{
    flex-wrap:nowrap;
}

.switcher > li{
    min-width:0;
}

.switcher > li > a{
    padding:12px 4px;
    font-size:2.0rem;
}
	}

	    #reasonArea {
			padding: 16px 0 16px 0;
			.inner{
			margin-bottom: 0;

	        .feature {
				background-image: url("../img/round3_back_B.png");
				background-position: center;
				height: 720px;
				width: calc(100% - 32px);
				margin: 40px auto;
				padding-bottom: 0;

				ul {
					position: relative;
					display: block;

					li {
						position: absolute;
						margin: 0;
						padding: 0;

						h3 {
							padding: 0;
							font-size: 2.6rem;
							text-align: center;
							font-weight: 400;
						}
						p {
							font-size: 1.6rem;
							text-align: center;
							line-height: 3.0rem;
							margin: 0 50px;
							padding: 0;
						}

						&:nth-child(1){
							top: 60px;
						}
						&:nth-child(2){
							top: 270px;
						}
						&:nth-child(3){
							top: 520px;
						}
					}
				}
			}
		}
	}


	#lifestyleArea{
		div:first-child {
            margin: 0 auto;
        }
		
		div:last-child {
            position: relative;
            margin: -50px 6%;
            padding: 24px;
            background-color: #FFF;
        }

	}
}
html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    #lashira {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }


    #lashira *,
    #lashira *::before,
    #lashira *::after {
        box-sizing: border-box;
    }
}