@charset "utf-8";
@import url("color.css");

* {
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body {
	color: var(--ena-text);
	letter-spacing: 0.05em;
	position: relative;
	line-height: 1.7;
	font-size: 0.875rem;/*14px*/
	font-feature-settings: "palt";
	font-family: var(--ena-font);
	font-weight: 500;
}

a {
	text-decoration: none;
	transition: all 0.3s;
    position: relative;
}

a:hover {
	opacity: 0.5;
}

img {
	height: auto;
	width: 100%;
}

section {
    padding-bottom: 20vw;
}

.sp_block {
	display: none;
}

.btn {
	display: inline-block;
	border: 1px solid var(--ena-text);
	background-color: var(--ena-white);
	color: var(--ena-text);
    padding: 0.2em 1.5em;
    line-height: 36px;
	min-width: 200px;
	position: relative;
    text-align: left;
	font-family: var(--ena-font);
}

.btn::after {
	position: absolute;
	right: 10px;
    top: calc(50% - 3.5px);
    display: block;
    content: "";
    width: 6px;
    height: 6px;
	border-right: 1px solid var(--ena-text);
	border-top: 1px solid var(--ena-text);
	transform: rotate(45deg);
}
.btn::before {
	position: absolute;
	right: 10px;
    top: calc(50% - 0.5px);
	display: block;
	content: "";
	width: 13px;
	height: 1px;
	background: var(--ena-text);
}

.block {
	display: block;
	margin: 0 !important;
}

/* =================================================
画面両サイド追随テキスト
==================================================*/
small.copyright,
h1 {
    position: fixed;
	top: 50%;
    transform: translate(0, calc(-250px / 2));
	display: block;
    width: 250px;
	font-size: 10px;
    text-align: center;
}
small.copyright {
	right: 15px;
    rotate: 90deg;
}

h1 {
	left: 15px;
    rotate: -90deg;
}


/* =================================================
header〜nav
==================================================*/

#logo {
  max-width:50px;
  display:block;
  z-index: 10;
}


nav{
 width: 100%;
 height: 80px;
 position: fixed;
 flex-direction: column;
 z-index: 99;
 margin-top: 5px;  
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}

/*ナビゲーション部分*/

.menu ul li a {
display:block;
  font-weight:bold;
  padding: 1.5em;
  text-align: center;
  color:#333;
  text-decoration:none;
}


.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;}


.menu {
    text-align: center;
    background-color: rgba(255, 255, 255, 1);
    transition: .5s ease;
    padding-top: 100px;
    margin-top: -100px;
    -webkit-transform: translateY(-115%);
    transform: translateY(-115%);
    padding-bottom: 50px;
}

/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*中身を表示（右へスライド）*/
 box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}



/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
  right:15px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 100%;
    border-bottom: solid 2px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
 
}
 
.Toggle span:nth-child(1) {
    top:5px;
}
 
.Toggle span:nth-child(2) {
    top: 18px;
}
 
.Toggle span:nth-child(3) {
    top: 32px;
}
 


.Toggle.active span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}



.cta-btn {
	background-color: var(--ena-green);
	text-align: center;
	padding: 0 16px;
	border-radius: 3px;
	width: fit-content;
	margin: 0 auto;
}

.cta-btn a {
	color: var(--ena-white) !important;
}
.cta-btn span {
	display: block;
	font-size: 10px;
}

@media screen and (min-width: 767px) {
  #logo {
	max-width:60px;
	margin:0 auto;
	}
  header::after{
    display:none;
  } 
  
  
	nav{
	display: flex;
	margin: 20px 0;

	}
	.Toggle{
	display: none;
	}
	.menu{
	width: 100%;
	background-color: transparent;
	margin-top:-100px;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	}
	.menu ul{
	height: 70px;
	display: flex;
	flex-wrap: wrap;
	/* justify-content: flex-end; */
	align-items: center;
	width: min(1080px, calc(100% - 40px));
	justify-content: space-evenly;
	margin: 0 auto;
	}
	.menu ul li a{
	padding: 0 1em;
	border-bottom: none;

	}
	
	.menu ul li a:hover
	{
	background-color:transparent;
	}
	
	.cta-btn {
		padding: 16px;
        margin: unset;
	}
}

.drawer > .name {
	display: none;
}

/* =================================================
mv
==================================================*/
section.mv {
    padding-top: 184px;
}
.mv-slider {
	width: calc(100% - 70px);
	margin: 0 auto;
}


.slick-dots li,
.slick-dots li button,
.slick-dots li button:before {
    width: 80px;
    height: 2px;
}
.slick-dots li button:before {
	content: "";
	background-color: var(--ena-text);
}
.slick-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;
}

/* =================================================
動画背景
==================================================*/

#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: visible;
}

#video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width:189.777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
}



/* =================================================
コンセプト
==================================================*/
#sec-concept {
}
.concept-box {
	width: min(840px, calc(100% - 64px));
    padding: 62px 16px;
	background-color: rgba(255, 255, 255, 0.4); /* 背景色 */
	border: 1px solid rgba(255, 255, 255, 0.4); /* ボーダー */
	border-right-color: rgba(255, 255, 255, 0.2);
	border-bottom-color: rgba(255, 255, 255, 0.2);
	border-radius: 22px;
	-webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */
	backdrop-filter: blur(20px);
	margin: 0 auto;
	/* box-shadow: 0 5px 20px rgba(255, 152, 79, 0.5); */
	
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	text-align: center;
}
.concept-box div {
	font-weight: 400;
	font-family: var(--ena-font);
	color: var(--ena-text);
}
.concept-box div::before {
	content: "";
	background-color: var(--ena-text);
	width: 1px;
	height: 68px;
	position: absolute;
	top: 0;
	left: calc(50% - 0.5px);
	transform: translateY(-50%);
}

.concept-box h2 {
	font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2.125rem); /*24px-32px*/
	font-family: var(--ena-font);
	font-weight: 500;
    width: max-content;
}

.concept-box  p {
	line-height: 200%;
    word-break: auto-phrase;
}


/* =================================================
プロフィール
==================================================*/
.sec-profile {
	background-color: var(--ena-white);
    padding: 0;
	display: flex; 
    gap: 32px;
}
.face-area,
.text-area {
	height: 430px;
	width: 50%;
}

.face-area {
	background: url(../img/ena.jpg) no-repeat center right / cover;
	border-radius: 0 214px 0 0;
}

.text-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
}

.text-area p:nth-child(1) {
	font-size: 12px;
	position: relative;
}
.text-area p:nth-child(1)::before{
	content: "";
    background-color: var(--ena-text);
    width: 40px;
    height: 0.5px;
    position: absolute;
    top: 50%;
    right: -16px;
    transform: translateX(100%);
}

.text-area p:nth-child(2) {
	font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2.125rem); /*24px-32px*/

}
.text-area p:nth-child(2) span {
	font-size: 14px;
	margin-left: 32px;
}

.text-area p:nth-child(3) {}

.text-area .btn-area {
	height: 140px;
	display: flex;
    align-items: center;
    justify-content: flex-start;
	padding: 0 0 0 90px;
	background: linear-gradient(90deg, rgba(232,225,221,1) 0%, rgba(218,194,197,1) 100%);
    width: calc(100% + 86px);
    border-radius: 140px 0 0;
    margin-left: -86px;
}

/* =================================================
menu voice
==================================================*/
.sec-select {
	padding-top: 11vw;
    padding-bottom: 400px;
    position: relative;
}

.select-box {
	display: flex;
	width: max-content;
    gap: 62px;
	margin: 0 auto;
}
.select-box .card {
    width: 340px;
    height: 430px;
    justify-content: center;
    padding: 0 56px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: linear-gradient(90deg, rgba(232,225,221,0.8) 0%, rgba(218,194,197,0.8) 100%);
	border-radius: 170px 170px 0 0;
	border: 1px solid #fff;
    text-align: center;
}
.select-box .card p:nth-child(1) {
	font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2.125rem); /*24px-32px*/
}
.select-box .card p:nth-child(1)::before {
	content: "";
	width: 1px;
    display: block;
    margin: 0 auto 32px auto;
	background-color: var(--ena-text);
	height: 40px;
}


.accent-image {
	background: url(../img/accent.jpg) no-repeat center bottom / cover;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 32px 0;
    height: 450px;
	z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accent-image img {
	text-align: center;
    width: min(520px, 80%);
    z-index: 10;
}
.accent-image::after {
    content: '';
    position: absolute;
	z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
}



/* =================================================
sns
==================================================*/
section.sns {
	padding-top: 10vw;
	padding-bottom: 10vw;
}
section.sns ul {
	display: flex;
	width: fit-content;
	gap: 32px;
	margin: 0 auto;

}
section.sns ul li {
    width: 350px;
    height: auto;
    padding: 32px 0;
    gap: 16px;
	border-radius: 27px;
	background: #ffffff;
	box-shadow: inset 9px 9px 18px #dbdbdb,
				inset -9px -9px 18px #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	position: relative;
}

section.sns ul li p:nth-child(1) span {
	display: block;
	font-size: 12px;
}
section.sns ul li p:nth-child(1)  {
	display: block;
	font-size: 20px;
	font-family: var(--ena-font);
}

section.sns ul li p.line {
	background-color: #06C755;
	border-radius: 3px;
	padding: 16px;
	width: 250px;
}
section.sns ul li p.instagram {
	width: 50px;
}

section.sns ul li a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
  }

/* =================================================
footer
==================================================*/
footer {
	background-color: var(--ena-white);
	width: 100%;
	padding: 32px 0;
}
footer .logo {
	width: 50px;
	margin: 0 auto 24px auto;
}

footer p {
	text-align: center;
	font-family: "Noto Sans JP", system-ui;
	font-weight: 500;
	font-size: 12px;
}

footer p a {
	color: var(--ena-text);
	text-decoration: underline;
}


/* =================================================

コンテンツ幅767px以下の表示はここからです

==================================================*/
@media screen and (max-width:767px){
	.wrapper {
		padding: 6vw 5vw 20vw;
	}

	.sp_block {
		display: block;
	}

	.sp_none {
		display: none;
	}

	.page-title {
		margin-bottom: 8vw;
	}
	section {
		padding-bottom: 20vh;
	}

	.drawer > .name {
		display: block;
	}
	/* =================================================
	header ~ nav
	==================================================*/
	.name {
		display: block;
		position: fixed;
		top: 30px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	/* =================================================
	mv
	==================================================*/
	section.mv {
		padding-top: 83px;
        padding-bottom: 72px;
	}

	.slick-dotted.slick-slider,
	.slick-track {
		height: 35vh;
	}
	/* =================================================
	動画背景
	==================================================*/
	#video {
		width:198.777778vh
	}

	
	/* =================================================
	コンセプト
	==================================================*/
	.concept-box h2 {
		font-size: 20px;
	}
	.concept-box p {
		letter-spacing: 0;
	}
	/* =================================================
	プロフィール
	==================================================*/
	.face-area {
		width: calc(100% - 35px);
		margin-right: auto;
	}
	
	.sec-profile {
		flex-direction: column;
        padding-top: 62px;
	}
	
	.text-area {
		display: contents;
	}
	
	.text-area p {
        width: calc(100% - 70px);
        margin: 0 auto;
	}

	.face-area {
		order: 4;
	}

	.text-area p:nth-child(1)::before {
		right: 0;
		left: 0;
        transform: translateX(78px);
	}
	
	.text-area p:nth-child(1) {
		order: 0;
	}
	
	.text-area p:nth-child(2) {
		order: 1;
	}
	
	.text-area p:nth-child(3) {
		order: 2;
	}
	
	.text-area .btn-area {
		width: calc(100% - 40px);
		border-radius: 140px 0 0;
		margin-left: auto;
		order: 5;
        margin-top: -62px;
	}


	/* =================================================
	menu & voice
	==================================================*/
	.sec-select {
		padding-top: 15vh;
        margin-bottom: 10vh;
	}
	.select-box {
		flex-direction: column;
	}



	/* =================================================
	sns
	==================================================*/

	section.sns {
        padding-bottom: 10vh;

	}
	section.sns ul {
		flex-direction: column;
		width: calc(100% - 70px);
		margin: 0 auto;
	}
	section.sns ul li {
		width: 100%;
	}
	/* =================================================
	foorer
	==================================================*/
	.sec-contact::before {
		background-size: cover;
	}
	
	.sec-contact {
		padding: 10vw 0;
	}

	.sec-company {
		padding: 10vw 0;
	}

}